Ada banyak tipe data yang bisa kita gunakan di JavaScript, namun jika dibandingkan dengan bahasa pemrograman lain sebetulnya lebih sedikit.
Kali ini kita akan mempelajari tipe data primitif seperti string, number, BigInt, Boolean, undefined, null, dan Symbol, serta tipe data non-primitif seperti objek dan array.
Tapi sebelum itu, mari kita pahami terlebih dahulu apa itu tipe data primitif dan non-primitif di JavaScript.
Apa Itu Tipe Data?
Tipe data adalah jenis data yang dapat disimpan, dimanipulasi, dan digunakan untuk memberi tahu komputer bagaimana menfasirkan nilai atau datanya.
Tipe data menentukan jenis data yang dimiliki variabel dan tipe operasi, seperti operasi matematika, logika dan sebagainya.
Kita tentunya tidak bisa menggunakan operasi matematika untuk mengalikan string, misalnya const nama = 'reza'; console.log(nama[0]); // r nama[0] = 'R'; console.log(nama); // reza 8.
Tipe data di JavaScript dikelompokkan ke dalam dua kategori primitif dan non-primitif.
Primitif
Tipe data primitif hanya dapat menyimpan satu nilai pada satu waktu dan tidak dapat diubah menggunakan cara yang sama seperti tipe data non-primitif. Tipe data Primitif akan dianggap sama jika nilainya sama.
Non-primitif
Tipe data non-primitif dapat menyimpan lebih dari satu nilai pada satu waktu dan dapat diubah. Tipe data non-primitif akan dianggap berbeda meskipun nilainya sama dan dalam urutan yang sama.
Perbedaan Tipe Data Primitif dan Non-primitif
Jumlah nilai yang dapat disimpan
Primitif, satu nilai:
const nama = 'reza';Non-primitif, lebih dari satu nilai:
const data = ['reza', 23, true, null, undefined];Perubahan Nilai
Primitif, tidak dapat diubah:
const nama = 'reza'; console.log(nama[0]); // r nama[0] = 'R'; console.log(nama); // rezaNon-primitif, dapat diubah:
const mahasiswa = ['renova', 'muhamad', 'reza']; mahasiswa[0] = 'ucup'; console.log(mahasiswa); // ["ucup", "muhamad", "reza"]Perbandingan
Kita bisa menggunakan operator kesetaraan ketat const nama = 'reza'; console.log(nama[0]); // r nama[0] = 'R'; console.log(nama); // reza 9 untuk membandingkan dua buah variabel atau operan, ini akan mengembalikan nilai Boolean (true atau false).
Primitif, dianggap sama jika nilainya sama:
const firstName = 'reza'; const namaDepan = 'reza'; console.log(firstName === namaDepan); // trueNon-primitif, dianggap berbeda meskipun nilai dan urutannya sama, tapi dianggap sama jika merujuk ke objek atau array yang sama.
const mahasiswa1 = ['renova', 'muhamad', 'reza']; const mahasiswa2 = ['renova', 'muhamad', 'reza']; console.log(mahasiswa1 === mahasiswa2); // false const binatang1 = ['kucing', 'kelinci', 'ikan']; const binatang2 = binatang1; console.log(binatang1 === binatang2); // trueTipe Data Primitif
Di JavaScript ada tujuh tipe data primitif yang bisa kita gunakan yakni String, Number, BigInt, Boolean, undefined, null, dan Symbol.
String
Tipe data String digunakan untuk mewakili data tekstual atau karakter.
String dapat dibuat menggunakan petik tunggal atau ganda dan diakhiri dengan petik yang sama, kita bisa memasukkan karakter diantara petik.
const firstName = 'renova'; // petik tunggal const lastName = 'reza'; // petik gandaJika di dalam String terdapat petik tunggal, kita harus menggunakan petik ganda sebagai pembungkus String, begitu pula sebaliknya.
Jika aturan ini tidak diikuti, petik yang kita tulis di dalam String akan dianggap sebagai petik penutup.
Atau kita bisa meng-escape menggunakan backslash.
const hari = "jum'at"; // petik tunggal di dalam petik ganda const kata = 'dia berkata, "Saya sedang belajar JavaScript"'; // petik ganda di dalam petik tunggal const janji = "Saya akan ke rumah hari jum\'at"; // escapeIni akan kita pelajari lebih lanjut di artikel khusus yang membahas tipe data string.
Number
Tipe data Number atau angka di JavaScript mewakili angka positif dan negatif entah itu bulat (integer) maupun desimal (floating-point).
const bulatPositif = 10; const bulatNegatif = -10; const desimalPositif = 4.5; const desimalNegatif = -4.5;Tipe data number juga memiliki nilai khusus yaitu const mahasiswa = ['renova', 'muhamad', 'reza']; mahasiswa[0] = 'ucup'; console.log(mahasiswa); // ["ucup", "muhamad", "reza"] 0, const mahasiswa = ['renova', 'muhamad', 'reza']; mahasiswa[0] = 'ucup'; console.log(mahasiswa); // ["ucup", "muhamad", "reza"] 1, dan const mahasiswa = ['renova', 'muhamad', 'reza']; mahasiswa[0] = 'ucup'; console.log(mahasiswa); // ["ucup", "muhamad", "reza"] 2.
Nilai tak terhingga (const mahasiswa = ['renova', 'muhamad', 'reza']; mahasiswa[0] = 'ucup'; console.log(mahasiswa); // ["ucup", "muhamad", "reza"] 3, dan const mahasiswa = ['renova', 'muhamad', 'reza']; mahasiswa[0] = 'ucup'; console.log(mahasiswa); // ["ucup", "muhamad", "reza"] 1) dihasilkan dari pembagian bilangan selain 0 dibagi dengan 0.
const infinityPostif = 5 / 0; // Infinity const infinityNegatif = -5 / 0; // -InfinitySedangkan const mahasiswa = ['renova', 'muhamad', 'reza']; mahasiswa[0] = 'ucup'; console.log(mahasiswa); // ["ucup", "muhamad", "reza"] 2 atau Not-a-Number adalah hasil dari operasi matematika yang tidak valid, seperti mengalikan angka dengan string dan sebagainya.
const data = ['reza', 23, true, null, undefined]; 0Nilai pada tipe data Number memiliki batasan, batas bilangan negatif adalah const mahasiswa = ['renova', 'muhamad', 'reza']; mahasiswa[0] = 'ucup'; console.log(mahasiswa); // ["ucup", "muhamad", "reza"] 6 sedangkan positif const mahasiswa = ['renova', 'muhamad', 'reza']; mahasiswa[0] = 'ucup'; console.log(mahasiswa); // ["ucup", "muhamad", "reza"] 7.
const data = ['reza', 23, true, null, undefined]; 1Ketika kita melakukan operasi matematika dengan nilai yang berada di luar rentang tersebut, JavaScript dapat menghasilkan nilai yang salah.
Lihatlah kode operasi matematika diatas, kadang menghasilkan nilai benar, kadang salah.
Jika hasil operasi bernilai genap hasilnya benar, jika ganjil hasilnya salah. Oleh karena itu, tipe data BigInt diperkenalkan.
Ini akan kita pelajari lebih lanjut di artikel khusus yang membahas tipe data number.
BigInt
BigInt adalah tipe data baru yang diperkenalkan pada ES2020.
BigInt digunakan untuk menyimpan bilangan bulat tanpa batasasan seperti Number. Kita bisa melakukan operasi matematika dengan aman tanpa khawatir hasilnya salah.
Untuk membuat nilai dengan tipe data BigInt sama seperti Number, namun kita perlu mengakhiri nilai dengan huruf 'n':
const data = ['reza', 23, true, null, undefined]; 3Namun, ini hanya bisa digunakan pada bilangan bulat, tidak bisa digunakan pada bilangan desimal:
const data = ['reza', 23, true, null, undefined]; 4Operasi matematika harus menggunakan nilai yang sama-sama BigInt:
const data = ['reza', 23, true, null, undefined]; 5Boolean
Boolean adalah tipe data yang hanya memiliki dua nilai, const mahasiswa = ['renova', 'muhamad', 'reza']; mahasiswa[0] = 'ucup'; console.log(mahasiswa); // ["ucup", "muhamad", "reza"] 8 dan const mahasiswa = ['renova', 'muhamad', 'reza']; mahasiswa[0] = 'ucup'; console.log(mahasiswa); // ["ucup", "muhamad", "reza"] 9.
Jika Anda membutuhkan tipe data yang hanya bernilai benar atau salah (ya atau tidak), tipe data ini bisa menjadi pilihan yang tepat.
const data = ['reza', 23, true, null, undefined]; 6undefined
const firstName = 'reza'; const namaDepan = 'reza'; console.log(firstName === namaDepan); // true 0 adalah nilai yang diberikan ketika variabel dideklarasikan tanpa inisialisasi atau tidak diberi nilai.
Ini hanya berlaku untuk variabel const firstName = 'reza'; const namaDepan = 'reza'; console.log(firstName === namaDepan); // true 1 dan const firstName = 'reza'; const namaDepan = 'reza'; console.log(firstName === namaDepan); // true 2, karena kita tidak dapat mendeklarasikan variabel const firstName = 'reza'; const namaDepan = 'reza'; console.log(firstName === namaDepan); // true 3 tanpa nilai.
const data = ['reza', 23, true, null, undefined]; 7null
const firstName = 'reza'; const namaDepan = 'reza'; console.log(firstName === namaDepan); // true 4 dapat digunakan untuk mewakili ketidakhadiran yang disengaja dari nilai objek.
Kita dapat menetapkan const firstName = 'reza'; const namaDepan = 'reza'; console.log(firstName === namaDepan); // true 4 ke variabel untuk menunjukkan bahwa saat ini variabel tersebut tidak memiliki nilai apa pun, tapi nanti akan memilikinya.
const data = ['reza', 23, true, null, undefined]; 8Symbol
Symbol adalah tipe data baru yang diperkenalkan pada JavaScript ES2015.
Nilai yang memiliki tipe data Symbol disebut sebagai "nilai Symbol".
Nilai Simbol dibuat dengan menjalankan fungsi const firstName = 'reza'; const namaDepan = 'reza'; console.log(firstName === namaDepan); // true 6 yang secara dinamis menghasilkan nilai unik. Nilai sebenarnya bersifat anonim, tidak bisa dilihat.
const data = ['reza', 23, true, null, undefined]; 9Symbol biasanya digunakan sebagai nama kunci saat menambahkan properti baru ke objek agar tidak menimpa properti dengan nama yang sudah ada.
const nama = 'reza'; console.log(nama[0]); // r nama[0] = 'R'; console.log(nama); // reza 0Tipe Data Non-primitif
Ada banyak tipe data non-primitif di JavaScript diantaranya Array, Object, Map, Set, WeakMap, WeakSet, Date dan sebagainya, semuanya adalah Object.
Untuk saat ini kita hanya perlu mengetahui Object dan Array, dan untuk memudahkan pemahaman anggap keduanya berbeda.
Object
const firstName = 'reza'; const namaDepan = 'reza'; console.log(firstName === namaDepan); // true 7 adalah tipe data yang kompleks yang memungkinkan kita menyimpan kumpulan nilai dengan tipe data yang berbeda. Objek berisi properti yang didefinisikan sebagai pasangan kunci dan nilai (key dan value).
Di JavaScript kita bisa membuat objek dengan beberapa cara, bisa menggunakan const firstName = 'reza'; const namaDepan = 'reza'; console.log(firstName === namaDepan); // true 8, const firstName = 'reza'; const namaDepan = 'reza'; console.log(firstName === namaDepan); // true 9, atau menggunakan notasi literal.
Untuk saat ini mari kita gunakan notasi literal, karena lebih mudah dibuat dan lebih sering digunakan.
Untuk membuat objek literal properti kunci dan nilai dari suatu objek diapit atau dibungkus dengan kurung kurawal const mahasiswa1 = ['renova', 'muhamad', 'reza']; const mahasiswa2 = ['renova', 'muhamad', 'reza']; console.log(mahasiswa1 === mahasiswa2); // false const binatang1 = ['kucing', 'kelinci', 'ikan']; const binatang2 = binatang1; console.log(binatang1 === binatang2); // true 0, jika memiliki lebih dari satu properti dipisahkan dengan koma.
Contoh di bawah ini membuat objek bernama const mahasiswa1 = ['renova', 'muhamad', 'reza']; const mahasiswa2 = ['renova', 'muhamad', 'reza']; console.log(mahasiswa1 === mahasiswa2); // false const binatang1 = ['kucing', 'kelinci', 'ikan']; const binatang2 = binatang1; console.log(binatang1 === binatang2); // true 1, const mahasiswa1 = ['renova', 'muhamad', 'reza']; const mahasiswa2 = ['renova', 'muhamad', 'reza']; console.log(mahasiswa1 === mahasiswa2); // false const binatang1 = ['kucing', 'kelinci', 'ikan']; const binatang2 = binatang1; console.log(binatang1 === binatang2); // true 2 adalah kunci sedangkan const mahasiswa1 = ['renova', 'muhamad', 'reza']; const mahasiswa2 = ['renova', 'muhamad', 'reza']; console.log(mahasiswa1 === mahasiswa2); // false const binatang1 = ['kucing', 'kelinci', 'ikan']; const binatang2 = binatang1; console.log(binatang1 === binatang2); // true 3 adalah nilainya, begitu pula dengan const mahasiswa1 = ['renova', 'muhamad', 'reza']; const mahasiswa2 = ['renova', 'muhamad', 'reza']; console.log(mahasiswa1 === mahasiswa2); // false const binatang1 = ['kucing', 'kelinci', 'ikan']; const binatang2 = binatang1; console.log(binatang1 === binatang2); // true 4.
const nama = 'reza'; console.log(nama[0]); // r nama[0] = 'R'; console.log(nama); // reza 1Untuk mengakses nilai tertentu pada objek kita bisa menggunakan nama objek diikuti dengan titik dan kunci yang ingin diakses nilainya.
const nama = 'reza'; console.log(nama[0]); // r nama[0] = 'R'; console.log(nama); // reza 2Untuk mengubah nilai kunci objek sama seperti mengakses nilai, namun diperlukan operator assigment const mahasiswa1 = ['renova', 'muhamad', 'reza']; const mahasiswa2 = ['renova', 'muhamad', 'reza']; console.log(mahasiswa1 === mahasiswa2); // false const binatang1 = ['kucing', 'kelinci', 'ikan']; const binatang2 = binatang1; console.log(binatang1 === binatang2); // true 5 diikuti dengan nilai yang ingin dimasukkan.
const nama = 'reza'; console.log(nama[0]); // r nama[0] = 'R'; console.log(nama); // reza 3Kita juga bisa menambahkan kunci dan nilai baru menggunakan cara yang sama seperti mengubah nilai, namun tentunya kita perlu menggunakan nama kunci baru.
const nama = 'reza'; console.log(nama[0]); // r nama[0] = 'R'; console.log(nama); // reza 4Ini akan kita pelajari lebih lanjut di artikel khusus yang membahas objek.
Array
Array adalah jenis objek yang dapat digunakan untuk menyimpan beberapa nilai, tanpa properti seperti objek.
Array memiliki indeks yang dimulai dari nol dengan kata lain elemen atau nilai pertama di dalam array memiliki indeks 0, elemen berikutnya memiliki indeks 1 dan seterusnya. kita bisa menggunakan indeks untuk memanipulasi nilainya.
Sama seperti objek, array juga dapat dibuat menggunakan const mahasiswa1 = ['renova', 'muhamad', 'reza']; const mahasiswa2 = ['renova', 'muhamad', 'reza']; console.log(mahasiswa1 === mahasiswa2); // false const binatang1 = ['kucing', 'kelinci', 'ikan']; const binatang2 = binatang1; console.log(binatang1 === binatang2); // true 6 atau array literal const mahasiswa1 = ['renova', 'muhamad', 'reza']; const mahasiswa2 = ['renova', 'muhamad', 'reza']; console.log(mahasiswa1 === mahasiswa2); // false const binatang1 = ['kucing', 'kelinci', 'ikan']; const binatang2 = binatang1; console.log(binatang1 === binatang2); // true 7.
Nilai pada array literal harus diapit dengan kurung siku const mahasiswa1 = ['renova', 'muhamad', 'reza']; const mahasiswa2 = ['renova', 'muhamad', 'reza']; console.log(mahasiswa1 === mahasiswa2); // false const binatang1 = ['kucing', 'kelinci', 'ikan']; const binatang2 = binatang1; console.log(binatang1 === binatang2); // true 7, jika memiliki lebih dari satu nilai dipisahkan dengan koma. Kita bisa memasukkan tipe data apa pun ke dalam array, termasuk array dan objek.