K

Command Palette

Search for a command to run...

Daftar

Array & Metodenya di JS

Pelajari tentang Array di JavaScript untuk menyimpan kumpulan nilai, cara mengakses elemennya berdasarkan indeks, dan berbagai metode array yang berguna untuk manipulasi data.

Array di JavaScript: Satu Wadah Buat Nampung Banyak Data!

Udah bisa nyimpen satu nilai pake variabel? Keren! Tapi, gimana kalau kita punya banyak nilai yang sejenis atau berhubungan dan pengen disimpen barengan? Misalnya, daftar nama siswa, daftar harga barang, atau daftar skor game. Masa iya kita bikin variabel satu-satu buat tiap item? Repot banget!

Nah, di sinilah Array datang menyelamatkan! Array di JavaScript itu kayak "lemari" atau "rak buku" yang punya banyak "laci" atau "slot", di mana tiap laci bisa kita isi sama satu nilai. Jadi, satu variabel array bisa nampung banyak nilai sekaligus!

Apa Itu Array?

Secara sederhana, Array adalah tipe data terstruktur yang dipake buat nyimpen kumpulan nilai (elemen) secara berurutan. Tiap elemen di dalem array punya indeks (posisi) numerik yang dimulai dari 0 (nol).

  • Array di JavaScript itu dinamis: ukurannya bisa berubah (nambah atau kurang elemen).
  • Array di JavaScript juga bisa nyimpen tipe data yang beda-beda di dalem satu array yang sama (meskipun biasanya lebih baik nyimpen tipe data yang sejenis biar lebih teratur).

Cara Bikin Array (Array Literal)

Cara paling umum dan gampang buat bikin array adalah pake array literal, yaitu pake kurung siku [ ] dan ngisi elemen-elemennya dipisah koma.

javascript
// Array kosong
let namaKosong = [];
console.log(namaKosong); // Output: []
 
// Array berisi string (nama buah)
let buahBuahan = ["Apel", "Jeruk", "Mangga", "Pisang"];
console.log(buahBuahan); // Output: ["Apel", "Jeruk", "Mangga", "Pisang"]
 
// Array berisi angka (skor)
let skorGame = [100, 85, 92, 78];
console.log(skorGame); // Output: [100, 85, 92, 78]
 
// Array berisi tipe data campuran (gak terlalu disarankan tapi bisa)
let dataCampuran = ["Budi", 25, true, null];
console.log(dataCampuran); // Output: ["Budi", 25, true, null]
 
// Array di dalem array (array multi-dimensi)
let matriks = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
console.log(matriks[0][1]); // Output: 2 (baris 0, kolom 1)

Mengakses Elemen Array Pake Indeks

Tiap elemen di array punya alamat unik yang disebut indeks. Indeks ini selalu dimulai dari 0 buat elemen pertama, 1 buat elemen kedua, dan seterusnya.

Kamu bisa ngakses nilai elemen array pake nama variabel array diikuti kurung siku [] yang diisi sama nomor indeksnya.

javascript
let namaHari = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu", "Minggu"];
 
console.log(namaHari[0]); // Output: Senin (elemen pertama, indeks 0)
console.log(namaHari[2]); // Output: Rabu (elemen ketiga, indeks 2)
console.log(namaHari[6]); // Output: Minggu (elemen terakhir)
 
// Mengakses indeks yang gak ada bakal ngasilin undefined
console.log(namaHari[10]); // Output: undefined

Mengubah Nilai Elemen Array

Kamu juga bisa ngubah nilai elemen array yang udah ada dengan cara ngasih nilai baru ke indeks tertentu.

javascript
let warnaFavorit = ["merah", "biru", "hijau"];
console.log("Warna awal:", warnaFavorit); // Output: Warna awal: ["merah", "biru", "hijau"]
 
warnaFavorit[1] = "kuning"; // Ubah elemen di indeks 1 (yang tadinya "biru") jadi "kuning"
console.log("Warna setelah diubah:", warnaFavorit); // Output: Warna setelah diubah: ["merah", "kuning", "hijau"]

Properti Array: length

Sama kayak string, array juga punya properti length yang ngasih tau kita jumlah elemen di dalem array itu.

javascript
let playlistLagu = ["Lagu A", "Lagu B", "Lagu C", "Lagu D"];
console.log(playlistLagu.length); // Output: 4
 
let dataKosong = [];
console.log(dataKosong.length); // Output: 0

Properti length ini berguna banget, misalnya buat ngelooping semua elemen array atau buat ngakses elemen terakhir (array[array.length - 1]).

Metode-Metode Array yang Super Berguna

JavaScript ngasih banyak banget metode (fungsi bawaan) buat ngoprek array. Ini beberapa yang paling sering dipake:

1. Nambahin dan Ngapus Elemen:

  • push(elemen1, elemen2, ...): Nambahin satu atau lebih elemen di akhir array. Metode ini ngubah array aslinya dan ngembaliin panjang array baru.
    javascript
    let angka = [1, 2, 3];
    angka.push(4, 5);
    console.log(angka); // Output: [1, 2, 3, 4, 5]
  • pop(): Ngapus elemen terakhir dari array. Metode ini ngubah array aslinya dan ngembaliin elemen yang dihapus.
    javascript
    let huruf = ['a', 'b', 'c'];
    let hurufDihapus = huruf.pop();
    console.log(huruf);         // Output: ['a', 'b']
    console.log(hurufDihapus);  // Output: c
  • unshift(elemen1, elemen2, ...): Nambahin satu atau lebih elemen di awal array. Metode ini ngubah array aslinya dan ngembaliin panjang array baru.
    javascript
    let angkaLagi = [10, 20];
    angkaLagi.unshift(0, 5);
    console.log(angkaLagi); // Output: [0, 5, 10, 20]
  • shift(): Ngapus elemen pertama dari array. Metode ini ngubah array aslinya dan ngembaliin elemen yang dihapus.
    javascript
    let namaNama = ["Adi", "Beni", "Cici"];
    let namaPertama = namaNama.shift();
    console.log(namaNama);    // Output: ["Beni", "Cici"]
    console.log(namaPertama); // Output: Adi

2. Ngambil Sebagian Array (Sub-array):

  • slice(startIndex, endIndex): Ngembaliin array baru yang isinya potongan dari array asli, mulai dari startIndex sampe sebelum endIndex. endIndex opsional (kalau gak ada, diambil sampe akhir). Array asli gak berubah. Bisa pake indeks negatif.
    javascript
    let angkaBanyak = [0, 1, 2, 3, 4, 5, 6];
    let potongan1 = angkaBanyak.slice(2, 5); // Dari indeks 2 sampe sebelum 5
    console.log(potongan1);      // Output: [2, 3, 4]
    let potongan2 = angkaBanyak.slice(3);    // Dari indeks 3 sampe akhir
    console.log(potongan2);      // Output: [3, 4, 5, 6]
    console.log(angkaBanyak);    // Output: [0, 1, 2, 3, 4, 5, 6] (array asli gak berubah)

3. Nambahin/Ngapus Elemen di Tengah Pake splice():

  • splice(startIndex, jumlahHapus, item1, item2, ...): Ini metode yang super powerful buat ngubah array.
    • startIndex: Indeks tempat mulai ngubah.
    • jumlahHapus: Berapa banyak elemen yang mau dihapus dari startIndex.
    • item1, item2, ... (Opsional): Elemen-elemen baru yang mau ditambahin di posisi startIndex (setelah elemen yang dihapus).
    • Metode ini ngubah array aslinya dan ngembaliin array yang isinya elemen-elemen yang dihapus.
    javascript
    let bulan = ["Jan", "Mar", "Apr", "Jun"];
     
    // Nambahin "Feb" di indeks 1, tanpa ngapus apa-apa
    bulan.splice(1, 0, "Feb"); 
    console.log(bulan); // Output: ["Jan", "Feb", "Mar", "Apr", "Jun"]
     
    // Ngapus "Apr" (di indeks 3 sekarang)
    let bulanDihapus = bulan.splice(3, 1);
    console.log(bulan);        // Output: ["Jan", "Feb", "Mar", "Jun"]
    console.log(bulanDihapus); // Output: ["Apr"]
     
    // Ganti "Jun" (di indeks 3) dengan "Mei", "Jun"
    bulan.splice(3, 1, "Mei", "Jun");
    console.log(bulan); // Output: ["Jan", "Feb", "Mar", "Mei", "Jun"]

4. Nyari Elemen di Array:

  • indexOf(itemCari, startIndex): Nyari itemCari di array, ngembaliin indeks pertama kemunculannya. Kalau gak ketemu, hasilnya -1. startIndex opsional.
  • lastIndexOf(itemCari, startIndex): Mirip indexOf, tapi nyarinya dari belakang.
  • includes(itemCari, startIndex): (ES7) Ngecek apakah array mengandung itemCari. Ngembaliin true atau false. Lebih gampang dibaca daripada indexOf() !== -1.
    javascript
    let hewan = ["kucing", "anjing", "burung", "kucing"];
    console.log(hewan.indexOf("anjing"));  // Output: 1
    console.log(hewan.indexOf("kucing"));  // Output: 0 (kemunculan pertama)
    console.log(hewan.lastIndexOf("kucing"));// Output: 3 (kemunculan terakhir)
    console.log(hewan.includes("ikan"));   // Output: false

5. Gabungin Array Jadi String:

  • join(separator): Gabungin semua elemen array jadi satu string. separator (opsional) adalah string yang dipake buat misahin antar elemen. Kalau gak ada separator, defaultnya pake koma (,).
    javascript
    let kataKata = ["Belajar", "JavaScript", "itu", "seru"];
    console.log(kataKata.join(" ")); // Output: Belajar JavaScript itu seru
    console.log(kataKata.join("-")); // Output: Belajar-JavaScript-itu-seru
    console.log(kataKata.join());    // Output: Belajar,JavaScript,itu,seru

6. Gabungin Dua Array atau Lebih:

  • concat(array2, array3, ...): Gabungin array saat ini dengan satu atau lebih array lain (atau nilai lain). Ngembaliin array baru, array asli gak berubah.
    javascript
    let angka1 = [1, 2];
    let angka2 = [3, 4];
    let hurufA = ['a', 'b'];
    let gabungan = angka1.concat(angka2, hurufA, 5);
    console.log(gabungan); // Output: [1, 2, 3, 4, "a", "b", 5]
    console.log(angka1);   // Output: [1, 2] (array asli gak berubah)
    Di JavaScript modern (ES6+), sering juga dipake Spread Operator (...) buat gabungin array, yang kadang lebih ringkes: let gabunganPakeSpread = [...angka1, ...angka2, ...hurufA, 5];

Metode Iterasi Array (PENTING! Tapi Mungkin Lebih Detail di Materi Looping/Fungsi Lanjutan)

JavaScript punya banyak metode keren buat ngelakuin operasi ke tiap elemen array tanpa perlu nulis for loop manual. Ini beberapa yang paling penting (kita sentuh sedikit aja di sini, detailnya bisa di materi fungsi atau ES6):

  • forEach(fungsiCallback): Ngejalanin fungsiCallback sekali buat tiap elemen array.
  • map(fungsiCallback): Bikin array baru yang isinya hasil dari fungsiCallback yang diterapin ke tiap elemen array asli.
  • filter(fungsiCallback): Bikin array baru yang isinya cuma elemen-elemen dari array asli yang "lulus tes" (fungsi callback-nya ngembaliin true).
  • find(fungsiCallback): Ngembaliin elemen pertama di array yang "lulus tes".
  • findIndex(fungsiCallback): Ngembaliin indeks elemen pertama di array yang "lulus tes".
  • reduce(fungsiCallback, nilaiAwal): "Ngereduksi" array jadi satu nilai tunggal (misal, jumlahin semua angka, atau gabungin semua string).
  • some(fungsiCallback): Ngecek apakah minimal ada satu elemen di array yang "lulus tes". Ngembaliin true atau false.
  • every(fungsiCallback): Ngecek apakah semua elemen di array "lulus tes". Ngembaliin true atau false.

Ini contoh super singkat map dan filter (jangan khawatir kalau belum ngerti => atau fungsi anonimnya sekarang ya):

javascript
let angkaAsli = [1, 2, 3, 4, 5];
 
// Pake map buat ngaliin tiap angka sama 2
let angkaKaliDua = angkaAsli.map(function(angka) {
    return angka * 2;
});
// atau pake arrow function: let angkaKaliDua = angkaAsli.map(angka => angka * 2);
console.log(angkaKaliDua); // Output: [2, 4, 6, 8, 10]
 
// Pake filter buat ngambil angka yang genap aja
let angkaGenap = angkaAsli.filter(function(angka) {
    return angka % 2 === 0;
});
// atau pake arrow function: let angkaGenap = angkaAsli.filter(angka => angka % 2 === 0);
console.log(angkaGenap); // Output: [2, 4]

Metode-metode iterasi ini super powerful dan bikin kode jadi lebih ringkes dan gampang dibaca dibanding for loop manual buat banyak kasus.


Array ini bener-bener "alat multifungsi" di JavaScript. Kamu bakal pake array terus-terusan buat nyimpen dan ngolah data. Pahami cara bikinnya, ngakses elemennya, dan biasain diri sama beberapa metode array yang paling umum (push, pop, slice, splice, indexOf, includes, join, dan metode iterasi kayak map & filter).

Dengan string dan angka yang udah kita pelajari, ditambah array ini, kamu udah punya "bahan baku" yang cukup buat mulai ngebangun logika program yang lebih menarik!


Kuis Array dan Metodenya di JavaScript

Pertanyaan 1 dari 5

Bagaimana cara yang paling umum untuk membuat sebuah array kosong di JavaScript?