Koleksi Data Berurutan

Kenapa ini penting

Kalau object adalah lemari dengan laci berlabel, array adalah antrean atau rak bernomor: data disusun berurutan dan diakses berdasarkan posisinya. Daftar produk di katalog, riwayat transaksi, daftar komentar, antrean pesanan, deretan nilai ujian, semuanya cocok disimpan sebagai array.

Array adalah struktur data yang paling sering kamu pakai di JavaScript. Modul ini fokus pada dasar yang wajib dikuasai: cara membuat array, mengakses elemen, menambah dan membuang elemen di depan atau belakang, serta perbedaan penting antara method yang mengubah array asli (mutating) dan yang membuat array baru. Perbedaan ini krusial, terutama nanti saat kamu memakai framework seperti React yang mengharuskan data tidak diubah langsung.

Konsep inti

Membuat array

Cara	Contoh	Hasil
Literal	`[1, 2, 3]`	`[1, 2, 3]`
`Array.of`	`Array.of(7)`	`[7]`
`Array.from`	`Array.from({ length: 3 }, (_, i) => i)`	`[0, 1, 2]`
`new Array(n).fill(x)`	`new Array(3).fill(0)`	`[0, 0, 0]`

Hati-hati dengan new Array(3): dengan satu argumen angka, hasilnya array kosong sepanjang 3 (berisi "lubang"), bukan [3]. Ini salah satu alasan literal [] menjadi cara yang paling disarankan.

Array di JavaScript boleh berisi campuran tipe ([1, "dua", true, { a: 1 }]), tapi dalam praktik sebaiknya satu array berisi data sejenis supaya mudah diolah.

Mengakses elemen

arr[0] elemen pertama, arr[arr.length - 1] elemen terakhir.
arr.at(-1) elemen terakhir, arr.at(-2) kedua dari belakang.
Mengakses indeks di luar jangkauan menghasilkan undefined, bukan error.
arr.length adalah jumlah elemen. Menulis arr.length = 0 mengosongkan array (mutating).
arr.indexOf(x) dan arr.includes(x) untuk mencari nilai primitif.

Menambah dan membuang di ujung

Bayangkan array sebagai tumpukan piring dan antrean kasir:

Method	Posisi	Aksi	Mengembalikan
`push(x)`	belakang	tambah	panjang baru
`pop()`	belakang	buang	elemen yang dibuang
`unshift(x)`	depan	tambah	panjang baru
`shift()`	depan	buang	elemen yang dibuang

push + pop = stack (tumpukan, LIFO: yang terakhir masuk keluar pertama), seperti tombol undo. push + shift = queue (antrean, FIFO: yang pertama masuk keluar pertama), seperti antrean pesanan. Keempatnya mengubah array asli. Untuk array yang sangat besar, shift dan unshift lebih lambat karena semua elemen harus digeser indeksnya.

splice vs slice

Dua method ini namanya mirip tapi sifatnya sangat berbeda:

slice(awal, akhir) tidak mengubah array asli; mengembalikan salinan potongan. Sama seperti slice pada string.
splice(awal, jumlahHapus, ...itemBaru) mengubah array asli: menghapus sejumlah elemen mulai awal, lalu menyisipkan item baru di posisi itu. Mengembalikan array berisi elemen yang dihapus.

Cara mengingat: splice punya huruf "p" seperti "potong permanen".

Versi modern yang tidak mengubah array asli juga tersedia: toSpliced() (seperti splice tapi mengembalikan array baru) dan with(indeks, nilai) (mengganti satu elemen di salinan). Keduanya tersedia sejak ES2023 dan sudah didukung browser modern serta Node.js 20 ke atas.

Menyalin dan menggabungkan

[...arr] atau arr.slice() membuat salinan dangkal.
[...a, ...b] atau a.concat(b) menggabungkan.
Sama seperti object, salinan ini dangkal: object di dalam array masih dipakai bersama.

Contoh kode

// 1) Membuat array
const buah = ["apel", "jeruk", "mangga"];
console.log(Array.of(7), new Array(3).fill(0));    // → [ 7 ] [ 0, 0, 0 ]
console.log(new Array(3).length, new Array(3)[0]); // → 3 undefined (array berlubang)
console.log(Array.from({ length: 4 }, (_, i) => (i + 1) * 10)); // → [ 10, 20, 30, 40 ]

// 2) Mengakses
console.log(buah[0], buah[buah.length - 1], buah.at(-1)); // → apel mangga mangga
console.log(buah[10]);                // → undefined
console.log(buah.indexOf("jeruk"));   // → 1
console.log(buah.includes("durian")); // → false

// 3) push, pop, unshift, shift
const antrean = [];
console.log(antrean.push("Pesanan #1")); // → 1
antrean.push("Pesanan #2", "Pesanan #3");
console.log(antrean.shift());            // → Pesanan #1 (FIFO: yang pertama dilayani)
console.log(antrean);                    // → [ 'Pesanan #2', 'Pesanan #3' ]

const riwayatUndo = ["ketik A", "ketik B", "hapus"];
console.log(riwayatUndo.pop());                // → hapus (LIFO: aksi terakhir dibatalkan)
console.log(riwayatUndo.unshift("buka file")); // → 3
console.log(riwayatUndo);                      // → [ 'buka file', 'ketik A', 'ketik B' ]

// 4) slice tidak mengubah asli
const angka = [10, 20, 30, 40, 50];
console.log(angka.slice(1, 3)); // → [ 20, 30 ]
console.log(angka.slice(-2));   // → [ 40, 50 ]
console.log(angka);             // → [ 10, 20, 30, 40, 50 ]

// 5) splice mengubah asli
const playlist = ["Lagu A", "Lagu B", "Lagu C", "Lagu D"];
const dihapus = playlist.splice(1, 2); // hapus 2 elemen mulai indeks 1
console.log(dihapus);                  // → [ 'Lagu B', 'Lagu C' ]
console.log(playlist);                 // → [ 'Lagu A', 'Lagu D' ]
playlist.splice(1, 0, "Lagu Baru");    // sisipkan tanpa menghapus
console.log(playlist);                 // → [ 'Lagu A', 'Lagu Baru', 'Lagu D' ]
playlist.splice(-1, 1, "Lagu Z");      // ganti elemen terakhir
console.log(playlist);                 // → [ 'Lagu A', 'Lagu Baru', 'Lagu Z' ]

// 6) Versi tanpa mutasi: toSpliced dan with
const warna = ["merah", "hijau", "biru"];
console.log(warna.toSpliced(1, 1));   // → [ 'merah', 'biru' ]
console.log(warna.with(0, "kuning")); // → [ 'kuning', 'hijau', 'biru' ]
console.log(warna);                   // → [ 'merah', 'hijau', 'biru' ] (asli utuh)

// 7) Menyalin dan menggabungkan
const a = [1, 2];
const b = [3, 4];
const gabung = [...a, ...b, 5];
console.log(gabung, a.concat(b)); // → [ 1, 2, 3, 4, 5 ] [ 1, 2, 3, 4 ]

const tim = [{ nama: "Ani" }];
const salinanTim = [...tim];
salinanTim[0].nama = "Budi";
console.log(tim[0].nama); // → Budi (salinan dangkal, object di dalam dipakai bersama)

// 8) Menghapus item berdasarkan nilai, tanpa mutasi vs dengan mutasi
const keranjang = ["kaos", "topi", "sepatu"];
const posisi = keranjang.indexOf("topi");
const tanpaTopi = keranjang.toSpliced(posisi, 1);
console.log(tanpaTopi, keranjang); // → [ 'kaos', 'sepatu' ] [ 'kaos', 'topi', 'sepatu' ]
if (posisi !== -1) keranjang.splice(posisi, 1);
console.log(keranjang);            // → [ 'kaos', 'sepatu' ]

Kesalahan umum

Tertukar slice dan splice. slice aman (membuat salinan), splice mengubah array asli. Kalau tidak ingin mengubah, pakai slice atau toSpliced.
Memakai new Array(5) untuk membuat [5]. Satu argumen angka berarti panjang. Pakai literal [5] atau Array.of(5).
Memanggil splice(indexOf(x), 1) tanpa mengecek -1. Kalau x tidak ada, indexOf mengembalikan -1 dan splice(-1, 1) malah menghapus elemen terakhir.
Mengira push mengembalikan array. push mengembalikan panjang baru. const baru = arr.push(x) hasilnya angka.
Mengubah array yang dipakai bersama tanpa sadar. Kalau array dikirim ke function atau disimpan di state, ubah salinannya ([...arr, x]) bukan aslinya.

Latihan

Mudah, Diberikan const hari = ["Senin", "Selasa", "Rabu"]. Tambahkan "Minggu" di depan dan "Kamis" di belakang, lalu cetak elemen pertama dan terakhir memakai at.
Sedang, Buat function pindahkan(arr, dari, ke) yang mengembalikan array baru dengan elemen di indeks dari dipindah ke indeks ke (seperti drag-and-drop urutan lagu). Array asli tidak boleh berubah.
Menantang, Buat simulasi antrean bank: array antrean berisi 5 nama. Layani 2 orang (keluarkan dari depan), lalu 1 orang VIP datang dan disisipkan di posisi paling depan, lalu 1 orang biasa datang di belakang. Cetak urutan akhir dan nama-nama yang sudah dilayani.

Lihat solusi

// 1) Mudah
const hari = ["Senin", "Selasa", "Rabu"];
hari.unshift("Minggu");
hari.push("Kamis");
console.log(hari.at(0), hari.at(-1)); // → Minggu Kamis

// 2) Sedang
function pindahkan(arr, dari, ke) {
  const salinan = [...arr];
  const [item] = salinan.splice(dari, 1); // ambil item dari posisi lama
  salinan.splice(ke, 0, item);            // sisipkan di posisi baru
  return salinan;
}
const lagu = ["A", "B", "C", "D"];
console.log(pindahkan(lagu, 0, 2)); // → [ 'B', 'C', 'A', 'D' ]
console.log(lagu);                  // → [ 'A', 'B', 'C', 'D' ]

// 3) Menantang
const antrean = ["Ani", "Beni", "Caca", "Dodi", "Eka"];
const sudahDilayani = [antrean.shift(), antrean.shift()];
antrean.unshift("Pak VIP");
antrean.push("Fani");
console.log(sudahDilayani); // → [ 'Ani', 'Beni' ]
console.log(antrean);       // → [ 'Pak VIP', 'Caca', 'Dodi', 'Eka', 'Fani' ]

Ringkasan

Buat array dengan literal []; Array.from dan fill berguna untuk array berisi pola tertentu.
Akses dengan indeks mulai 0, dan at(-1) untuk elemen terakhir; indeks di luar jangkauan menghasilkan undefined.
push/pop bekerja di belakang, unshift/shift di depan; keempatnya mengubah array asli.
slice membuat salinan potongan, splice mengubah array asli; toSpliced dan with adalah versi tanpa mutasi.
Spread [...arr] membuat salinan dangkal dan bisa menggabungkan beberapa array.