Array JavaScript: Membuat, Mengakses, Mengubah, dan Perulangan

Array Adalah Daftar Berurutan

Array di JavaScript menyimpan nilai-nilai dalam urutan tertentu. Nilainya bisa bertipe apa saja, seperti angka, string, objek, bahkan array lain, dan tidak harus bertipe sama semua. Kamu membuatnya dengan kurung siku:

const fruits = ["apple", "banana", "cherry"];
const mixed = [1, "two", true, null, { id: 3 }];
const empty = [];

console.log(fruits);
console.log(mixed);
console.log(empty);

Sintaks literal itulah yang akan kamu pakai untuk membuat array hampir setiap saat. Ada juga new Array(...), tetapi ada jebakannya: new Array(3) membuat array dengan panjang 3 tanpa elemen sungguhan, bukan [3]. Tetap pakai [].

Index Dimulai dari Nol

Kamu mengakses elemen berdasarkan posisinya, mulai dari 0:

const colors = ["red", "green", "blue"];

console.log(colors[0]);
console.log(colors[1]);
console.log(colors[2]);
console.log(colors[99]);

Ada dua hal yang perlu dicatat. Pertama, mengakses index di luar ujung array tidak memunculkan error, melainkan mengembalikan undefined. Ini sumber umum bug "kenapa nilainya undefined?". Kedua, kamu bisa mengisi index mana pun, termasuk yang melewati ujung array, dan JavaScript dengan senang hati akan memperpanjang array-nya:

const colors = ["red", "green", "blue"];
colors[5] = "purple";

console.log(colors);
console.log(colors.length);

Posisi 3 dan 4 menjadi "slot kosong" (lubang pada array renggang). Panjangnya melompat menjadi 6. Kamu jarang menginginkan ini. Ini efek samping dari betapa fleksibelnya array, bukan fitur untuk diandalkan.

length Selalu Terbarui

array.length selalu satu lebih besar dari index tertinggi. Nilainya otomatis berubah saat kamu menambah atau menghapus elemen:

const nums = [10, 20, 30];
console.log(nums.length);

nums.push(40);
console.log(nums.length);

nums.length = 2;
console.log(nums);

Trik terakhir itu layak diingat: mengisi length akan memotong array. Menulis nums.length = 0 adalah cara cepat untuk mengosongkan array langsung di tempat.

push, pop, shift, unshift

Empat method untuk menambah dan menghapus elemen di ujung array:

const stack = [];

stack.push("a");
stack.push("b");
stack.push("c");
console.log(stack);

const last = stack.pop();
console.log(last, stack);

stack.unshift("start");
console.log(stack);

const first = stack.shift();
console.log(first, stack);

• push(x) menambah di akhir, mengembalikan panjang yang baru.
• pop() menghapus dari akhir, mengembalikan elemen yang dihapus.
• unshift(x) menambah di awal.
• shift() menghapus dari awal.

push/pop cepat. shift/unshift harus menyusun ulang index semua elemen lain, jadi lebih lambat pada array besar. Tidak masalah untuk ukuran sehari-hari, tetapi perlu kamu ketahui kalau bekerja dengan jutaan item.

slice vs splice

Keduanya punya nama yang mirip dan perilaku yang sama sekali berbeda. Kalau kamu bisa membedakannya, kamu akan terhindar dari banyak kebingungan.

slice(start, end) mengembalikan salinan dari sebagian array. Array aslinya tidak tersentuh. end tidak ikut disertakan:

const letters = ["a", "b", "c", "d", "e"];

const middle = letters.slice(1, 4);
console.log(middle);
console.log(letters);

splice(start, deleteCount, ...items) mengubah array. Method ini bisa menghapus, menyisipkan, atau keduanya, dan mengembalikan apa pun yang dihapusnya:

const letters = ["a", "b", "c", "d", "e"];

const removed = letters.splice(1, 2);
console.log(removed);
console.log(letters);

letters.splice(1, 0, "x", "y");
console.log(letters);

Pegangan praktis: kalau kata itu mengingatkanmu pada mengiris sepotong roti untuk diambil salinannya, itu slice. Kalau mengingatkanmu pada menyambung potongan film (memotong lalu menyisipkan), itu splice.

Mencari Sesuatu: indexOf, includes, find

Tiga cara mencari sesuatu, untuk situasi yang berbeda:

const fruits = ["apple", "banana", "cherry"];

console.log(fruits.indexOf("banana"));
console.log(fruits.indexOf("grape"));

console.log(fruits.includes("cherry"));
console.log(fruits.includes("grape"));

const users = [{ id: 1, name: "Ada" }, { id: 2, name: "Boris" }];
const boris = users.find(u => u.id === 2);
console.log(boris);

• indexOf(x) memberimu posisinya, atau -1 kalau tidak ditemukan. Berguna saat kamu butuh index-nya.
• includes(x) memberimu boolean. Lebih rapi saat kamu hanya ingin tahu "apakah ini ada di sini?". Method ini juga menangani NaN dengan benar, yang tidak bisa dilakukan indexOf.
• find(predicate) menjalankan fungsi untuk setiap elemen dan mengembalikan elemen pertama yang cocok. Inilah pilihan untuk array berisi objek, karena indexOf dan includes hanya melakukan pengecekan kesamaan ketat.

Perulangan pada Array

Ada beberapa cara yang bagus, masing-masing cocok untuk situasi berbeda:

const scores = [82, 91, 73, 88];

for (const score of scores) {
    console.log(score);
}

scores.forEach((score, i) => {
    console.log(i, score);
});

for (let i = 0; i < scores.length; i++) {
    console.log(i, scores[i]);
}

for...of adalah pilihan default: mudah dibaca, bekerja dengan iterable apa pun, dan langsung memberimu nilainya. forEach cocok saat kamu juga butuh index-nya dan tidak perlu keluar dari loop lebih awal (kamu tidak bisa break dari forEach). for klasik dengan index memang lebih panjang, tetapi memberimu kendali penuh. Pakai saat kamu perlu melewati elemen, melakukan iterasi mundur, atau keduanya.

Satu loop yang sebaiknya dihindari: for...in. Loop ini melakukan iterasi pada key dan ikut menyertakan property warisan. Itu untuk objek, bukan array.

Menyalin dan Menggabungkan

Array adalah nilai referensi. Menugaskan satu array ke variabel lain tidak menyalinnya, melainkan membuat dua nama untuk array yang sama:

const a = [1, 2, 3];
const b = a;
b.push(4);

console.log(a);
console.log(b);

Untuk benar-benar menyalin, pakai operator spread atau slice():

const a = [1, 2, 3];
const b = [...a];
const c = a.slice();

b.push(4);
c.push(5);

console.log(a);
console.log(b);
console.log(c);

Keduanya memberimu salinan dangkal: array tingkat atasnya baru, tetapi kalau elemennya berupa objek, objek-objek itu tetap dipakai bersama. Spread juga cara paling rapi untuk menggabungkan array:

const front = [1, 2];
const back = [3, 4];
const all = [...front, 99, ...back];

console.log(all);

Array Berisi Objek

Dalam kode sungguhan, sebagian besar array berisi objek. Method yang sama tetap berlaku, tetapi pencocokannya jadi lebih menarik:

const users = [
    { id: 1, name: "Ada", active: true },
    { id: 2, name: "Boris", active: false },
    { id: 3, name: "Chen", active: true },
];

const activeNames = users
    .filter(u => u.active)
    .map(u => u.name);

console.log(activeNames);

filter mengembalikan array baru berisi elemen yang cocok dengan predikat. map mengembalikan array baru di mana setiap elemen sudah diubah. Merangkai keduanya adalah keseharian saat bekerja dengan array berisi objek, dan halaman dokumentasi berikutnya membahas keluarga method itu lebih dalam.

Array vs Objek

Model mental singkatnya: pakai array saat urutan penting dan kamu bekerja dengan daftar hal yang sejenis. Pakai objek (atau Map) saat kamu memberi key berupa nama pada data. "Pertama, kedua, ketiga" adalah wilayah array. "Cari user dengan id 42" adalah wilayah objek atau Map.

Kamu bisa mencampurnya, karena array berisi objek ada di mana-mana, tetapi jangan pakai array sebagai kamus ber-key, dan jangan pakai objek sebagai daftar berurutan. Masing-masing melakukan satu tugas dengan baik.

Berikutnya: Destructuring

Mengambil nilai dari array berdasarkan index (dan property dari objek berdasarkan nama) cukup sering dilakukan sehingga JavaScript punya sintaks khusus untuknya. Itulah destructuring, dan itu topik berikutnya.