Setelah belajar function, saatnya kita masuk ke materi yang akan mengubah cara kamu menyimpan dan mengorganisir data—arrays dan objects. Ini adalah fondasi penting untuk membuat aplikasi yang kompleks dan powerful.
Mengapa Perlu Arrays dan Objects?
Bayangkan kamu punya toko online dan perlu menyimpan data beberapa produk. Tanpa arrays dan objects, kamu harus bikin variable terpisah:
let produk1Nama = "Laptop";
let produk1Harga = 5000000;
let produk1Stok = 10;
let produk2Nama = "Mouse";
let produk2Harga = 150000;
let produk2Stok = 25;
// Dan seterusnya... tidak praktis!
Dengan arrays dan objects, kamu bisa mengorganisir data dengan lebih rapi dan efisien.
Arrays: Daftar Data Berurutan
Array adalah container yang bisa menyimpan banyak nilai dalam satu variable. Seperti rak buku yang berisi banyak buku.
Membuat dan Mengakses Array
// Cara membuat array
let buah = ["apel", "pisang", "jeruk", "mangga"];
let angka = [1, 5, 10, 15, 20];
let campuran = ["hello", 42, true, null];
// Mengakses elemen array (dimulai dari index 0)
console.log(buah[0]); // apel (elemen pertama)
console.log(buah[2]); // jeruk (elemen ketiga)
console.log(angka.length); // 5 (jumlah elemen)
Output:
apel
jeruk
5
Mengubah Isi Array
let warna = ["merah", "hijau", "biru"];
// Mengubah elemen
warna[1] = "kuning";
console.log(warna); // ["merah", "kuning", "biru"]
// Menambah elemen di akhir
warna.push("ungu");
console.log(warna); // ["merah", "kuning", "biru", "ungu"]
// Menghapus elemen terakhir
let elementTerakhir = warna.pop();
console.log("Dihapus:", elementTerakhir); // ungu
console.log(warna); // ["merah", "kuning", "biru"]
Output:
["merah", "kuning", "biru"]
["merah", "kuning", "biru", "ungu"]
Dihapus: ungu
["merah", "kuning", "biru"]
Array Methods yang Berguna
JavaScript punya banyak method built-in untuk manipulasi array:
Method Dasar
let numbers = [1, 2, 3, 4, 5];
// unshift & shift - manipulasi awal array
numbers.unshift(0); // Tambah di awal
console.log(numbers); // [0, 1, 2, 3, 4, 5]
let pertama = numbers.shift(); // Hapus dari awal
console.log("Dihapus:", pertama); // 0
console.log(numbers); // [1, 2, 3, 4, 5]
// indexOf & includes - mencari elemen
console.log(numbers.indexOf(3)); // 2 (index elemen 3)
console.log(numbers.includes(4)); // true
console.log(numbers.includes(10)); // false
Output:
[0, 1, 2, 3, 4, 5]
Dihapus: 0
[1, 2, 3, 4, 5]
2
true
false
slice & concat
let fruits = ["apel", "pisang", "jeruk", "mangga", "anggur"];
// slice - ambil sebagian array (tidak mengubah original)
let sebagian = fruits.slice(1, 4); // dari index 1 sampai 3
console.log(sebagian); // ["pisang", "jeruk", "mangga"]
console.log(fruits); // Array asli tidak berubah
// concat - gabungkan array
let buahTropis = ["kelapa", "nanas"];
let semuaBuah = fruits.concat(buahTropis);
console.log(semuaBuah);
Output:
["pisang", "jeruk", "mangga"]
["apel", "pisang", "jeruk", "mangga", "anggur"]
["apel", "pisang", "jeruk", "mangga", "anggur", "kelapa", "nanas"]
Loop untuk Array
Ada beberapa cara untuk iterate (looping) array:
let hobi = ["membaca", "coding", "gaming", "traveling"];
// For loop tradisional
console.log("== For Loop ==");
for (let i = 0; i < hobi.length; i++) {
console.log(`${i + 1}. ${hobi[i]}`);
}
// For...of loop (lebih modern)
console.log("== For...of Loop ==");
for (let item of hobi) {
console.log("- " + item);
}
// forEach method
console.log("== forEach ==");
hobi.forEach(function(item, index) {
console.log(`${index}: ${item}`);
});
Output:
== For Loop ==
1. membaca
2. coding
3. gaming
4. traveling
== For...of Loop ==
- membaca
- coding
- gaming
- traveling
== forEach ==
0: membaca
1: coding
2: gaming
3: traveling
Objects: Data Berstruktur
Object adalah collection of key-value pairs. Seperti kartu identitas yang punya berbagai field.
Membuat dan Mengakses Object
// Membuat object
let mahasiswa = {
nama: "Andi",
umur: 20,
jurusan: "Informatika",
aktif: true
};
// Mengakses property dengan dot notation
console.log(mahasiswa.nama); // Andi
console.log(mahasiswa.umur); // 20
// Mengakses property dengan bracket notation
console.log(mahasiswa["jurusan"]); // Informatika
// Menambah property baru
mahasiswa.semester = 4;
console.log(mahasiswa);
Output:
Andi
20
Informatika
{nama: "Andi", umur: 20, jurusan: "Informatika", aktif: true, semester: 4}
Object Methods
Object bisa punya method (function yang jadi property):
let kalkulator = {
nilai: 0,
tambah: function(angka) {
this.nilai += angka;
return this;
},
kali: function(angka) {
this.nilai *= angka;
return this;
},
hasil: function() {
return this.nilai;
},
reset: function() {
this.nilai = 0;
return this;
}
};
// Method chaining
let hasil = kalkulator.tambah(5).kali(3).tambah(2).hasil();
console.log("Hasil:", hasil); // (5 * 3) + 2 = 17
kalkulator.reset();
console.log("Setelah reset:", kalkulator.nilai);
Output:
Hasil: 17
Setelah reset: 0
Array of Objects
Kombinasi powerful: array yang berisi objects!
let produk = [
{
id: 1,
nama: "Laptop Gaming",
harga: 15000000,
kategori: "Elektronik",
tersedia: true
},
{
id: 2,
nama: "Kaos Polos",
harga: 75000,
kategori: "Fashion",
tersedia: true
},
{
id: 3,
nama: "Sepatu Sneakers",
harga: 450000,
kategori: "Fashion",
tersedia: false
}
];
// Akses data
console.log("Produk pertama:", produk[0].nama);
console.log("Harga laptop:", produk[0].harga);
// Loop untuk tampilkan semua produk
console.log("== Daftar Produk ==");
for (let item of produk) {
let status = item.tersedia ? "Tersedia" : "Habis";
console.log(`${item.nama} - Rp ${item.harga.toLocaleString()} (${status})`);
}
Output:
Produk pertama: Laptop Gaming
Harga laptop: 15000000
== Daftar Produk ==
Laptop Gaming - Rp 15.000.000 (Tersedia)
Kaos Polos - Rp 75.000 (Tersedia)
Sepatu Sneakers - Rp 450.000 (Habis)
Destructuring: Unpacking Data
Destructuring memungkinkan kamu “membongkar” array atau object jadi variable terpisah:
Array Destructuring
let koordinat = [10, 20, 30];
// Cara lama
let x1 = koordinat[0];
let y1 = koordinat[1];
let z1 = koordinat[2];
// Cara modern dengan destructuring
let [x, y, z] = koordinat;
console.log(`X: ${x}, Y: ${y}, Z: ${z}`);
// Skip element yang tidak dibutuhkan
let [first, , third] = [1, 2, 3];
console.log(`First: ${first}, Third: ${third}`);
// Default values
let [a, b, c = 0] = [5, 10];
console.log(`A: ${a}, B: ${b}, C: ${c}`);
Output:
X: 10, Y: 20, Z: 30
First: 1, Third: 3
A: 5, B: 10, C: 0
Object Destructuring
let user = {
firstName: "John",
lastName: "Doe",
age: 25,
city: "Jakarta"
};
// Extract properties ke variables
let {firstName, age} = user;
console.log(`Nama: ${firstName}, Umur: ${age}`);
// Rename variables
let {firstName: nama, lastName: namaBelakang} = user;
console.log(`${nama} ${namaBelakang}`);
// Default values
let {firstName: fn, country = "Indonesia"} = user;
console.log(`${fn} dari ${country}`);
Output:
Nama: John, Umur: 25
John Doe
John dari Indonesia
Spread Operator (…)
Spread operator berguna untuk “menyebarkan” elements array atau properties object:
Spread dengan Arrays
let angka1 = [1, 2, 3];
let angka2 = [4, 5, 6];
// Gabungkan arrays
let gabungan = [...angka1, ...angka2];
console.log(gabungan); // [1, 2, 3, 4, 5, 6]
// Copy array
let copy = [...angka1];
copy.push(4);
console.log("Original:", angka1); // [1, 2, 3]
console.log("Copy:", copy); // [1, 2, 3, 4]
// Spread sebagai arguments
function jumlahkan(a, b, c) {
return a + b + c;
}
let nilai = [10, 20, 30];
console.log("Hasil:", jumlahkan(...nilai)); // 60
Output:
[1, 2, 3, 4, 5, 6]
Original: [1, 2, 3]
Copy: [1, 2, 3, 4]
Hasil: 60
Spread dengan Objects
let alamat = {
jalan: "Jl. Merdeka No. 1",
kota: "Jakarta",
kodePos: "12345"
};
let person = {
nama: "Budi",
umur: 30
};
// Gabungkan objects
let lengkap = {...person, ...alamat};
console.log(lengkap);
// Override properties
let updated = {...person, umur: 31, pekerjaan: "Developer"};
console.log(updated);
Output:
{nama: "Budi", umur: 30, jalan: "Jl. Merdeka No. 1", kota: "Jakarta", kodePos: "12345"}
{nama: "Budi", umur: 31, pekerjaan: "Developer"}
Higher-Order Array Methods
Method advanced yang sangat berguna untuk data processing:
map() - Transform Data
let numbers = [1, 2, 3, 4, 5];
// Transform setiap element
let doubled = numbers.map(n => n * 2);
console.log("Doubled:", doubled); // [2, 4, 6, 8, 10]
// Transform objects
let users = [
{nama: "John", umur: 25},
{nama: "Jane", umur: 30},
{nama: "Bob", umur: 35}
];
let names = users.map(user => user.nama);
console.log("Names:", names); // ["John", "Jane", "Bob"]
Output:
Doubled: [2, 4, 6, 8, 10]
Names: ["John", "Jane", "Bob"]
filter() - Saring Data
let ages = [15, 22, 18, 30, 16, 25];
// Filter umur >= 18
let adults = ages.filter(age => age >= 18);
console.log("Adults:", adults); // [22, 18, 30, 25]
// Filter products yang tersedia
let products = [
{nama: "Laptop", harga: 5000000, tersedia: true},
{nama: "Mouse", harga: 150000, tersedia: false},
{nama: "Keyboard", harga: 300000, tersedia: true}
];
let available = products.filter(p => p.tersedia);
console.log("Tersedia:", available.map(p => p.nama)); // ["Laptop", "Keyboard"]
Output:
Adults: [22, 18, 30, 25]
Tersedia: ["Laptop", "Keyboard"]
reduce() - Aggregate Data
let prices = [100000, 250000, 150000, 75000];
// Hitung total
let total = prices.reduce((sum, price) => sum + price, 0);
console.log("Total:", total); // 575000
// Cari harga tertinggi
let maxPrice = prices.reduce((max, price) => price > max ? price : max, 0);
console.log("Harga tertinggi:", maxPrice); // 250000
// Group by category
let items = [
{nama: "Laptop", kategori: "Elektronik", harga: 5000000},
{nama: "Baju", kategori: "Fashion", harga: 100000},
{nama: "Mouse", kategori: "Elektronik", harga: 150000}
];
let groupByCategory = items.reduce((acc, item) => {
if (!acc[item.kategori]) {
acc[item.kategori] = [];
}
acc[item.kategori].push(item);
return acc;
}, {});
console.log(groupByCategory);
Output:
Total: 575000
Harga tertinggi: 250000
{
Elektronik: [
{nama: "Laptop", kategori: "Elektronik", harga: 5000000},
{nama: "Mouse", kategori: "Elektronik", harga: 150000}
],
Fashion: [
{nama: "Baju", kategori: "Fashion", harga: 100000}
]
}
JSON: JavaScript Object Notation
JSON adalah format untuk bertukar data antar aplikasi:
let user = {
name: "John",
age: 30,
hobbies: ["reading", "coding"],
active: true
};
// Object ke JSON string
let jsonString = JSON.stringify(user);
console.log("JSON String:", jsonString);
// JSON string ke Object
let parsedUser = JSON.parse(jsonString);
console.log("Parsed Object:", parsedUser);
console.log("Name:", parsedUser.name);
// JSON dengan indentasi (untuk debugging)
let prettyJson = JSON.stringify(user, null, 2);
console.log("Pretty JSON:");
console.log(prettyJson);
Output:
JSON String: {"name":"John","age":30,"hobbies":["reading","coding"],"active":true}
Parsed Object: {name: "John", age: 30, hobbies: ["reading", "coding"], active: true}
Name: John
Pretty JSON:
{
"name": "John",
"age": 30,
"hobbies": [
"reading",
"coding"
],
"active": true
}
Latihan Praktis
Mari buat beberapa function yang menggunakan arrays dan objects:
1. Todo List Manager
function createTodoManager() {
let todos = [];
let nextId = 1;
return {
add: function(task) {
todos.push({
id: nextId++,
task: task,
completed: false,
createdAt: new Date()
});
},
complete: function(id) {
let todo = todos.find(t => t.id === id);
if (todo) {
todo.completed = true;
}
},
list: function() {
return todos.map(t => ({
id: t.id,
task: t.task,
status: t.completed ? "✅" : "⏳"
}));
},
pending: function() {
return todos.filter(t => !t.completed);
}
};
}
let todoList = createTodoManager();
todoList.add("Belajar JavaScript");
todoList.add("Buat project");
todoList.add("Push ke GitHub");
todoList.complete(1);
console.log("Semua todos:", todoList.list());
console.log("Yang belum selesai:", todoList.pending());
Output:
Semua todos: [
{id: 1, task: "Belajar JavaScript", status: "✅"},
{id: 2, task: "Buat project", status: "⏳"},
{id: 3, task: "Push ke GitHub", status: "⏳"}
]
Yang belum selesai: [
{id: 2, task: "Buat project", completed: false, createdAt: ...},
{id: 3, task: "Push ke GitHub", completed: false, createdAt: ...}
]
2. Shopping Cart
function createShoppingCart() {
let items = [];
return {
addItem: function(product, quantity = 1) {
let existingItem = items.find(item => item.product.id === product.id);
if (existingItem) {
existingItem.quantity += quantity;
} else {
items.push({product, quantity});
}
},
removeItem: function(productId) {
items = items.filter(item => item.product.id !== productId);
},
updateQuantity: function(productId, quantity) {
let item = items.find(item => item.product.id === productId);
if (item) {
item.quantity = quantity;
}
},
getTotal: function() {
return items.reduce((total, item) => {
return total + (item.product.price * item.quantity);
}, 0);
},
getItems: function() {
return items.map(item => ({
nama: item.product.name,
harga: item.product.price,
quantity: item.quantity,
subtotal: item.product.price * item.quantity
}));
}
};
}
// Test shopping cart
let cart = createShoppingCart();
cart.addItem({id: 1, name: "Laptop", price: 5000000}, 1);
cart.addItem({id: 2, name: "Mouse", price: 150000}, 2);
console.log("Items di cart:", cart.getItems());
console.log("Total:", cart.getTotal().toLocaleString());
Output:
Items di cart: [
{nama: "Laptop", harga: 5000000, quantity: 1, subtotal: 5000000},
{nama: "Mouse", harga: 150000, quantity: 2, subtotal: 300000}
]
Total: 5.300.000
Error Umum dan Solusinya
1. Array Index Out of Bounds
let fruits = ["apel", "pisang"];
console.log(fruits[5]); // undefined (tidak error, tapi tidak ada data)
// Solusi: selalu cek length atau gunakan optional chaining
if (fruits[5]) {
console.log(fruits[5]);
} else {
console.log("Index tidak ada");
}
2. Object Property Tidak Ada
let user = {name: "John"};
console.log(user.age); // undefined
// Solusi: gunakan default values atau optional chaining
console.log(user.age || 18); // Default 18
console.log(user.address?.city); // Optional chaining
Tips Best Practices
Gunakan const untuk arrays/objects yang tidak di-reassign:
const fruits = ["apel", "pisang"]; // Bisa push/pop // fruits = []; // Error! Tidak bisa reassignGunakan method modern:
// Bagus const names = users.map(u => u.name); // Kurang bagus const names = []; for (let i = 0; i < users.length; i++) { names.push(users[i].name); }Gunakan descriptive names:
// Bagus const activeUsers = users.filter(user => user.isActive); // Kurang jelas const filtered = users.filter(u => u.isActive);
Penutup
Arrays dan objects adalah fondasi data structure di JavaScript. Dengan menguasai keduanya, kamu bisa:
- Mengorganisir data kompleks dengan rapi
- Membuat aplikasi yang scalable
- Menggunakan modern JavaScript features seperti destructuring dan spread operator
- Memproses data dengan efficient menggunakan array methods
Di bab ini kamu sudah belajar:
- Arrays: membuat, mengakses, manipulasi, dan methods
- Objects: properties, methods, dan nested structures
- Array of objects untuk data kompleks
- Destructuring untuk unpacking data
- Spread operator untuk copying dan merging
- Higher-order methods: map, filter, reduce
- JSON untuk data exchange
- Best practices dan error handling
Selanjutnya, kita akan belajar tentang DOM manipulation—cara JavaScript berinteraksi dengan HTML untuk membuat web yang interaktif. Siap untuk membuat website yang dynamic?