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.

Di panduan ini kamu akan belajar array JavaScript benar-benar dari nol: apa itu array dan kenapa dibutuhkan, cara membuat dan mengakses isinya lewat indeks, bedanya array dengan variabel biasa, method-method wajib yang akan kamu pakai setiap hari, sampai kesalahan umum yang bikin pemula bingung. Ada juga playground interaktif supaya 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 yang membangun pemahamanmu langkah demi langkah 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, lebih jelas, dan lebih aman.

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 sangat berguna, terutama 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

Inilah pertanyaan yang paling sering muncul: apa sebenarnya bedanya array dengan variabel biasa? Jawabannya terletak pada berapa banyak nilai yang bisa disimpan dan bagaimana nilai itu diorganisir. Variabel biasa adalah wadah untuk satu nilai; array adalah wadah untuk banyak nilai yang berurutan dan bernomor.

Aspek	Variabel biasa	Array
Jumlah nilai	Satu nilai saja	Banyak nilai sekaligus
Ditulis dengan	`let x = 10`	`let x = [10, 20, 30]`
Akses nilai	Langsung: `x`	Lewat indeks: `x[0]`, `x[1]`
Punya urutan?	Tidak relevan	Ya, berurutan dari indeks 0
Cocok untuk	Satu data tunggal	Daftar / koleksi data

Perbedaan praktisnya terasa saat datamu bertambah. Bayangkan kamu membuat aplikasi to-do list. Kalau memakai variabel biasa, kamu harus tahu jumlah tugas sejak awal dan membuat variabel sebanyak 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

Kekuatan sesungguhnya dari array datang dari 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:

Coba Sendiri

length: 3

apel

mangga

jeruk

Riwayat

Klik sebuah method di atas untuk melihat efeknya.

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 jadi fondasi JavaScript modern, kamu akan memakainya terus-menerus, 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” adalah salah satu pola paling fundamental dalam pengembangan web. Setiap daftar produk, feed media sosial, atau tabel data yang pernah kamu lihat di sebuah website pada dasarnya 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"...}]

Menguasai kombinasi array dan object inilah yang membuka pintu ke pemrograman web sungguhan. 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.

Cek Pemahaman

Diberikan let buah = ["apel", "mangga", "jeruk"]. Apa hasil dari console.log(buah[buah.length - 1])?

FAQ Seputar Array JavaScript

Apa itu array dengan bahasa sederhana?

Array adalah wadah yang bisa menyimpan banyak nilai sekaligus dalam satu variabel, tersusun berurutan. Bayangkan sebuah 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 membiasakan diri sejak awal akan sangat membantu.

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?

Boleh secara teknis, 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?

Array adalah salah satu fondasi terpenting dalam JavaScript, dan menguasainya membuka jalan ke banyak konsep berikutnya. Berikut langkah lanjutan yang paling masuk akal:

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.
Array methods lanjutan, dalami map, filter, reduce, sort, dan some/every yang jadi alat kerja harian. Latih langsung di materi array methods interaktif.
React, framework yang sangat mengandalkan array untuk merender daftar; pemahaman array-mu langsung terpakai. Mulai dari belajar React dari nol.
TypeScript, memberi tipe pada array (string[], number[]) untuk mencegah bug. Lihat panduan TypeScript untuk JS developer.

Array mungkin terlihat sederhana, tapi ia adalah tulang punggung dari hampir setiap aplikasi web yang pernah kamu pakai. Setiap kali kamu paham cara menyimpan, mengakses, dan mengolah daftar data, kamu selangkah lebih dekat untuk membangun aplikasi sungguhan. Mulai dari yang kecil, banyak praktik, dan jangan takut bereksperimen dengan method-methodnya sendiri.