Array JavaScript Adalah: Pengertian, Cara Kerja, dan Method Wajibnya

Array adalah struktur data untuk menyimpan banyak nilai sekaligus di dalam satu variabel, tersusun secara berurutan, dan diakses lewat nomor urut yang disebut indeks. Kalau sebuah variabel biasa hanya bisa memegang satu nilai, misalnya satu nama atau satu angka, maka array bisa memegang puluhan, ratusan, bahkan ribuan nilai dalam satu wadah. Setiap kali kamu berurusan dengan daftar apa pun (daftar produk di toko online, daftar komentar, daftar hasil pencarian), hampir pasti data itu disimpan sebagai array.

Kita mulai benar-benar dari nol: apa itu array dan kenapa dibutuhkan, cara membuat dan mengakses isinya lewat indeks, bedanya array dengan variabel biasa, method yang akan kamu pakai setiap hari, sampai kesalahan umum yang membuat pemula bingung. Di tengah jalan ada playground interaktif, jadi kamu bisa langsung melihat bagaimana array berubah saat method dijalankan.

Apa Itu Array JavaScript?

Array adalah kumpulan nilai yang disimpan dalam urutan tertentu dan dibungkus dengan tanda kurung siku [ ]. Bayangkan sebuah rak buku dengan kotak-kotak bernomor: kotak 0, kotak 1, kotak 2, dan seterusnya. Setiap kotak bisa menyimpan satu nilai, dan kamu bisa mengambil isi kotak mana pun asalkan tahu nomornya. Itulah gambaran paling sederhana dari sebuah array.

Tanpa array, menyimpan tiga nama saja sudah butuh tiga variabel terpisah:

// Tanpa array, repot dan tidak fleksibel
let nama1 = "Budi"
let nama2 = "Sari"
let nama3 = "Andi"

Dengan array, ketiganya cukup ditampung dalam satu variabel yang rapi:

// Dengan array, satu wadah untuk semua
let nama = ["Budi", "Sari", "Andi"]

Setiap nilai di dalam array disebut elemen, dan posisi setiap elemen ditandai oleh indeks. Yang penting diingat: indeks di JavaScript selalu dimulai dari 0, bukan 1. Jadi "Budi" ada di indeks 0, "Sari" di indeks 1, dan "Andi" di indeks 2. Array bisa berisi tipe data apa saja: teks (string), angka (number), boolean, bahkan object atau array lain di dalamnya.

Kalau kamu ingin mendalami konsep ini sambil langsung praktik di browser, ada materi dasar array interaktif di Hyper Sheets, lengkap dengan latihan bertahap.

Cara Membuat Array

Cara paling umum dan disarankan untuk membuat array adalah dengan array literal, yaitu langsung menuliskan nilai-nilainya di dalam kurung siku:

// Array kosong, siap diisi nanti
let keranjang = []

// Array berisi string
let buah = ["apel", "mangga", "jeruk"]

// Array berisi angka
let nilai = [80, 95, 70, 88]

// Array bisa mencampur tipe data
let campuran = ["Budi", 22, true]

Ada juga cara lain memakai konstruktor new Array(), tapi cara ini jarang dipakai karena lebih panjang dan punya perilaku membingungkan (new Array(3) malah membuat array kosong dengan panjang 3, bukan array berisi angka 3). Untuk pemula, selalu pakai kurung siku: lebih pendek, dan tidak ada perilaku aneh seperti tadi.

Mengakses dan Mengubah Elemen Array

Untuk mengambil satu elemen, tulis nama array diikuti indeksnya di dalam kurung siku. Inilah bagian di mana aturan “indeks mulai dari 0” jadi sangat terasa:

let buah = ["apel", "mangga", "jeruk"]

console.log(buah[0])   // "apel"   (elemen pertama)
console.log(buah[1])   // "mangga" (elemen kedua)
console.log(buah[2])   // "jeruk"  (elemen ketiga)
console.log(buah[3])   // undefined (indeks ini tidak ada)

Perhatikan buah[3] menghasilkan undefined, bukan error, karena array hanya punya indeks 0 sampai 2. Untuk mengubah isi sebuah elemen, cukup assign nilai baru ke indeksnya:

let buah = ["apel", "mangga", "jeruk"]

buah[1] = "pisang"     // ganti elemen indeks 1
console.log(buah)      // ["apel", "pisang", "jeruk"]

Setiap array punya properti length yang berisi jumlah elemennya. Properti ini paling sering dipakai untuk mengambil elemen terakhir:

let buah = ["apel", "mangga", "jeruk"]

console.log(buah.length)             // 3
console.log(buah[buah.length - 1])   // "jeruk" (elemen terakhir)

Perbedaan Array dan Variabel Biasa

Bedanya ada pada berapa banyak nilai yang bisa disimpan dan bagaimana nilai itu diatur. Variabel biasa adalah wadah untuk satu nilai; array adalah wadah untuk banyak nilai yang berurutan dan bernomor.

Perbedaan praktisnya terasa saat datamu bertambah. Misalnya kamu membuat aplikasi to-do list. Kalau memakai variabel biasa, kamu harus tahu jumlah tugas sejak awal dan membuat variabel sebanyak itu. Itu mustahil, karena pengguna bisa menambah tugas kapan saja. Dengan array, kamu cukup punya satu variabel tugas = [] yang bisa tumbuh dan menyusut sesuai kebutuhan. Array adalah tipe data reference, mirip dengan object, konsep yang dibahas tuntas di materi object JavaScript.

Secara teknis, array di JavaScript sebenarnya adalah jenis khusus dari object, itulah kenapa typeof [1, 2, 3] menghasilkan "object". Tapi untuk keperluan sehari-hari, cukup anggap array sebagai “daftar bernomor” dan object sebagai “kumpulan properti bernama”.

Method Array yang Wajib Dikuasai

Sebagian besar kerja dengan array dilakukan lewat method: fungsi bawaan yang bisa langsung kamu panggil untuk memanipulasi isinya. Empat method paling dasar untuk menambah dan menghapus elemen adalah push, pop, unshift, dan shift:

let antrian = ["Budi", "Sari"]

antrian.push("Andi")      // tambah di AKHIR   → ["Budi", "Sari", "Andi"]
antrian.pop()             // hapus dari AKHIR  → ["Budi", "Sari"]
antrian.unshift("Dewi")   // tambah di AWAL    → ["Dewi", "Budi", "Sari"]
antrian.shift()           // hapus dari AWAL   → ["Budi", "Sari"]

Cara paling mudah mengingat keempatnya: push/pop bekerja di ujung akhir array, sedangkan unshift/shift bekerja di awal array (dan menggeser semua indeks lainnya). Yang berakhiran huruf “h” (push, shift, unshift) melibatkan penambahan atau pergeseran, tapi cara terbaik menguasainya adalah dengan mencobanya sendiri.

Coba Sendiri: Visualisasi Array

Klik tombol-tombol di bawah ini dan perhatikan bagaimana elemen serta indeksnya berubah setiap kali kamu menjalankan sebuah method:

Setelah bermain dengan visualisasi di atas, perhatikan satu hal penting: unshift dan shift membuat semua indeks bergeser, sementara push dan pop tidak menyentuh elemen lain. Inilah kenapa push/pop lebih cepat untuk data besar.

Selain keempat method dasar itu, ada empat method transformasi yang akan kamu pakai terus-menerus di JavaScript modern, terutama di React:

let angka = [1, 2, 3, 4, 5]

// map, ubah SETIAP elemen, hasilkan array baru
let dobel = angka.map(n => n * 2)          // [2, 4, 6, 8, 10]

// filter, ambil HANYA yang memenuhi syarat
let genap = angka.filter(n => n % 2 === 0) // [2, 4]

// find, cari SATU elemen pertama yang cocok
let pertama = angka.find(n => n > 3)       // 4

// reduce, gabungkan seluruh array jadi SATU nilai
let total = angka.reduce((acc, n) => acc + n, 0) // 15

Untuk latihan yang lebih mendalam dengan data realistis, materi array methods di Hyper Sheets membahas map, filter, reduce, dan kawan-kawannya lengkap dengan latihan interaktif.

Melakukan Perulangan pada Array

Karena array adalah daftar, kamu akan sering perlu mengunjungi setiap elemennya satu per satu, proses yang disebut iterasi atau perulangan. Cara paling bersih untuk membaca isi array adalah for...of:

let buah = ["apel", "mangga", "jeruk"]

for (let item of buah) {
  console.log(item)   // "apel", lalu "mangga", lalu "jeruk"
}

Kalau kamu juga butuh indeksnya, method forEach sering jadi pilihan favorit karena ekspresif:

let buah = ["apel", "mangga", "jeruk"]

buah.forEach((item, index) => {
  console.log(`${index + 1}. ${item}`)
})
// 1. apel
// 2. mangga
// 3. jeruk

Pola “punya array data lalu meloop-nya untuk menampilkan sesuatu di layar” akan kamu temui terus dalam pengembangan web. Setiap daftar produk, feed media sosial, atau tabel data yang pernah kamu lihat di sebuah website adalah array yang di-loop lalu digambar ke halaman. Konsep ini juga jadi dasar dari manipulasi DOM dengan JavaScript dan cara framework seperti React merender daftar.

Array Bersarang dan Array of Object

Setelah paham dasarnya, kamu akan sering menemui array yang isinya bukan nilai sederhana, melainkan object. Bentuk array of object ini adalah struktur data yang kamu terima setiap kali mengambil data dari API:

let produk = [
  { nama: "Kaos", harga: 75000 },
  { nama: "Celana", harga: 150000 },
  { nama: "Topi", harga: 45000 }
]

// Akses object di indeks tertentu, lalu propertinya
console.log(produk[0].nama)    // "Kaos"
console.log(produk[1].harga)   // 150000

// Kombinasikan dengan method, cari produk di bawah 100rb
let murah = produk.filter(p => p.harga < 100000)
// [{nama: "Kaos"...}, {nama: "Topi"...}]

Hampir semua data nyata (daftar pengguna, riwayat transaksi, komentar) datang dalam bentuk array of object seperti ini, dan method seperti map serta filter adalah alat utamamu untuk mengolahnya.

Kesalahan Umum Pemula dengan Array

Beberapa jebakan hampir selalu dialami setiap orang yang belajar array. Mengenalinya lebih awal menghemat banyak waktu:

1. Lupa indeks mulai dari 0. Elemen pertama adalah arr[0], bukan arr[1]. Ini penyebab error paling umum, terutama saat mengambil elemen terakhir dengan arr[arr.length - 1].

2. Membandingkan array dengan ===. Dua array dengan isi sama tetap dianggap berbeda karena array adalah tipe reference. [1, 2] === [1, 2] menghasilkan false, yang dibandingkan adalah “alamat”-nya, bukan isinya.

3. Menyalin array dengan tanda sama dengan. Menulis let b = a tidak membuat salinan; a dan b menunjuk ke array yang sama, sehingga mengubah b juga mengubah a. Gunakan spread operator untuk menyalin sungguhan:

let a = [1, 2, 3]
let b = a          // BUKAN salinan, b dan a array yang sama
let c = [...a]     // salinan sungguhan dengan spread operator

b.push(4)
console.log(a)     // [1, 2, 3, 4], ikut berubah!
console.log(c)     // [1, 2, 3]    aman, tidak terpengaruh

4. Mengira length adalah indeks terakhir. length adalah jumlah elemen, sedangkan indeks terakhir adalah length - 1. Keduanya berbeda satu angka.

FAQ Seputar Array JavaScript

Apa itu array dengan bahasa sederhana?

Array adalah wadah yang bisa menyimpan banyak nilai sekaligus dalam satu variabel, tersusun berurutan. Seperti rak dengan kotak-kotak bernomor mulai dari 0: setiap kotak memegang satu nilai, dan kamu mengambilnya berdasarkan nomornya. Array cocok untuk menyimpan daftar apa pun, seperti daftar nama, daftar harga, atau daftar produk.

Kenapa indeks array mulai dari 0, bukan 1?

Ini konvensi yang diwarisi dari bahasa pemrograman lama seperti C, dan berkaitan dengan cara komputer menghitung posisi di memori. Indeks sebenarnya adalah “jarak dari elemen pertama”: elemen pertama berjarak 0, elemen kedua berjarak 1, dan seterusnya. Hampir semua bahasa pemrograman modern mengikuti aturan ini, jadi lebih enak kalau dibiasakan sejak awal.

Apa perbedaan array dan object di JavaScript?

Array menyimpan nilai secara berurutan dan diakses lewat indeks angka (arr[0]), cocok untuk daftar. Object menyimpan nilai dalam pasangan key-value dan diakses lewat nama properti (obj.nama), cocok untuk menggambarkan satu entitas dengan banyak atribut. Menariknya, array secara teknis adalah jenis khusus dari object, itulah kenapa typeof [1,2,3] menghasilkan "object".

Apa beda push dan unshift?

Keduanya menambah elemen ke array, bedanya di posisi. push menambah di akhir array dan tidak menyentuh elemen lain. unshift menambah di awal array, sehingga semua elemen lain harus bergeser satu posisi ke belakang. Karena harus menggeser, unshift sedikit lebih lambat untuk array besar dibanding push.

Bagaimana cara menghapus elemen dari array?

Ada beberapa cara tergantung posisinya. pop() menghapus elemen terakhir, shift() menghapus elemen pertama. Untuk menghapus dari posisi tengah, gunakan splice(indeks, jumlah), misalnya arr.splice(1, 1) menghapus satu elemen mulai dari indeks 1. Kalau ingin menghapus berdasarkan kondisi tanpa mengubah array asli, filter() adalah pilihan yang lebih aman.

Apakah satu array boleh berisi tipe data campuran?

Secara teknis boleh: JavaScript mengizinkan [1, "dua", true, null] dalam satu array. Namun dalam praktik yang baik, sebaiknya satu array berisi tipe data yang seragam (semua angka, atau semua object dengan bentuk sama). Array yang isinya konsisten jauh lebih mudah diproses dengan method seperti map dan filter, dan lebih ramah saat kamu nanti pindah ke TypeScript.

Setelah Array, Belajar Apa?

Banyak konsep berikutnya di JavaScript dibangun di atas array. Urutan lanjutan yang paling masuk akal:

1. Object: pasangan array; kombinasi array of object adalah bentuk data paling umum di web. Perkuat dulu dasar JavaScript-mu lewat panduan lengkap JavaScript untuk pemula.
2. Array methods lanjutan: dalami map, filter, reduce, sort, dan some/every yang jadi alat kerja harian. Latih langsung di materi array methods interaktif.
3. React: framework yang mengandalkan array untuk merender daftar; pemahaman array-mu langsung terpakai. Mulai dari belajar React dari nol.
4. TypeScript: memberi tipe pada array (string[], number[]) untuk mencegah bug. Lihat panduan TypeScript untuk JS developer.

Sebelum lanjut, mulai dari yang kecil: buka lagi playground di atas dan coba setiap method sampai kamu bisa menebak hasilnya sebelum menekan tombol. Jangan takut bereksperimen, salah tebak di playground tidak merusak apa-apa.