Dalam perjalanan belajar JavaScript, memahami tipe data JavaScript adalah hal wajib. Kenapa? Karena semua perhitungan, manipulasi teks, penyimpanan nilai, hingga struktur logika dalam program sangat bergantung pada jenis tipe data JS yang digunakan.
Banyak pemula kesulitan ketika menemui error seperti:
- “undefined is not a function”
- “cannot read property of null”
- “NaN” saat menghitung Number
Kesalahan ini biasanya terjadi karena salah memahami tipe data.
Pada artikel ini, kamu akan mempelajari semua JavaScript data types secara lengkap dengan contoh—mulai dari primitive data types JavaScript hingga jenis **non primitive JavaScript **seperti object dan array.
Dan ya, semua akan dijelaskan dengan bahasa santai namun lengkap.
Daftar isi
Baca juga: Variabel JavaScript: Var, Let, dan Const
Apa Itu Tipe Data?
Tipe data adalah kategori nilai dalam JavaScript yang menentukan bagaimana nilai tersebut diproses, disimpan, dan dimanipulasi.
Misalnya:
- Angka → tipe Number
- Teks → tipe String
- Kondisi benar/salah → Boolean
- Data kosong → Null
- Data belum diisi → Undefined
- Kumpulan nilai → Array
- Struktur dengan pasangan key:value → Object
Setiap tipe memiliki perilaku dan aturan masing-masing.
Contoh:
let umur = 20; // Number
let nama = "Aris"; // String
let aktif = true; // Boolean
let data = null; // Null
let belumDiisi; // Undefined
let hobi = ["Coding", "Game"]; // ArrayCode language: JavaScript (javascript)Klasifikasi Tipe Data JavaScript
Tipe data dalam JavaScript dibagi menjadi dua kelompok utama:
Primitive Data Types
Nilai yang sederhana dan tidak dapat dipecah menjadi nilai lain.
Jenisnya:
- Number
- String
- Boolean
- Null
- Undefined
- Symbol
- BigInt
Non-Primitive Data Types
Tipe data yang kompleks dan dapat berisi banyak nilai.
Jenisnya:
- Object
- Array
- Function
Tipe Data Primitive Dengan Contoh
1. Number
Menampung semua angka: integer, float, desimal.
let umur = 25;
let harga = 19.99;
let hasil = 10 / 3;Code language: JavaScript (javascript)2. String
Teks menggunakan ' ', " ", atau template literals.
let nama = "Aris";
let salam = `Halo, ${nama}!`;Code language: JavaScript (javascript)3. Boolean
Hanya dua nilai: true dan false.
let sudahLogin = true;
let premium = false;Code language: JavaScript (javascript)4. Null
Nilai kosong secara sengaja.
let data = null;Code language: JavaScript (javascript)Menariknya, typeof null mengembalikan “object” karena bug historis.
5. Undefined
Variabel yang sudah dibuat namun belum diberi nilai.
let x;
console.log(x); // undefinedCode language: JavaScript (javascript)6. Symbol
Tipe unik yang digunakan untuk membuat identifier yang tidak bentrok.
let id = Symbol("userID");Code language: JavaScript (javascript)7. BigInt
Untuk angka yang sangat besar.
let angkaBesar = 999999999999999999n;Code language: JavaScript (javascript)Tipe Data Non-Primitive
1. Object
Struktur key:value.
let user = {
nama: "Aris",
umur: 25,
aktif: true
};Code language: JavaScript (javascript)2. Array
Kumpulan nilai berurutan.
let hobi = [
"Coding",
"Game",
"Membaca"
];Code language: JavaScript (javascript)3. Function
Tipe data yang dapat dipanggil.
function salam(nama) {
return `Halo, ${nama}!`;
}Code language: JavaScript (javascript)Data Type Checking (Pengecekan Tipe Data)
1. typeof
Digunakan untuk mengecek tipe data.
typeof 123; // "number"
typeof "Aris"; // "string"
typeof false; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object" (bug historis)
typeof []; // "object"
typeof {}; // "object"
typeof function(){}; // "function"Code language: JavaScript (javascript)2. Array Checking
Karena typeof [] = "object", maka gunakan:
Array.isArray([1,2,3]); // trueCode language: JavaScript (javascript)3. instanceOf
Untuk mengecek instance dari class atau konstruktor.
[] instanceof Array; // true
{} instanceof Object; // trueCode language: JavaScript (javascript)Contoh Lengkap HTML + CSS + JavaScript
Berikut contoh demo sederhana untuk memvisualisasikan tipe data JavaScript.
HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Demo Tipe Data JavaScript</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Demo Tipe Data JavaScript</h1>
<button id="cekTipe">Tampilkan Tipe Data</button>
<pre id="output"></pre>
</div>
<script src="script.js"></script>
</body>
</html>Code language: HTML, XML (xml)CSS:
body {
font-family: Arial, sans-serif;
background: #f2f2f2;
padding: 40px;
}
.container {
max-width: 700px;
margin: auto;
background: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0px 4px 20px rgba(0,0,0,0.1);
}
button {
padding: 12px 20px;
border: none;
background: #007bff;
color: white;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
}
pre {
margin-top: 20px;
background: #282c34;
color: #ffffff;
padding: 20px;
border-radius: 6px;
overflow: auto;
}Code language: CSS (css)JavaScript (script.js):
document.getElementById("cekTipe").addEventListener("click", function () {
let data = {
number: 123,
string: "Halo",
boolean: true,
nullValue: null,
undefinedValue: undefined,
array: [1, 2, 3],
object: { a: 1, b: 2 },
func: function () { return "Hi"; }
};
let hasil = "";
for (let key in data) {
hasil += `${key}: ${typeof data[key]} \n`;
}
document.getElementById("output").textContent = hasil;
});Code language: JavaScript (javascript)Berikut ini adalah hasil visual dari kode diatas.
Tips Menggunakan Tipe Data JavaScript
Beberapa praktik terbaik:
1. Gunakan const untuk nilai tetap
const API_URL = "https://domain.com";Code language: JavaScript (javascript)2. Gunakan null untuk mengosongkan nilai dengan sengaja
let user = null;Code language: JavaScript (javascript)3. Gunakan Array.isArray()
Array.isArray(data);Code language: JavaScript (javascript)4. Hindari Number untuk angka sangat besar
Gunakan BigInt.
Kesimpulan
Tipe data merupakan fondasi utama dalam belajar JavaScript. Dengan memahami tipe data primitive, non primitive, hingga cara melakukan data type checking, kamu bisa menghindari banyak error dan menulis kode lebih bersih.
