🎨

Frontend Fundamentals

Kursus Gratis — Fullstack Talent

03

Mengenal Penghuni Kotak: Tipe Data

📖 12 menit baca 🏷️ Dasar-dasar JS

Di bab sebelumnya, kita sudah tahu cara membuat kotak penyimpanan (`let` & `const`). Lalu... Barang apa saja yang boleh kita masukkan ke dalam kotak-kotak tersebut?

Komputer memroses jenis barang (Data) yang berbeda dengan cara yang sangat berbeda pula. Menjumlahkan `1 + 1` akan menghasilkan `2`, tetapi menjumlahkan teks `"1" + "1"` akan menghasilkan rentetan kata `"11"`. Mari kenali 5 jenis penduduk utama di dunia JavaScript!

🧱 1. Data Primitif (Tunggal & Sederhana)

Data primitif adalah nilai satuan terkecil. Ia tidak bisa dipecah lagi. Ada tiga pemain utama yang akan kamu temui setiap hari: Teks (String), Angka (Number), dan Saklar (Boolean).

String (Teks)

Kumpulan huruf. Selalu diapit oleh tanda kutip tunggal ('..') atau ganda ("..")

let nama = "Budi"; let sapa = 'Halo!';
7

Number (Angka)

Angka bulat ataupun desimal. Ditulis langsung tanpa tanda kutip.

let umur = 25; let harga = 99.99;

Boolean (Saklar)

Hanya ada dua kemungkinan di semesta ini: true (Benar) atau false (Salah).

let isLogin = true; let isLoading = false;

📚 2. Array: Rak Buku Panjang

Masalah muncul ketika kamu menjadi Guru dan harus mencatat 30 nama murid. Membuat `let murid1 = "A"`, `let murid2 = "B"` secara terpisah adalah pekerjaan gila. Array mengizinkanmu mengumpulkan puluhan Tipe Data Tunggal ke dalam satu wadah berderet menggunakan kurung siku `[ ]`.

Pembuatan Array

const daftarMurid = [ "Andi", "Budi", "Cici" ];

Di dalam kotak daftarMurid, terdapat 3 buat String yang dijejer bersebelahan dipisahkan oleh tanda koma.

Cara Memanggilnya (Index ke-0)

Aneh tapi Nyata: Di dalam dunia komputer, mesin tidak mulai menghitung dari angka 1, tapi dari angka 0.

console.log( daftarMurid[0] ); // Menghasilkan: "Andi" console.log( daftarMurid[2] ); // Menghasilkan: "Cici"

🏷️ 3. Object: Koper Berlabel Teks

Array sangat kuat untuk daftar berurutan (ranking, list nama). Namun jika kita ingin mendata ciri-ciri spesifik sebuah Benda Terpadu (Misal Mobil: Punya merk, punya warna, punya harga), menggunakan angka `mobil[0]` sangat tidak jelas apamaksud nilainya.

Di situlah Object dengan kurung kurawal `{ }` lahir! Alih-alih dipanggil memakai deret Angka (0,1,2), ia dipanggil memakai deretan Label Teks (Kata Kunci).

const mobilSaya = { merk: "Tesla", tahun: 2023, isListrik: true }; // Cara membongkar koper (mengambil isinya): console.log( mobilSaya.merk ); // => "Tesla"
🔑

Koper mobilSaya

merk: "Tesla"
tahun: 2023
isListrik: true

🔥 Wujud Asli di Industri Web: Array of Objects

Dalam dunia nyata pembangunan aplikasi Toko Online (seperti Shopee/Tokopedia), komputer server (**Database/Backend**) tidak pernah mengirimkan data secuil-secuil. Mereka mengirimkan Format JSON yang tak lain dan tak bukan adalah Array yang diisi oleh Object-Object raksasa!

// Bayangkan ini adalah kereta Daftar Keranjang Belanja const keranjang = [ { idProd: 101, nama: "Sepatu Lari", harga: 500000 }, { idProd: 882, nama: "Topi Bundar", harga: 95000 }, { idProd: 307, nama: "Tas Ransel", harga: 350000 } ]; // Mengambil harga tas ransel (Baris ketiga/Index-2) console.log( keranjang[2].harga ); // 350000