Tutorial Array JavaScript Lengkap Dengan Contoh

Array merupakan salah satu konsep paling penting dalam JavaScript. Hampir semua aplikasi modern—mulai dari website, sistem inventory, aplikasi kasir, game, hingga dashboard data—menggunakan array untuk mengelola kumpulan data. Karena itu, belajar array JavaScript merupakan fondasi wajib sebelum melangkah ke tahap JavaScript yang lebih rumit.

Bagian ini akan membahas pengertian array, cara membuat array, contoh array JavaScript sederhana, dasar-dasar cara penggunaannya, serta konsep penting seperti indeks, immutable, dan perbedaan array vs object. Seluruh pembahasan dibuat selangkah demi selangkah agar mudah dipahami pemula.

Baca juga: Fungsi JavaScript: Cara Membuat dan Memanggil Function

Pengertian Array JavaScript

Array JavaScript adalah struktur data yang digunakan untuk menyimpan banyak nilai dalam satu variabel.

Jika variabel biasa hanya bisa menyimpan satu nilai, array bisa menyimpan banyak nilai sekaligus.

Contoh sederhana:

let buah = ["apel", "mangga", "pisang"];Code language: JavaScript (javascript)

Di dalam contoh di atas, variabel buah menyimpan tiga nilai dalam satu tempat.

Ciri-ciri array JavaScript:

• Memiliki indeks, dimulai dari angka 0.
• Bisa menyimpan berbagai tipe data sekaligus.
• Bisa diubah kapan saja (mutable).
• Memiliki banyak metode (method) untuk manipulasi data.

Kenapa Array Penting dalam Pemrograman?

Array menjadi penting karena hampir semua aplikasi butuh mengelola data dalam jumlah banyak. Contohnya:

• Daftar produk
• Daftar user
• Riwayat transaksi
• List komentar
• Data chart atau grafik
• Respons dari API yang berisi kumpulan objek

Jika kamu tidak menggunakan array, kamu akan membuat banyak variabel seperti:

let angka1 = 10;
let angka2 = 20;
let angka3 = 30;
// dan seterusnya...Code language: JavaScript (javascript)

Ini tidak efisien dan sulit di-maintain.

Dengan array:

let angka = [10, 20, 30];Code language: JavaScript (javascript)

Lebih rapi, fleksibel, dan mudah diproses dengan perulangan.

Cara Membuat Array JavaScript

Ada beberapa cara membuat array, dan semua valid. Berikut metode yang paling umum digunakan:

1. Array Literal (paling umum & direkomendasikan)

let warna = ["merah", "biru", "hijau"];Code language: JavaScript (javascript)

2. Menggunakan new Array()

let angka = new Array(1, 2, 3);Code language: JavaScript (javascript)

Namun, cara ini jarang dipakai pemula karena kadang membingungkan ketika hanya diberi satu argumen:

let data = new Array(5); // membuat array kosong dengan panjang 5, bukan array berisi angka 5Code language: JavaScript (javascript)

3. Array kosong lalu ditambahkan belakangan

let nama = [];
nama.push("Andi");
nama.push("Budi");Code language: JavaScript (javascript)

Semua cara benar, tetapi cara literal adalah yang paling disarankan karena sederhana, cepat, dan jelas.

Cara Menampilkan Array JavaScript

Untuk melihat isi array, kamu bisa menggunakan berbagai cara:

1. console.log()

Cara paling umum saat belajar:

let buah = ["apel", "jeruk", "anggur"];
console.log(buah);Code language: JavaScript (javascript)

2. Menampilkan elemen tertentu

console.log(buah[0]); // apel
console.log(buah[1]); // jerukCode language: JavaScript (javascript)

3. Melihat panjang array

console.log(buah.length); // 3Code language: JavaScript (javascript)

Output akan berubah ketika elemen ditambah atau dikurangi.

Tipe Data yang Bisa Disimpan di Dalam Array

JavaScript fleksibel—array bisa menyimpan berbagai tipe data sekaligus:

let campuran = [
    "teks",
    123,
    true,
    null,
    { nama: "Aris", umur: 25 },
    [1, 2, 3]
];Code language: JavaScript (javascript)

Artinya array di JavaScript tidak “ketat” seperti di bahasa lain, sehingga sangat cocok untuk berbagai macam struktur data.

Contoh Array JavaScript Sederhana

Contoh daftar nama:

let nama = ["Dewi", "Agus", "Rian"];Code language: JavaScript (javascript)

Contoh daftar angka:

let angka = [10, 20, 30, 40];Code language: JavaScript (javascript)

Contoh array campuran:

let data = ["apel", 99, true];Code language: JavaScript (javascript)

Contoh array objek:

let produk = [
    { id: 1, nama: "Laptop", harga: 8000000 },
    { id: 2, nama: "Mouse", harga: 150000 }
];Code language: JavaScript (javascript)

Array bisa digunakan dalam hampir semua kasus penyimpanan data berformat list.

Dasar-Dasar Cara Menggunakan Array

Berikut adalah operasi dasar dalam array:

1. Mengakses elemen array

let warna = ["biru", "kuning", "merah"];
console.log(warna[2]); // merahCode language: JavaScript (javascript)

2. Mengubah nilai tertentu

warna[1] = "hitam";Code language: JavaScript (javascript)

3. Menambahkan elemen

warna.push("ungu"); // tambah di akhir
warna.unshift("hitam"); // tambah di awalCode language: JavaScript (javascript)

4. Menghapus elemen

warna.pop(); // hapus di akhir
warna.shift(); // hapus di awalCode language: JavaScript (javascript)

Ini semua akan dibahas lebih lengkap di artikel ini, tetapi dasar-dasarnya penting untuk dikuasai sejak awal.

Perbedaan Array vs Object Pada JavaScript

Banyak pemula bingung antara keduanya.

Object

• Berisi pasangan key–value.
• Seperti kamus atau data detail.

let user = {
    nama: "Rudi",
    usia: 30
};Code language: JavaScript (javascript)

Array

• Berisi daftar data.
• Memiliki indeks angka.

let warna = ["biru", "kuning", "merah"];Code language: JavaScript (javascript)

Perbedaannya:

Array	Object
Diakses dengan indeks angka	Diakses dengan key
Cocok untuk list	Cocok untuk data detail
Dapat disort, di-loop	Dapat menyimpan informasi terstruktur

Konsep Indeks Array

Indeks array selalu dimulai dari 0, bukan 1.

let hewan = ["kucing", "anjing", "kelinci"];

console.log(hewan[0]); // kucing
console.log(hewan[2]); // kelinciCode language: JavaScript (javascript)

Jika mengakses indeks yang tidak ada:

console.log(hewan[5]); // undefinedCode language: JavaScript (javascript)

Ini normal dan sering dipakai untuk pengecekan kondisi.

Mutable vs Immutable (Dasar)

Array di JavaScript bersifat mutable. Artinya, datanya bisa diubah setelah dibuat.

Contoh mutable:

let angka = [1, 2, 3];
angka[0] = 10;Code language: JavaScript (javascript)

Bahkan jika array disimpan dalam variabel const:

const data = [1, 2, 3];
data[1] = 99; // masih bolehCode language: JavaScript (javascript)

Karena yang tidak boleh adalah menggantikan keseluruhan array, bukan mengubah isinya:

data = [5, 6, 7]; // ❌ errorCode language: JavaScript (javascript)

Immutable (tidak bisa diubah) lebih sering dibahas pada method pure seperti map, filter, dan slice yang tidak memodifikasi nilai asli. Bagian ini akan kita kupas lebih dalam lagi di bawah.

Metode Dasar & Manipulasi Array

Di bagian ini kita membahas metode-metode array yang paling sering dipakai: menambah, menghapus, mengakses, serta manipulasi lain seperti splice, slice, concat, indexOf, includes, reverse, dan sort. Setiap method disertai penjelasan langkah demi langkah dan contoh kasus nyata.

Menambah Elemen: push() & unshift()

push() — tambahkan di akhir array

• Mengubah array asli (mutable).
• Mengembalikan panjang array baru.

let buah = ["apel", "jeruk"];
buah.push("mangga"); // tambah di akhir
console.log(buah); // ["apel", "jeruk", "mangga"]Code language: JavaScript (javascript)

Langkah:

1. Siapkan array.
2. Panggil array.push(item1, item2, ...).
3. Array berubah; nilai baru berada di indeks terakhir.

unshift() — tambahkan di awal array

• Mengubah array asli (mutable).
• Mengembalikan panjang array baru.

let buah = ["apel", "jeruk"];
buah.unshift("mangga"); // tambah di awal
console.log(buah); // ["mangga", "apel", "jeruk"]Code language: JavaScript (javascript)

Gunakan unshift saat urutan penting dan item baru harus berada di depan (mis. notifikasi terbaru di paling atas).

Menghapus Elemen: pop() & shift()

pop() — hapus elemen terakhir

• Mengubah array asli (mutable).
• Mengembalikan elemen yang dihapus.

let buah = ["apel", "jeruk", "mangga"];
let terakhir = buah.pop();
console.log(terakhir); // "mangga"
console.log(buah); // ["apel", "jeruk"]Code language: JavaScript (javascript)

shift() — hapus elemen pertama

Mirip pop() tapi di awal.

let antrian = ["A", "B", "C"];
let depan = antrian.shift();
console.log(depan); // "A"
console.log(antrian); // ["B", "C"]Code language: JavaScript (javascript)

Catatan performa: shift & unshift bisa lebih besar karena perlu menggeser indeks semua elemen pada array besar.

Mengakses & Mengubah Nilai

• Akses elemen: array[index] (index mulai dari 0).
• Ubah nilai dengan assignment.

let warna = ["merah", "biru", "hijau"];
console.log(warna[1]); // "biru"
warna[1] = "kuning";
console.log(warna); // ["merah", "kuning", "hijau"]Code language: JavaScript (javascript)

Jika mengakses indeks yang tidak ada, hasilnya undefined:

console.log(warna[10]); // undefinedCode language: JavaScript (javascript)

splice() — Hapus / Tambah / Ganti Elemen (Serbaguna)

splice(startIndex, deleteCount, ...itemsToAdd)

• Mengubah array asli.
• Berguna untuk operasi kompleks (hapus & sisip sekaligus).

Contoh hapus:

let arr = ["a", "b", "c", "d"];
arr.splice(1, 2); // mulai index 1, hapus 2 elemen
console.log(arr); // ["a", "d"]Code language: JavaScript (javascript)

Contoh menyisipkan data:

let arr = ["a", "d"];
arr.splice(1, 0, "b", "c"); // mulai index 1, hapus 0, tambah "b","c"
console.log(arr); // ["a", "b", "c", "d"]Code language: JavaScript (javascript)

Contoh ganti data:

let arr = ["a", "b", "c"];
arr.splice(1, 1, "x", "y"); // ganti "b" dengan "x","y"
console.log(arr); // ["a", "x", "y", "c"]Code language: JavaScript (javascript)

splice mengembalikan array berisi elemen yang dihapus.

slice() — Ambil Subarray (Non-destruktif)

slice(start, end) — mengambil bagian tanpa mengubah array asli. end tidak termasuk.

let angka = [1, 2, 3, 4, 5];
let bagian = angka.slice(1, 4); // indeks 1 sampai 3
console.log(bagian); // [2, 3, 4]
console.log(angka); // tetap [1,2,3,4,5]Code language: JavaScript (javascript)

Gunakan slice untuk membuat salinan sebagian/seluruh array: let copy = arr.slice().

concat() — Menggabungkan Array (Non-destruktif)

let a = [1, 2];
let b = [3, 4];
let gabung = a.concat(b);
console.log(gabung); // [1,2,3,4]Code language: JavaScript (javascript)

concat juga menerima nilai tunggal: a.concat(3, 4).

Alternatif modern: spread operator [...]:

let gabung2 = [...a, ...b, 5];Code language: JavaScript (javascript)

indexOf() & includes() — Mencari Nilai

indexOf(value, fromIndex) — mengembalikan indeks atau -1

• Pencarian menggunakan strict equality (===).
• Tidak menemukan NaN.

let arr = ["a", "b", "c"];
console.log(arr.indexOf("b")); // 1
console.log(arr.indexOf("x")); // -1Code language: JavaScript (javascript)

includes(value) — mengembalikan true/false

• Lebih readable untuk cek keberadaan.

console.log(arr.includes("c")); // trueCode language: JavaScript (javascript)

Catatan: untuk array of objects, gunakan .find() atau .some() jika perlu pengecekan properti.

reverse() & sort()

reverse() — balik urutan (in-place)

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]Code language: JavaScript (javascript)

sort() — urutkan (in-place)

• Default mengurutkan sebagai string → hati-hati saat mengurutkan angka.
• Untuk angka, selalu berikan comparator.

Contoh salah:

let nums = [1, 10, 2];
nums.sort();
console.log(nums); // [1,10,2]  (karena perbandingan string)Code language: JavaScript (javascript)

Benar (angka):

nums.sort(function(a, b) {
    return a - b;
});
console.log(nums); // [1,2,10]Code language: JavaScript (javascript)

Contoh urut string:

let nama = ["Budi","Ani","Cici"];
nama.sort(); // ["Ani","Budi","Cici"]Code language: JavaScript (javascript)

Contoh Manipulasi Array dalam Kasus Nyata

Misal kita punya daftar produk, ingin:

• Cari produk tertentu
• Hapus produk tidak tersedia
• Urutkan berdasarkan harga

let produk = [
    { id: 1, nama: "Mouse", harga: 150000, stok: 10 },
    { id: 2, nama: "Keyboard", harga: 300000, stok: 0 },
    { id: 3, nama: "Monitor", harga: 1200000, stok: 5 }
];

// filter produk masih ada stok
let tersedia = produk.filter(function(p) {
    return p.stok > 0;
});

// sort berdasarkan harga ascending
tersedia.sort(function(a, b) {
    return a.harga - b.harga;
});

console.log(tersedia);Code language: JavaScript (javascript)

Penjelasan Step-by-Step Tiap Method (Ringkasan Praktis)

• push(item...) — tambah di akhir (mutasi).
• unshift(item...) — tambah di awal (mutasi).
• pop() — hapus akhir & kembalikan elemen (mutasi).
• shift() — hapus awal & kembalikan elemen (mutasi).
• splice(start, deleteCount, items...) — hapus/sisip/ganti (mutasi).
• slice(start, end) — ambil sebagian (non-destruktif).
• concat(...arrays) — gabungkan (non-destruktif).
• indexOf(value) — cari indeks (primitif).
• includes(value) — cek ada/tidak (primitif).
• reverse() — balik urutan (mutasi).
• sort([compareFn]) — urutkan (mutasi), berikan compareFn untuk angka atau kriteria custom.

Catatan Penting

• Pilih method mutasi (push, splice, dll.) jika ingin mengubah array yang sama.
• Pilih cara non-mutasi (slice, concat, map, filter) jika ingin menjaga immutability (berguna untuk state management di framework seperti React.

Perulangan, Array Multidimensi, dan Array of Objects

Pada bagian ini, kita akan membahas bagaimana cara melakukan perulangan pada array, cara bekerja dengan array multidimensi, serta bagaimana mengelola array of objects yang sangat sering dipakai dalam aplikasi JavaScript modern. Pembahasan dibuat runtut dan penuh contoh agar mudah dipahami.

Perulangan Array di JavaScript

Perulangan sangat penting karena array biasanya berisi banyak data, dan kita perlu cara yang efisien untuk membaca atau memproses setiap elemennya.

Berikut beberapa teknik perulangan array yang paling umum:

1. Perulangan Menggunakan for (Dasar dan Universal)

for adalah cara paling klasik dan fleksibel.

let angka = [10, 20, 30, 40];

for (let i = 0; i < angka.length; i++) {
    console.log("Index:", i, "Nilai:", angka[i]);
}Code language: JavaScript (javascript)

Kelebihan:

• Bebas dan fleksibel
• Bisa mengakses index dengan jelas
• Cocok untuk operasi kompleks

Kekurangan:

• Lebih panjang penulisannya dibanding method modern

2. Perulangan Menggunakan for…of (Lebih Sederhana)

for…of digunakan untuk mengambil nilai setiap elemen array.

let warna = ["merah", "biru", "hijau"];

for (let w of warna) {
    console.log(w);
}Code language: JavaScript (javascript)

Kelebihan:

• Lebih rapi dan singkat
• Tidak perlu memikirkan indeks

Kekurangan:

• Tidak cocok jika butuh index (harus pakai entries())

3. Perulangan Menggunakan forEach() (Cara Modern & Praktis)

Metode ini sangat populer di JavaScript modern.

let nama = ["Budi", "Sinta", "Rahman"];

nama.forEach(function(item, index) {
    console.log(index, item);
});Code language: JavaScript (javascript)

Parameter forEach:

• item — nilai dari elemen
• index — posisi elemen
• array — array asli

Kelebihan:

• Sangat mudah dibaca
• Cocok untuk operasi sederhana dan menampilkan data

Catatan: forEach tidak bisa dihentikan dengan break atau return seperti for.

Array Multidimensi (Array Bertingkat)

Array multidimensi adalah array yang berisi array lain. Biasanya digunakan untuk:

• Menyimpan tabel data
• Matriks angka
• Grid (misal untuk game)

Contoh Array 2 Dimensi

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[0]); // [1,2,3]
console.log(matrix[1][2]); // 6Code language: JavaScript (javascript)

Cara Mengakses Array Bertingkat

Untuk mengambil nilai tertentu:

• Gunakan array[level1][level2]
• Level pertama = baris
• Level kedua = kolom

Contoh perulangan array 2 dimensi:

for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
        console.log("Row:", i, "Col:", j, "Value:", matrix[i][j]);
    }
}Code language: JavaScript (javascript)

Array 3 Dimensi (Lebih Dalam)

let data3D = [
    [
        [1, 2], 
        [3, 4]
    ],
    [
        [5, 6], 
        [7, 8]
    ]
];

console.log(data3D[1][0][1]); // 6Code language: JavaScript (javascript)

Pemakaian nyata jarang, biasanya untuk data grafis atau game.

Array of Objects (Sangat Umum dalam Aplikasi Web)

Array of objects adalah struktur data yang paling sering digunakan dalam JavaScript modern, termasuk untuk UI, API, dan database simulasi.

Contoh array of objects:

let produk = [
    { id: 1, nama: "Laptop", harga: 15000000 },
    { id: 2, nama: "Mouse", harga: 200000 },
    { id: 3, nama: "Keyboard", harga: 350000 }
];Code language: JavaScript (javascript)

Mengakses satu elemen:

console.log(produk[1].nama); // MouseCode language: JavaScript (javascript)

Perulangan Array of Objects

Sangat cocok menggunakan forEach():

produk.forEach(function(item) {
    console.log(item.id, item.nama, item.harga);
});Code language: JavaScript (javascript)

Atau for…of:

for (let p of produk) {
    console.log(p.nama);
}Code language: JavaScript (javascript)

Studi Kasus: Menampilkan Data Produk

Misalkan kita ingin menampilkan daftar produk ke layar (console):

let produk = [
    { id: 1, nama: "Laptop Gaming", harga: 14000000, stok: 5 },
    { id: 2, nama: "Headset", harga: 500000, stok: 0 },
    { id: 3, nama: "Mouse Wireless", harga: 250000, stok: 12 }
];

produk.forEach(function(p) {
    console.log(
        "ID:", p.id,
        "Nama:", p.nama,
        "Harga:", p.harga,
        "Stok:", p.stok > 0 ? "Tersedia" : "Habis"
    );
});Code language: JavaScript (javascript)

Contoh tampilan:

ID: 1 Nama: Laptop Gaming Harga: 14000000 Stok: Tersedia
ID: 2 Nama: Headset Harga: 500000 Stok: Habis
ID: 3 Nama: Mouse Wireless Harga: 250000 Stok: TersediaCode language: HTTP (http)

Transformasi Data Sederhana Menggunakan Map, Filter, Reduce

Meskipun belum kita bahas di bagian sebelumnya, tiga method ini sangat penting untuk transformasi data.

Contoh data array:

let produk = [
    { id: 1, nama: "Laptop Gaming", harga: 14000000, stok: 5 },
    { id: 2, nama: "Headset", harga: 500000, stok: 0 },
    { id: 3, nama: "Mouse Wireless", harga: 250000, stok: 12 }
];Code language: JavaScript (javascript)

map() — Membuat array baru dari array lama

Contoh: ambil hanya nama produk.

let namaProduk = produk.map(function(p) {
    return p.nama;
});

console.log(namaProduk);Code language: JavaScript (javascript)

Output:

["Laptop Gaming", "Headset", "Mouse Wireless"]Code language: JSON / JSON with Comments (json)

filter() — Menyaring data berdasarkan kondisi

Contoh: hanya ambil produk yang stoknya masih ada.

let tersedia = produk.filter(function(p) {
    return p.stok > 0;
});

console.log(tersedia);Code language: JavaScript (javascript)

Output:

[
    { id: 1, nama: "Laptop Gaming", harga: 14000000, stok: 5 },
    { id: 3, nama: "Mouse Wireless", harga: 250000, stok: 12 }
]Code language: JavaScript (javascript)

reduce() — Menghitung total atau menggabungkan data

Contoh: hitung total harga semua produk.

let totalHarga = produk.reduce(function(acc, p) {
    return acc + p.harga;
}, 0);

console.log(totalHarga); // 16750000Code language: JavaScript (javascript)

Output:

16750000

Kesimpulan

Demikian tutorial ini, setelah pembahasan panjang mengenai Array JavaScript, penulis berharap kamu sudah memahami bagaimana cara menggunakan array dalam JavaScript. Meskipun pada akhirnya di dunia nyata array sering digunakan untuk menyimpan data yang kompleks seperti array of objects yang sering kali digunakan untuk pertukaran data antar server dan client dalam format JSON.

Selamat belajar, dan semoga bermanfaat.