Kuasai Array JavaScript: Panduan Lengkap Pembuatan & Manipulasi

Array adalah salah satu struktur data paling fundamental dan serbaguna dalam JavaScript. Memahami cara bekerja dengan array secara efektif akan memberdayakan Anda untuk mengelola koleksi data dengan efisien, baik itu daftar pengguna, katalog produk, atau data sensor. Artikel ini akan membawa Anda dari dasar-dasar pembuatan array hingga teknik manipulasi data tingkat lanjut, lengkap dengan contoh kode dan tips praktis yang jarang diketahui.

Apa itu Array di JavaScript?

Array adalah objek khusus yang memungkinkan Anda menyimpan kumpulan nilai dalam satu variabel. Nilai-nilai ini dapat berupa tipe data apa pun, termasuk angka, string, objek, atau bahkan array lain (array bersarang). Setiap elemen dalam array memiliki indeks numerik, dimulai dari 0, yang digunakan untuk mengaksesnya.

1. Membuat Array

Ada beberapa cara untuk membuat array di JavaScript:

• Menggunakan Literal Array ([]): Ini adalah cara yang paling umum dan disukai.

  // Array kosong
  let kosong = [];
  
  // Array dengan nilai awal
  let angka = [1, 2, 3, 4, 5];
  let nama = ["Alice", "Bob", "Charlie"];
  let campuran = [10, "Hello", true, { id: 1 }];
  

• Menggunakan Konstruktor Array(): Meskipun fungsional, cara ini seringkali kurang intuitif dan bisa menimbulkan kebingungan jika hanya memberikan satu argumen numerik (yang akan diinterpretasikan sebagai panjang array, bukan elemen).

  // Membuat array dengan panjang 5 (semua elemen undefined)
  let arrayPanjang = new Array(5);
  
  // Membuat array dengan elemen spesifik
  let buah = new Array("Apel", "Pisang", "Mangga");
  

  Tips Praktis: Hindari menggunakan new Array() dengan satu argumen numerik. Lebih baik gunakan literal array [] untuk membuat array kosong dan tambahkan elemen kemudian, atau gunakan Array.from() untuk kasus yang lebih spesifik.

2. Mengakses Elemen Array

Elemen array diakses menggunakan indeks numeriknya. Ingat, indeks dimulai dari 0.

• Mengakses Elemen Tunggal:

  let warna = ["Merah", "Hijau", "Biru"];
  console.log(warna[0]); // Output: Merah
  console.log(warna[1]); // Output: Hijau
  console.log(warna[2]); // Output: Biru
  

• Mengakses Elemen dari Belakang: Anda dapat menggunakan indeks negatif untuk mengakses elemen dari akhir array. -1 merujuk pada elemen terakhir, -2 pada elemen kedua terakhir, dan seterusnya.

  let hewan = ["Kucing", "Anjing", "Burung"];
  console.log(hewan[hewan.length - 1]); // Cara tradisional untuk elemen terakhir
  console.log(hewan.at(-1));          // Cara modern (ES2022) untuk elemen terakhir
  console.log(hewan.at(-2));          // Cara modern untuk elemen kedua terakhir
  

  Tips Praktis: Metode at() adalah cara yang lebih ringkas dan mudah dibaca untuk mengakses elemen dari akhir array dibandingkan array[array.length - 1].

• Mengakses Elemen yang Tidak Ada: Jika Anda mencoba mengakses indeks yang berada di luar batas array, hasilnya akan undefined.

  let kota = ["Jakarta", "Bandung"];
  console.log(kota[2]); // Output: undefined
  

3. Memanipulasi Data Array

JavaScript menyediakan berbagai metode bawaan yang kuat untuk memanipulasi array. Mari kita jelajahi beberapa yang paling umum dan berguna.

3.1. Menambah dan Menghapus Elemen

• push(): Menambah satu atau lebih elemen ke akhir array. Mengembalikan panjang array baru.

  let tugas = ["Belajar JS", "Baca buku"];
  tugas.push("Olahraga");
  console.log(tugas); // Output: ["Belajar JS", "Baca buku", "Olahraga"]
  

• pop(): Menghapus elemen terakhir dari array. Mengembalikan elemen yang dihapus.

  let tugas = ["Belajar JS", "Baca buku", "Olahraga"];
  let tugasTerakhir = tugas.pop();
  console.log(tugas);         // Output: ["Belajar JS", "Baca buku"]
  console.log(tugasTerakhir); // Output: Olahraga
  

• unshift(): Menambah satu atau lebih elemen ke awal array. Mengembalikan panjang array baru.

  let antrian = ["A", "B"];
  antrian.unshift("Z");
  console.log(antrian); // Output: ["Z", "A", "B"]
  

• shift(): Menghapus elemen pertama dari array. Mengembalikan elemen yang dihapus.

  let antrian = ["Z", "A", "B"];
  let pertamaKeluar = antrian.shift();
  console.log(antrian);     // Output: ["A", "B"]
  console.log(pertamaKeluar); // Output: Z
  

• splice(): Metode yang sangat fleksibel untuk menambah, menghapus, atau mengganti elemen pada posisi tertentu.

  • array.splice(startIndex, deleteCount, item1, item2, ...)
  • startIndex: Indeks tempat memulai perubahan.
  • deleteCount: Jumlah elemen yang akan dihapus (opsional, default 0).
  • item1, item2, ...: Elemen yang akan ditambahkan ke array (opsional).

  let daftarAngka = [1, 2, 3, 4, 5];
  
  // Menghapus 2 elemen mulai dari indeks 2
  let dihapus = daftarAngka.splice(2, 2);
  console.log(daftarAngka); // Output: [1, 2, 5]
  console.log(dihapus);     // Output: [3, 4]
  
  // Menghapus 1 elemen pada indeks 1 dan menambahkan 'a', 'b'
  let daftarHuruf = ['x', 'y', 'z'];
  let diganti = daftarHuruf.splice(1, 1, 'a', 'b');
  console.log(daftarHuruf); // Output: ['x', 'a', 'b', 'z']
  console.log(diganti);     // Output: ['y']
  
  // Menambahkan elemen tanpa menghapus
  let tim = ["Adi", "Budi"];
  tim.splice(1, 0, "Citra"); // Tambah Citra di indeks 1
  console.log(tim);        // Output: ["Adi", "Citra", "Budi"]
  

  Tips Praktis: splice() mengembalikan array elemen yang dihapus. Ini bisa sangat berguna jika Anda perlu memproses elemen yang baru saja dihapus.

3.2. Menggabungkan dan Memotong Array

• concat(): Menggabungkan dua atau lebih array menjadi array baru.

  let bagian1 = [1, 2];
  let bagian2 = [3, 4];
  let gabungan = bagian1.concat(bagian2, [5, 6]);
  console.log(gabungan); // Output: [1, 2, 3, 4, 5, 6]
  

  Tips Praktis: concat() tidak mengubah array asli, melainkan mengembalikan array baru.

• slice(): Mengembalikan bagian (salinan dangkal) dari array menjadi array baru. Metode ini tidak mengubah array asli.

  • array.slice(startIndex, endIndex)
  • startIndex: Indeks awal (inklusif).
  • endIndex: Indeks akhir (eksklusif).

  let angkaUtama = [10, 20, 30, 40, 50];
  
  // Mengambil elemen dari indeks 1 hingga sebelum indeks 4
  let subArray = angkaUtama.slice(1, 4);
  console.log(subArray);     // Output: [20, 30, 40]
  console.log(angkaUtama); // Output: [10, 20, 30, 40, 50] (tidak berubah)
  
  // Mengambil dari indeks 2 hingga akhir
  let sisa = angkaUtama.slice(2);
  console.log(sisa); // Output: [30, 40, 50]
  
  // Mengambil elemen terakhir
  let terakhir = angkaUtama.slice(-1);
  console.log(terakhir); // Output: [50]
  

  Tips Praktis: slice() sangat berguna untuk membuat salinan array atau untuk mengekstrak bagian-bagian dari array tanpa memodifikasi aslinya.

3.3. Iterasi dan Transformasi Array

Metode-metode ini sangat penting untuk memproses setiap elemen dalam array dan mengubahnya.

• forEach(): Menjalankan fungsi tertentu untuk setiap elemen dalam array. Tidak mengembalikan nilai.

  let daftarBelanja = ["Apel", "Roti", "Susu"];
  daftarBelanja.forEach(function(item, index) {
    console.log(`Item ke-${index + 1}: ${item}`);
  });
  // Output:
  // Item ke-1: Apel
  // Item ke-2: Roti
  // Item ke-3: Susu
  

• map(): Membuat array baru dengan hasil memanggil fungsi yang disediakan pada setiap elemen dalam array asli. Sangat baik untuk transformasi data.

  let harga = [1000, 2000, 5000];
  let hargaDiskon = harga.map(function(hargaSatuan) {
    return hargaSatuan * 0.9; // Diskon 10%
  });
  console.log(hargaDiskon); // Output: [900, 1800, 4500]
  

  Tips Praktis: Gunakan map() ketika Anda perlu mengubah setiap elemen dalam array menjadi sesuatu yang baru dan mendapatkan array hasil yang berukuran sama dengan array asli.

• filter(): Membuat array baru yang berisi semua elemen yang lolos pengujian yang diimplementasikan oleh fungsi yang disediakan.

  let produk = [
    { nama: "Buku", harga: 15000, stok: 10 },
    { nama: "Pensil", harga: 2000, stok: 50 },
    { nama: "Penghapus", harga: 1000, stok: 0 },
    { nama: "Penggaris", harga: 3000, stok: 25 }
  ];
  
  let produkTersedia = produk.filter(function(item) {
    return item.stok > 0;
  });
  console.log(produkTersedia);
  // Output:
  // [
  //   { nama: "Buku", harga: 15000, stok: 10 },
  //   { nama: "Pensil", harga: 2000, stok: 50 },
  //   { nama: "Penggaris", harga: 3000, stok: 25 }
  // ]
  

  Tips Praktis: Gunakan filter() untuk memilih elemen dari array yang memenuhi kriteria tertentu.

• reduce(): Mengeksekusi fungsi "reducer" yang Anda berikan pada setiap elemen array, menghasilkan satu nilai keluaran tunggal.

  let nilaiUjian = [85, 90, 78, 92, 88];
  
  // Menghitung total nilai
  let totalNilai = nilaiUjian.reduce(function(akumulator, nilaiSaatIni) {
    return akumulator + nilaiSaatIni;
  }, 0); // 0 adalah nilai awal akumulator
  console.log(totalNilai); // Output: 443
  
  // Menghitung rata-rata nilai
  let rataRataNilai = nilaiUjian.reduce((akumulator, nilaiSaatIni, index, array) => {
    akumulator += nilaiSaatIni;
    if (index === array.length - 1) {
      return akumulator / array.length;
    }
    return akumulator;
  }, 0);
  console.log(rataRataNilai); // Output: 88.6
  

  Tips Praktis: reduce() sangat kuat untuk meringkas data, menghitung agregat, atau mengubah array menjadi struktur data yang berbeda.

• some(): Menguji apakah setidaknya satu elemen dalam array lolos pengujian yang diimplementasikan oleh fungsi yang disediakan. Mengembalikan true atau false.

  let angka = [1, 3, 5, 7, 9];
  let adaAngkaGenap = angka.some(function(num) {
    return num % 2 === 0;
  });
  console.log(adaAngkaGenap); // Output: false
  

• every(): Menguji apakah semua elemen dalam array lolos pengujian yang diimplementasikan oleh fungsi yang disediakan. Mengembalikan true atau false.

  let angka = [2, 4, 6, 8, 10];
  let semuaGenap = angka.every(function(num) {
    return num % 2 === 0;
  });
  console.log(semuaGenap); // Output: true
  

3.4. Mencari Elemen

• indexOf(): Mengembalikan indeks kemunculan pertama dari elemen yang dicari dalam array, atau -1 jika tidak ditemukan.

  let buah = ["Apel", "Pisang", "Mangga", "Pisang"];
  console.log(buah.indexOf("Mangga")); // Output: 2
  console.log(buah.indexOf("Jeruk"));  // Output: -1
  console.log(buah.indexOf("Pisang")); // Output: 1 (hanya kemunculan pertama)
  

• lastIndexOf(): Mengembalikan indeks kemunculan terakhir dari elemen yang dicari dalam array, atau -1 jika tidak ditemukan.

  let buah = ["Apel", "Pisang", "Mangga", "Pisang"];
  console.log(buah.lastIndexOf("Pisang")); // Output: 3
  

• find(): Mengembalikan nilai dari elemen pertama dalam array yang memenuhi fungsi pengujian yang disediakan. Jika tidak ada elemen yang memenuhi, mengembalikan undefined.

  let pengguna = [
    { id: 1, nama: "Alice" },
    { id: 2, nama: "Bob" },
    { id: 3, nama: "Charlie" }
  ];
  let penggunaDitemukan = pengguna.find(function(user) {
    return user.id === 2;
  });
  console.log(penggunaDitemukan); // Output: { id: 2, nama: "Bob" }
  

• findIndex(): Mengembalikan indeks dari elemen pertama dalam array yang memenuhi fungsi pengujian yang disediakan. Jika tidak ada elemen yang memenuhi, mengembalikan -1.

  let pengguna = [
    { id: 1, nama: "Alice" },
    { id: 2, nama: "Bob" },
    { id: 3, nama: "Charlie" }
  ];
  let indexPengguna = pengguna.findIndex(function(user) {
    return user.nama === "Charlie";
  });
  console.log(indexPengguna); // Output: 2
  

3.5. Mengurutkan Array

• sort(): Mengurutkan elemen array secara langsung (memodifikasi array asli). Secara default, mengurutkan elemen sebagai string. Untuk mengurutkan angka atau objek, Anda perlu menyediakan fungsi pembanding.

  let abjad = ["C", "A", "B"];
  abjad.sort();
  console.log(abjad); // Output: ["A", "B", "C"]
  
  let angka = [10, 5, 20, 1];
  // Mengurutkan secara menaik (ascending)
  angka.sort(function(a, b) {
    return a - b;
  });
  console.log(angka); // Output: [1, 5, 10, 20]
  
  // Mengurutkan secara menurun (descending)
  angka.sort(function(a, b) {
    return b - a;
  });
  console.log(angka); // Output: [20, 10, 5, 1]
  
  let produk = [
    { nama: "Pensil", harga: 2000 },
    { nama: "Buku", harga: 15000 },
    { nama: "Penggaris", harga: 3000 }
  ];
  // Mengurutkan berdasarkan harga
  produk.sort((a, b) => a.harga - b.harga);
  console.log(produk);
  // Output:
  // [
  //   { nama: "Pensil", harga: 2000 },
  //   { nama: "Penggaris", harga: 3000 },
  //   { nama: "Buku", harga: 15000 }
  // ]
  

  Tips Praktis: Selalu sediakan fungsi pembanding untuk sort() jika Anda bekerja dengan angka atau objek, agar urutannya sesuai harapan. Fungsi pembanding harus mengembalikan:

  • Nilai negatif jika a harus datang sebelum b.
  • Nilai positif jika a harus datang setelah b.
  • Nol jika urutan a dan b tidak masalah (mereka dianggap sama untuk pengurutan).

• reverse(): Membalikkan urutan elemen dalam array secara langsung (memodifikasi array asli).

  let angka = [1, 2, 3, 4, 5];
  angka.reverse();
  console.log(angka); // Output: [5, 4, 3, 2, 1]
  

3.6. Menggabungkan Array Menjadi String

• join(): Menggabungkan semua elemen array menjadi sebuah string. Anda dapat menentukan pemisah antar elemen.

  let kata = ["JavaScript", "itu", "menyenangkan"];
  console.log(kata.join());       // Output: "JavaScript,itu,menyenangkan" (default pemisah koma)
  console.log(kata.join(" "));    // Output: "JavaScript itu menyenangkan"
  console.log(kata.join("-"));    // Output: "JavaScript-itu-menyenangkan"
  

4. Array Bersarang (Nested Arrays)

Array dapat berisi elemen lain, termasuk array itu sendiri. Ini memungkinkan Anda membuat struktur data multidimensional.

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

// Mengakses elemen di baris kedua, kolom ketiga
console.log(matriks[1][2]); // Output: 6

// Iterasi melalui array bersarang
for (let i = 0; i < matriks.length; i++) {
  for (let j = 0; j < matriks[i].length; j++) {
    console.log(`Elemen pada [${i}][${j}]: ${matriks[i][j]}`);
  }
}

5. Praktik Terbaik dan Tips Lanjutan

• Gunakan Konstanta (const) untuk Array: Jika Anda tidak berencana untuk mengganti seluruh array dengan array baru, gunakan const. Ini tidak mencegah modifikasi elemen array, tetapi mencegah penugasan ulang variabel ke array yang sama sekali berbeda.

  const angkaAcak = [1, 2, 3];
  angkaAcak.push(4); // OK
  // angkaAcak = [5, 6]; // Error: Assignment to constant variable.
  

• Perhatikan Mutabilitas: Banyak metode array (seperti push, pop, splice, sort, reverse) memodifikasi array asli (mutasi). Metode lain (seperti map, filter, slice, concat) mengembalikan array baru tanpa mengubah array asli (imunitas). Pahami perbedaan ini untuk menghindari bug yang tidak terduga.

• Arrow Functions untuk Fungsi Callback: Gunakan sintaks arrow function (=>) yang ringkas untuk fungsi callback di metode array.

  const kuadrat = [1, 2, 3].map(x => x * x); // [1, 4, 9]
  const ganjil = [1, 2, 3, 4, 5].filter(n => n % 2 !== 0); // [1, 3, 5]
  

• Destructuring Assignment: Cara yang elegan untuk mengekstrak nilai dari array ke variabel terpisah.

  const koordinat = [10, 20];
  const [x, y] = koordinat;
  console.log(x); // 10
  console.log(y); // 20
  
  const warna = ["Merah", "Hijau", "Biru"];
  const [warnaUtama, ...warnaLain] = warna;
  console.log(warnaUtama); // Merah
  console.log(warnaLain);  // ["Hijau", "Biru"]
  

• Spread Syntax (...): Berguna untuk menyalin array, menggabungkan array, atau meneruskan elemen array sebagai argumen terpisah.

  const arr1 = [1, 2];
  const arr2 = [3, 4];
  const gabung = [...arr1, ...arr2]; // [1, 2, 3, 4]
  
  const salinan = [...arr1]; // [1, 2]
  

• Array.from(): Membuat instance Array baru dari objek yang dapat diiterasi atau mirip array. Berguna untuk mengubah NodeList (dari DOM) atau Set/Map menjadi array.

  const nodeList = document.querySelectorAll('div'); // Mengembalikan NodeList
  const divArray = Array.from(nodeList);
  
  const stringHuruf = 'abc';
  const hurufArray = Array.from(stringHuruf); // ['a', 'b', 'c']
  

• Array.of(): Membuat instance Array baru yang argumennya menjadi elemen array, terlepas dari jumlah argumen. Berguna untuk menghindari kebingungan dengan konstruktor Array() ketika hanya ada satu argumen numerik.

  const arr1 = Array.of(1);       // [1]
  const arr2 = Array.of(1, 2, 3); // [1, 2, 3]
  const arr3 = Array();           // [] (array kosong)
  const arr4 = new Array(1);      // [empty x 1] (array dengan panjang 1, elemen undefined)
  

Kesimpulan

Array adalah fondasi penting dalam pemrograman JavaScript. Dengan menguasai berbagai cara untuk membuat, mengakses, dan memanipulasi data di dalamnya, Anda akan siap untuk membangun aplikasi yang dinamis dan efisien. Mulai dari metode dasar seperti push dan pop hingga teknik transformasi yang kuat seperti map, filter, dan reduce, setiap metode memiliki peran uniknya. Teruslah berlatih, eksplorasi metode-metode baru, dan jangan ragu untuk bereksperimen untuk benar-benar menguasai kekuatan array di JavaScript.