Mengenal Tipe Data JavaScript dan Cara Menggunakannya

1. Apa Itu Tipe Data?#

Tipe data adalah pengelompokan nilai berdasarkan karakteristik dan perilakunya.

Dalam JavaScript, tipe data melekat pada nilai, bukan dikunci secara permanen pada variabel.

Contohnya:

1
let data = 10;
2

3
console.log(data);
4

5
data = "Sepuluh";
6

7
console.log(data);

Hasilnya:

1
10
2
Sepuluh

Awalnya, variabel data menyimpan angka. Setelah itu, variabel yang sama menyimpan teks.

Hal tersebut diperbolehkan karena JavaScript merupakan bahasa dengan sistem tipe dinamis (dynamically typed).

Namun, bukan berarti kita sebaiknya sering mengubah tipe nilai dalam satu variabel.

Jika suatu variabel awalnya digunakan untuk menyimpan jumlah artikel, lalu tiba-tiba berisi nama pengguna, kode kita bisa menjadi sulit dipahami.

Jadi, walaupun JavaScript fleksibel, kita tetap perlu menjaga konsistensi penggunaan variabel.

2. Mengenal Tipe Data Primitif dan Object#

Secara umum, nilai dalam JavaScript dapat dibagi menjadi dua kelompok:

1. Primitive, yaitu nilai dasar seperti teks, angka, dan boolean.
2. Object, yaitu nilai yang dapat menyimpan kumpulan properti dan digunakan untuk membentuk struktur data yang lebih kompleks.

JavaScript memiliki tujuh tipe data primitif.

Selain tipe-tipe tersebut, ada tipe object.

Contohnya:

1
const artikel = {
2
  judul: "Belajar JavaScript",
3
  jumlahPembaca: 100
4
};

Array dan function juga berkaitan dengan object dalam JavaScript, meskipun typeof untuk function memiliki hasil khusus.

Kita akan membahas object dan array secara lebih mendalam pada artikel tersendiri.

Untuk sekarang, mari mulai dari tipe data yang paling sering digunakan.

3. String: Menyimpan Teks#

String digunakan untuk menyimpan teks.

Contohnya:

1
const namaWebsite = "BapakGabut";
2
const kategori = 'Programming';
3

4
console.log(namaWebsite);
5
console.log(kategori);

String dapat ditulis menggunakan tanda petik dua ("), tanda petik satu ('), atau backtick (`).

Contoh:

1
const teksPertama = "Halo, Gabuters!";
2
const teksKedua = 'Belajar JavaScript';
3
const teksKetiga = `Selamat datang`;

Ketiganya merupakan string.

1
const namaDepan = "Bapak";
2
const namaBelakang = "Gabut";
3

4
console.log(namaDepan + namaBelakang);

1
BapakGabut

1
console.log(namaDepan + " " + namaBelakang);

1
Bapak Gabut

1
const nama = "Gabuters";
2
const jumlahArtikel = 10;
3

4
console.log(
5
  `Halo, ${nama}! Ada ${jumlahArtikel} artikel untuk dibaca.`
6
);

1
Halo, Gabuters! Ada 10 artikel untuk dibaca.

1
const pesan = `Halo, Gabuters!
2
Selamat datang di BapakGabut.
3
Semoga betah belajar di sini.`;
4

5
console.log(pesan);

1
const nama = "BapakGabut";
2

3
console.log(nama.length);

1
10

4. Number: Menyimpan Angka#

Tipe number digunakan untuk menyimpan angka.

Contohnya:

1
const jumlahArtikel = 10;
2
const hargaDomain = 150000;
3
const nilaiRataRata = 87.5;

Dalam JavaScript, bilangan bulat dan bilangan desimal umumnya menggunakan tipe yang sama, yaitu number.

Kita bisa melakukan operasi matematika terhadapnya.

1
const artikelHTML = 5;
2
const artikelCSS = 6;
3

4
const totalArtikel = artikelHTML + artikelCSS;
5

6
console.log(totalArtikel);

Hasilnya:

1
11

1
const angka = 10;
2
const teksAngka = "10";
3

4
console.log(angka + 5);
5
console.log(teksAngka + 5);

1
15
2
105

1
const hasil = Number("BapakGabut");
2

3
console.log(hasil);

1
NaN

1
console.log(typeof NaN);

1
number

1
console.log(Number.isNaN(Number("BapakGabut")));

1
true

1
console.log(0.1 + 0.2);

1
0.30000000000000004

5. Boolean: Benar atau Salah#

Boolean hanya mempunyai dua kemungkinan nilai:

1
true
2
false

Contohnya:

1
const sudahLogin = true;
2
const artikelDraft = false;
3

4
console.log(sudahLogin);
5
console.log(artikelDraft);

Boolean sering digunakan untuk menentukan kondisi suatu aplikasi.

Misalnya:

1
const sudahLogin = true;
2

3
if (sudahLogin) {
4
  console.log("Selamat datang kembali!");
5
}

Karena sudahLogin bernilai true, pesan akan ditampilkan.

Kalau nilainya false, blok kode di dalam if tidak dijalankan.

Kita akan mempelajari if, else, dan percabangan secara mendalam pada artikel JavaScript #3.

Untuk saat ini, cukup pahami bahwa boolean digunakan untuk merepresentasikan kondisi benar atau salah.

6. Undefined: Nilai yang Belum Tersedia#

Sekarang perhatikan:

1
let namaPengguna;
2

3
console.log(namaPengguna);

Hasilnya:

1
undefined

Variabel tersebut sudah dideklarasikan, tetapi kita belum memberikan nilai.

Karena itu, ketika dibaca, nilainya adalah undefined.

Kita juga dapat menemukannya ketika mencoba membaca properti yang tidak tersedia pada sebuah object.

1
const artikel = {
2
  judul: "Belajar JavaScript"
3
};
4

5
console.log(artikel.penulis);

Hasilnya:

1
undefined

Properti penulis tidak tersedia pada object tersebut.

Namun, perlu diingat bahwa tidak semua penggunaan nama yang belum dikenal akan menghasilkan undefined.

Contohnya:

1
console.log(namaVariabelYangTidakAda);

Kode tersebut justru menghasilkan ReferenceError karena variabelnya tidak pernah dideklarasikan.

7. Null: Sengaja Tidak Memiliki Nilai#

Sekilas, null terlihat mirip dengan undefined.

Tetapi penggunaannya berbeda.

null biasanya diberikan secara sengaja untuk menunjukkan bahwa suatu nilai tidak ada.

Contohnya:

1
const artikelTerpilih = null;
2

3
console.log(artikelTerpilih);

Kita sengaja memberikan nilai null karena belum ada artikel yang dipilih.

Bandingkan:

1
let artikelPertama;
2
const artikelKedua = null;

artikelPertama belum diberi nilai sehingga bernilai undefined.

Sementara itu, artikelKedua secara eksplisit diberi nilai null.

1
console.log(typeof null);

1
object

8. BigInt: Untuk Bilangan Bulat Sangat Besar#

Biasanya, kita menggunakan number untuk menyimpan angka.

Namun, number mempunyai batas ketelitian untuk bilangan bulat.

Batas bilangan bulat aman terbesar dapat dilihat melalui:

1
console.log(Number.MAX_SAFE_INTEGER);

Hasilnya:

1
9007199254740991

Jika kita perlu menggunakan bilangan bulat yang lebih besar secara tepat, JavaScript menyediakan bigint.

Contohnya:

1
const angkaBesar = 9007199254740993n;
2

3
console.log(angkaBesar);
4
console.log(typeof angkaBesar);

Hasil yang ditampilkan Console secara umum:

1
9007199254740993n
2
bigint

Huruf n di akhir menunjukkan bahwa nilai tersebut adalah BigInt.

BigInt juga dapat dibuat menggunakan fungsi BigInt().

1
const angkaBesar = BigInt("9007199254740993");

Menggunakan string seperti contoh tersebut membantu mempertahankan ketepatan bilangan bulat besar.

1
const angkaBesar = 10n;
2
const angkaBiasa = 5;
3

4
console.log(angkaBesar + angkaBiasa);

1
console.log(10n + 5n);

1
15n

9. Symbol: Membuat Nilai yang Unik#

Tipe data primitif berikutnya adalah symbol.

Symbol digunakan untuk membuat nilai yang unik.

Contohnya:

1
const idPertama = Symbol("id");
2
const idKedua = Symbol("id");
3

4
console.log(idPertama === idKedua);

Hasilnya:

1
false

Walaupun keduanya menggunakan deskripsi "id", setiap pemanggilan Symbol() menghasilkan symbol yang berbeda.

Symbol sering digunakan sebagai key properti object ketika kita membutuhkan identitas khusus yang tidak berbenturan dengan key string biasa.

Contohnya:

1
const idRahasia = Symbol("id");
2

3
const artikel = {
4
  judul: "Belajar JavaScript",
5
  [idRahasia]: 123
6
};
7

8
console.log(artikel[idRahasia]);

Hasilnya:

1
123

Perhatikan tanda kurung siku pada [idRahasia].

Itu digunakan agar nilai symbol menjadi key properti object.

Untuk pembelajaran dasar, Gabuters belum perlu sering menggunakan Symbol.

Yang penting, kita tahu bahwa tipe data ini tersedia dan memiliki karakteristik nilai yang unik.

10. Object: Menyimpan Data yang Lebih Terstruktur#

Setelah mengenal tujuh tipe primitif, sekarang kita lihat contoh object.

1
const artikel = {
2
  judul: "Belajar JavaScript",
3
  kategori: "Programming",
4
  sudahTerbit: true
5
};
6

7
console.log(artikel.judul);
8
console.log(artikel.kategori);

Hasilnya:

1
Belajar JavaScript
2
Programming

Object dapat menyimpan beberapa properti dalam satu nilai.

Berbeda dari nilai primitif, object memiliki identitas atau referensi.

Contohnya:

1
const artikelPertama = {
2
  judul: "JavaScript"
3
};
4

5
const artikelKedua = {
6
  judul: "JavaScript"
7
};
8

9
console.log(artikelPertama === artikelKedua);

Hasilnya:

1
false

Walaupun isi keduanya terlihat sama, keduanya merupakan dua object yang berbeda.

Sebaliknya:

1
const artikelPertama = {
2
  judul: "JavaScript"
3
};
4

5
const artikelKedua = artikelPertama;
6

7
console.log(artikelPertama === artikelKedua);

Hasilnya:

1
true

Karena kedua variabel tersebut merujuk pada object yang sama.

Konsep referensi ini penting ketika kita mulai mengolah array dan object.

Namun, kita akan membahasnya lebih lanjut pada JavaScript #6.

11. Mengenal Operator typeof#

Bagaimana cara mengetahui tipe sebuah nilai?

JavaScript menyediakan operator typeof.

Contohnya:

1
console.log(typeof "BapakGabut");
2
console.log(typeof 10);
3
console.log(typeof true);
4
console.log(typeof undefined);
5
console.log(typeof null);
6
console.log(typeof 10n);
7
console.log(typeof Symbol("id"));
8
console.log(typeof {});

Hasilnya:

1
string
2
number
3
boolean
4
undefined
5
object
6
bigint
7
symbol
8
object

Ada dua hal yang perlu diperhatikan.

Pertama, typeof null menghasilkan "object" karena alasan historis yang sudah kita bahas.

Kedua, typeof tidak bisa digunakan untuk membedakan semua jenis object secara rinci.

Misalnya:

1
console.log(typeof []);
2
console.log(typeof {});

Keduanya menghasilkan:

1
object
2
object

Untuk memeriksa apakah suatu nilai merupakan array, kita dapat menggunakan:

1
console.log(Array.isArray([]));

Hasilnya:

1
true

Ada juga hasil khusus untuk function:

1
console.log(typeof function () {});

Hasilnya:

1
function

Walaupun function termasuk object yang dapat dipanggil, typeof memberikan hasil khusus "function".

12. Konversi Tipe Data#

Dalam aplikasi nyata, kita sering menerima data dalam bentuk string.

Contohnya, nilai yang diketik pengguna pada input HTML biasanya dibaca sebagai string.

Padahal, kita mungkin membutuhkan angka untuk melakukan perhitungan.

Karena itu, kita perlu memahami konversi tipe data.

1
const jumlah = "10";
2

3
const jumlahAngka = Number(jumlah);
4

5
console.log(jumlahAngka + 5);

1
15

1
const jumlah = "10";
2

3
console.log(jumlah + 5);

1
105

1
const jumlah = 10;
2

3
const jumlahTeks = String(jumlah);
4

5
console.log(typeof jumlahTeks);

1
string

1
console.log(Boolean(1));
2
console.log(Boolean(0));
3
console.log(Boolean("Halo"));
4
console.log(Boolean(""));

1
true
2
false
3
true
4
false

1
console.log(Boolean("false"));

1
true

13. Truthy dan Falsy#

Dalam JavaScript, tidak semua kondisi harus menggunakan nilai boolean secara langsung.

Beberapa nilai dapat diperlakukan sebagai true atau false ketika digunakan dalam konteks boolean.

Nilai yang diperlakukan sebagai true disebut truthy.

Nilai yang diperlakukan sebagai false disebut falsy.

Contoh nilai falsy:

Selain nilai-nilai tersebut, ada juga kasus khusus historis pada browser, yaitu document.all, yang bersifat falsy.

Untuk pembelajaran sehari-hari, kita akan lebih sering berhadapan dengan nilai-nilai pada tabel.

Sekarang coba:

1
console.log(Boolean("0"));
2
console.log(Boolean("false"));
3
console.log(Boolean([]));
4
console.log(Boolean({}));

Hasilnya:

1
true
2
true
3
true
4
true

Mengapa?

Karena string yang tidak kosong bersifat truthy, begitu juga array dan object, termasuk ketika keduanya kosong.

Konsep ini akan sangat berguna ketika kita mempelajari percabangan.

Namun, kita harus berhati-hati.

Jika suatu nilai bisa berupa angka 0 yang valid, jangan otomatis menganggap nilai falsy berarti datanya tidak tersedia.

14. Perbedaan == dan ===#

Sekarang kita bahas satu perilaku JavaScript yang sering menimbulkan kebingungan.

Coba:

1
console.log(10 == "10");
2
console.log(10 === "10");

Hasilnya:

1
true
2
false

Kenapa berbeda?

Operator == membandingkan nilai menggunakan aturan loose equality, yang pada kombinasi tipe tertentu dapat melakukan konversi tipe.

Sedangkan === menggunakan strict equality, tanpa melakukan konversi tipe antara number dan string seperti contoh tersebut.

Karena itu:

1
10 == "10"

Menghasilkan true.

Tetapi:

1
10 === "10"

Menghasilkan false, karena tipe keduanya berbeda.

Dalam penulisan JavaScript modern, penggunaan === umumnya lebih disarankan agar perbandingan lebih mudah dipahami dan tidak bergantung pada konversi tipe yang tidak kita sadari.

Namun, perlu diketahui bahwa === juga memiliki aturan tersendiri, terutama untuk object dan nilai khusus seperti NaN.

Kita akan menggunakan operator perbandingan ini lebih banyak ketika mempelajari percabangan pada artikel berikutnya.

15. Praktik: Mengolah Data Artikel dari Input#

Sekarang kita gabungkan beberapa konsep yang sudah dipelajari.

Bayangkan kita menerima jumlah artikel terbit dan jumlah artikel draft dari sebuah formulir.

Untuk latihan ini, kita simulasikan nilai input sebagai string.

1
const inputArtikelTerbit = "8";
2
const inputArtikelDraft = "5";
3

4
console.log(typeof inputArtikelTerbit);
5
console.log(typeof inputArtikelDraft);

Hasilnya:

1
string
2
string

Kalau langsung dijumlahkan:

1
const totalArtikel =
2
  inputArtikelTerbit + inputArtikelDraft;
3

4
console.log(totalArtikel);

Hasilnya:

1
85

Padahal yang kita inginkan adalah 13.

Sekarang kita perbaiki menggunakan konversi tipe data.

1
const inputArtikelTerbit = "8";
2
const inputArtikelDraft = "5";
3

4
const artikelTerbit = Number(inputArtikelTerbit);
5
const artikelDraft = Number(inputArtikelDraft);
6

7
const totalArtikel = artikelTerbit + artikelDraft;
8

9
console.log(`Artikel terbit: ${artikelTerbit}`);
10
console.log(`Artikel draft: ${artikelDraft}`);
11
console.log(`Total artikel: ${totalArtikel}`);

Hasilnya:

1
Artikel terbit: 8
2
Artikel draft: 5
3
Total artikel: 13

Bagaimana jika input ternyata bukan angka?

1
const inputArtikelTerbit = "delapan";
2

3
const artikelTerbit = Number(inputArtikelTerbit);
4

5
console.log(artikelTerbit);
6
console.log(Number.isNaN(artikelTerbit));

Hasilnya:

1
NaN
2
true

Artinya, kita tidak bisa langsung menganggap semua input pengguna valid.

Pada aplikasi nyata, kita perlu melakukan validasi sebelum data digunakan.

Nanti, ketika mempelajari DOM dan event, kita akan mencoba membaca input dari formulir HTML dan memvalidasinya secara langsung.

16. Kesalahan Umum Saat Menggunakan Tipe Data#

1
const harga = "10000";
2

3
console.log(harga + 5000);

1
100005000

1
console.log(Boolean("false"));

1
true

1
console.log(Boolean([]));

1
true

1
console.log(typeof null);

1
object

1
const data = null;
2

3
console.log(data === null);

1
true

1
console.log({} === {});

1
false

17. Latihan Mandiri#

Sekarang giliran Gabuters mencoba.

Buat file script.js untuk menyimpan data berikut:

1
const namaWebsite = "BapakGabut";
2
const artikelTerbit = "12";
3
const artikelDraft = "4";
4
const sudahOnline = true;
5
const artikelPilihan = null;

Kemudian lakukan latihan berikut:

1. Tampilkan tipe data setiap variabel menggunakan typeof.
2. Ubah artikelTerbit dan artikelDraft menjadi number.
3. Hitung total seluruh artikel.
4. Tampilkan pesan menggunakan template literal.
5. Periksa apakah artikelPilihan bernilai null menggunakan ===.
6. Coba ubah artikelDraft menjadi "empat" dan amati hasil konversinya.

Sebagai tantangan tambahan, coba prediksi hasil kode berikut sebelum menjalankannya:

1
console.log(5 + "5");
2
console.log(5 - "5");
3
console.log(Boolean("0"));
4
console.log(Boolean(0));
5
console.log(null === undefined);
6
console.log(null == undefined);

Jangan hanya menghafal hasilnya.

Coba pahami mengapa JavaScript menghasilkan nilai tersebut.

18. Penutup#

Pada artikel ini, kita sudah mengenal tujuh tipe data primitif JavaScript: string, number, boolean, undefined, null, bigint, dan symbol.

Kita juga telah melihat bagaimana object berbeda dari nilai primitif, mengenal operator typeof, melakukan konversi tipe data, serta memahami konsep truthy dan falsy.

Yang paling penting, kita belajar bahwa nilai yang terlihat mirip belum tentu memiliki tipe dan perilaku yang sama.

Pemahaman ini akan sangat membantu ketika kita mulai membuat logika program.

Pada artikel berikutnya, kita akan membahas Belajar Percabangan JavaScript: if, else, dan switch.

Di sana, kita akan menggunakan tipe data, operator perbandingan, dan boolean untuk membuat program yang dapat mengambil keputusan berdasarkan kondisi tertentu.

Sampai jumpa di artikel berikutnya, Gabuters!