Coba bayangin kamu punya toko online. Kamu jual 500 produk. Kalau kamu simpan setiap produk dalam variabel terpisah — produk1, produk2, sampai produk500 — kode kamu bakal jadi mimpi buruk! Di sinilah array dan object JavaScript untuk pemula jadi penyelamat. Dua struktur data ini memungkinkan kamu menyimpan, mengelola, dan mengakses ratusan bahkan ribuan data dengan cara yang bersih dan terorganisir. Di artikel ke-5 dari Seri Belajar Javascript ini, kita akan bedah keduanya sampai kamu bisa langsung praktek.
📦 Array JavaScript untuk Pemula: Daftar Data dalam Satu Kotak
Kalau kamu pernah bikin daftar belanja di kertas, selamat — kamu sudah memahami konsep array! Array adalah sebuah variabel yang bisa menyimpan banyak nilai sekaligus, tersusun dalam urutan tertentu. Bedanya dengan daftar belanja biasa, di array setiap item punya nomor urut yang disebut index — dan hitungannya mulai dari angka 0, bukan 1.
Array adalah tipe data di JavaScript yang menyimpan kumpulan nilai dalam satu variabel, di mana setiap nilai bisa diakses melalui nomor urut (index) yang dimulai dari angka 0. Array dibuat menggunakan tanda kurung siku [ ].
Analoginya sederhana: bayangkan array seperti loker di sekolah. Setiap loker punya nomor (index), dan di dalamnya kamu bisa menaruh barang apa saja (nilai). Mau ambil barang? Tinggal sebutkan nomor lokernya!
Gunakan tanda kurung siku [] dan pisahkan setiap item dengan koma.
const buah = ['apel', 'mangga', 'jeruk', 'pisang'];
// index: 0 1 2 3
const angka = [10, 20, 30, 40, 50];
const campur = ['nama', 25, true, null]; // boleh campur tipe dataGunakan namaArray[index] untuk mengambil nilai tertentu.
const buah = ['apel', 'mangga', 'jeruk'];
console.log(buah[0]); // Output: 'apel'
console.log(buah[1]); // Output: 'mangga'
console.log(buah[2]); // Output: 'jeruk'
console.log(buah.length); // Output: 3 (jumlah item)JavaScript menyediakan banyak method bawaan untuk manipulasi array.
let belanja = ['susu', 'roti'];
belanja.push('telur'); // tambah di akhir
belanja.unshift('keju'); // tambah di depan
belanja.pop(); // hapus item terakhir
belanja.shift(); // hapus item pertama
// Loop semua item
belanja.forEach(function(item) {
console.log(item);
});Index array selalu dimulai dari 0! Ini salah satu hal yang paling sering bikin pemula bingung. Jadi kalau kamu punya array dengan 5 item, index-nya adalah 0, 1, 2, 3, dan 4 — bukan 1 sampai 5. Catat baik-baik ya!
🗂️ Object JavaScript: Simpan Data Dengan Label yang Jelas
Kalau array itu seperti loker dengan nomor, maka object itu seperti formulir biodata — setiap informasi punya label yang jelas. Kamu tidak hanya menyimpan nilai, tapi juga nama dari nilai tersebut. Di JavaScript, label itu disebut key (kunci), dan nilai yang tersimpan disebut value (nilai). Pasangan key-value inilah inti dari object JavaScript untuk pemula.
Object adalah tipe data di JavaScript yang menyimpan kumpulan data sebagai pasangan key: value. Object dibuat menggunakan tanda kurung kurawal { }. Dengan object, setiap data punya nama deskriptif yang membuatnya mudah diakses dan dimengerti.
Gunakan kurung kurawal dan format key: value, pisahkan dengan koma.
const mahasiswa = {
nama: 'Budi Santoso',
umur: 21,
jurusan: 'Teknik Informatika',
aktif: true
};Ada dua cara: dot notation (titik) dan bracket notation (kurung siku).
// Dot notation (lebih umum dipakai)
console.log(mahasiswa.nama); // 'Budi Santoso'
console.log(mahasiswa.umur); // 21
// Bracket notation (berguna jika key dinamis)
console.log(mahasiswa['jurusan']); // 'Teknik Informatika'
// Ubah nilai
mahasiswa.umur = 22;
// Tambah property baru
mahasiswa.ipk = 3.75;Uniknya, nilai dalam object bisa berupa fungsi. Fungsi di dalam object disebut method.
const karakter = {
nama: 'Naruto',
level: 99,
salam: function() {
console.log('Dattebayo! Aku ' + this.nama);
}
};
karakter.salam(); // Output: 'Dattebayo! Aku Naruto'Hampir semua hal di JavaScript adalah object — termasuk array, string, bahkan fungsi! Makanya memahami object adalah fondasi untuk menguasai JavaScript secara mendalam. Setelah ini, belajar DOM di artikel berikutnya akan terasa jauh lebih mudah.
⚔️ Array vs Object: Kapan Pakai yang Mana?
Ini pertanyaan yang paling sering muncul saat belajar array dan object JavaScript pemula: kapan sebaiknya pakai array, dan kapan pakai object? Jawabannya tergantung pada jenis data yang kamu simpan.
| Aspek | Array [ ] | Object { } |
|---|---|---|
| Cara Akses Data | Nomor urut (index) | Nama kunci (key) |
| Cocok untuk | Daftar item sejenis | Data dengan atribut berbeda |
| Contoh Nyata | Daftar nama, harga produk | Profil user, data produk |
| Urutan Data | Terurut (ordered) | Tidak harus terurut |
| Loop Data | forEach, for...of | for...in, Object.keys() |
Di dunia nyata, kamu sering butuh array yang berisi banyak object. Ini adalah pola yang paling sering dipakai dalam pengembangan aplikasi web — mulai dari menampilkan daftar produk, daftar pengguna, hingga data dari API.
const produk = [
{ id: 1, nama: 'Laptop Gaming', harga: 15000000 },
{ id: 2, nama: 'Mouse Wireless', harga: 250000 },
{ id: 3, nama: 'Keyboard Mekanikal', harga: 800000 }
];
// Akses data spesifik
console.log(produk[0].nama); // 'Laptop Gaming'
console.log(produk[1].harga); // 250000
// Tampilkan semua produk
produk.forEach(function(item) {
console.log(item.nama + ' - Rp' + item.harga);
});Format JSON (JavaScript Object Notation) — yang digunakan hampir semua API di internet untuk bertukar data — didesain langsung dari sintaks object JavaScript! Jadi kalau kamu sudah paham object JS, kamu sudah setengah jalan untuk bisa berkomunikasi dengan API web.
🚀 Contoh Nyata: Buat Aplikasi Daftar Tugas dengan Array & Object
Teori tanpa praktik itu hampa. Mari kita gabungkan semua yang sudah kamu pelajari tentang array dan object JavaScript ke dalam contoh mini yang bisa langsung kamu coba di browser!
let daftarTugas = [
{ id: 1, tugas: 'Belajar Array', selesai: true },
{ id: 2, tugas: 'Belajar Object', selesai: true },
{ id: 3, tugas: 'Belajar DOM', selesai: false }
];// Tambah tugas baru
function tambahTugas(namaTugas) {
let tugas_baru = {
id: daftarTugas.length + 1,
tugas: namaTugas,
selesai: false
};
daftarTugas.push(tugas_baru);
}
// Filter hanya tugas yang belum selesai
let belumSelesai = daftarTugas.filter(function(item) {
return item.selesai === false;
});
tambahTugas('Belajar Event Listener');
console.log(belumSelesai); // [{id:3, tugas:'Belajar DOM'...}]Jika kamu mendeklarasikan array atau object dengan const, kamu tidak bisa mengganti variabelnya secara keseluruhan, tapi kamu masih bisa mengubah isinya (push, pop, mengubah property). Ini sering bikin bingung! Gunakan let kalau kamu mau reassign variabel seluruhnya.
Method filter(), map(), dan reduce() adalah tiga method array paling powerful yang wajib kamu kuasai. Mereka memungkinkan kamu memanipulasi data dalam array tanpa mengubah array aslinya — prinsip yang disebut immutability dan sangat penting di framework modern seperti React.
Kamu Sudah Menguasai Array dan Object!
Ini adalah milestone penting. Struktur data adalah jantung dari setiap program.
Menguasai array dan object JavaScript pemula adalah kunci untuk melangkah lebih jauh. Artikel selanjutnya kita akan masuk ke dunia DOM — di mana kamu akan mulai mengontrol elemen HTML langsung dengan JavaScript. Seru banget! 🚀
JavaScript from Zero to Zorro
14 artikel terstruktur dari nol sampai bisa bikin aplikasi web interaktif sendiri.
JavaScript jauh lebih mudah dipahami kalau kamu sudah punya fondasi HTML dan CSS. Kalau belum, yuk belajar dulu:
No comments:
Post a Comment