MulaiCode
JavaScript

JS Arrays

Pelajari cara membuat dan menggunakan array di JavaScript dengan contoh praktis.

JavaScript Arrays untuk Pemula

Array di JavaScript adalah struktur data yang dapat menyimpan banyak nilai dalam satu variabel. Array sangat berguna untuk menyimpan daftar item seperti nama, angka, atau objek.

Mengapa Menggunakan Array? 🤔

Dibandingkan menggunakan variabel terpisah, array memungkinkan Anda:

  • Menyimpan banyak nilai dengan satu nama variabel
  • Mengakses nilai-nilai tersebut menggunakan indeks
  • Melakukan operasi pada semua nilai sekaligus menggunakan loop
  • Mengelola data yang berjumlah banyak dengan lebih efisien

1. Cara Membuat Array

Terdapat dua cara utama untuk membuat array di JavaScript:

// Cara 1: Menggunakan tanda kurung siku []
const buah = ["Apel", "Mangga", "Pisang", "Jeruk"];
 
// Cara 2: Menggunakan constructor Array()
const sayur = new Array("Bayam", "Wortel", "Brokoli");
 
// Menampilkan array
console.log(buah); // Output: ["Apel", "Mangga", "Pisang", "Jeruk"]
console.log(sayur); // Output: ["Bayam", "Wortel", "Brokoli"]

Penjelasan:

  • Cara pertama (kurung siku) adalah yang paling umum dan direkomendasikan
  • Array bisa menyimpan berbagai jenis nilai: string, angka, boolean, objek, bahkan array lain
  • Array di JavaScript dapat menyimpan jenis data berbeda dalam satu array

2. Mengakses Elemen Array

Elemen dalam array diakses menggunakan indeks. Penting: indeks array JavaScript dimulai dari 0.

const buah = ["Apel", "Mangga", "Pisang", "Jeruk"];
 
// Mengakses elemen pertama (indeks 0)
console.log(buah[0]); // Output: Apel
 
// Mengakses elemen ketiga (indeks 2)
console.log(buah[2]); // Output: Pisang
 
// Mengakses elemen terakhir
console.log(buah[buah.length - 1]); // Output: Jeruk

Penjelasan:

  • Indeks pertama adalah 0, bukan 1
  • Indeks kedua adalah 1, dan seterusnya
  • Untuk mendapatkan elemen terakhir, gunakan array.length - 1
  • Mencoba mengakses indeks yang tidak ada akan menghasilkan undefined

3. Mengubah Elemen Array

Anda dapat mengubah nilai elemen array dengan mengakses indeksnya:

const buah = ["Apel", "Mangga", "Pisang", "Jeruk"];
console.log("Sebelum diubah:", buah);
// Output: Sebelum diubah: ["Apel", "Mangga", "Pisang", "Jeruk"]
 
// Mengubah elemen kedua (indeks 1)
buah[1] = "Anggur";
console.log("Setelah diubah:", buah);
// Output: Setelah diubah: ["Apel", "Anggur", "Pisang", "Jeruk"]
 
// Menambah elemen baru dengan indeks
buah[4] = "Stroberi";
console.log("Setelah menambah:", buah);
// Output: Setelah menambah: ["Apel", "Anggur", "Pisang", "Jeruk", "Stroberi"]

Penjelasan:

  • Meskipun dideklarasikan dengan const, elemen dalam array masih bisa diubah
  • Yang tidak bisa diubah adalah referensi array itu sendiri (tidak bisa diassign array baru)
  • Anda bisa menambahkan elemen baru dengan menetapkan nilai ke indeks yang belum ada
  • Namun, ada cara yang lebih baik untuk menambah elemen yang akan kita pelajari selanjutnya

4. Properti dan Metode Array Penting

JavaScript memiliki banyak metode bawaan untuk bekerja dengan array:

const buah = ["Apel", "Mangga", "Pisang"];
 
// 1. length - menghitung jumlah elemen
console.log("Jumlah buah:", buah.length);
// Output: Jumlah buah: 3
 
// 2. push() - menambah elemen di akhir array
buah.push("Jeruk");
console.log("Setelah push:", buah);
// Output: Setelah push: ["Apel", "Mangga", "Pisang", "Jeruk"]
 
// 3. pop() - menghapus elemen terakhir dan mengembalikan nilainya
const buahDihapus = buah.pop();
console.log("Buah yang dihapus:", buahDihapus);
// Output: Buah yang dihapus: Jeruk
console.log("Setelah pop:", buah);
// Output: Setelah pop: ["Apel", "Mangga", "Pisang"]
 
// 4. unshift() - menambah elemen di awal array
buah.unshift("Semangka");
console.log("Setelah unshift:", buah);
// Output: Setelah unshift: ["Semangka", "Apel", "Mangga", "Pisang"]
 
// 5. shift() - menghapus elemen pertama dan mengembalikan nilainya
const buahPertama = buah.shift();
console.log("Buah yang dihapus dari awal:", buahPertama);
// Output: Buah yang dihapus dari awal: Semangka
console.log("Setelah shift:", buah);
// Output: Setelah shift: ["Apel", "Mangga", "Pisang"]

Penjelasan:

  • length: properti untuk mengetahui jumlah elemen dalam array
  • push(): menambah elemen di akhir array
  • pop(): menghapus dan mengembalikan elemen terakhir
  • unshift(): menambah elemen di awal array
  • shift(): menghapus dan mengembalikan elemen pertama

5. Metode Array untuk Pencarian dan Manipulasi

const angka = [10, 20, 30, 40, 50];
 
// 1. indexOf() - mencari indeks dari elemen
console.log("Indeks dari 30:", angka.indexOf(30));
// Output: Indeks dari 30: 2
console.log("Indeks dari 60:", angka.indexOf(60));
// Output: Indeks dari 60: -1 (tidak ditemukan)
 
// 2. includes() - mengecek apakah elemen ada
console.log("Apakah ada angka 40?", angka.includes(40));
// Output: Apakah ada angka 40? true
console.log("Apakah ada angka 60?", angka.includes(60));
// Output: Apakah ada angka 60? false
 
// 3. slice() - mengambil sebagian array (tidak mengubah array asli)
const sebagian = angka.slice(1, 4);
console.log("Slice dari indeks 1-3:", sebagian);
// Output: Slice dari indeks 1-3: [20, 30, 40]
console.log("Array asli tetap sama:", angka);
// Output: Array asli tetap sama: [10, 20, 30, 40, 50]
 
// 4. splice() - menghapus/menambah elemen (mengubah array asli)
// Menghapus 2 elemen dari indeks 1, lalu tambahkan 25, 35
angka.splice(1, 2, 25, 35);
console.log("Setelah splice:", angka);
// Output: Setelah splice: [10, 25, 35, 40, 50]

Penjelasan:

  • indexOf(): mencari indeks dari elemen, mengembalikan -1 jika tidak ditemukan
  • includes(): memeriksa apakah elemen ada dalam array, mengembalikan boolean
  • slice(): mengambil bagian dari array (tidak mengubah array asli)
  • splice(): menghapus dan/atau menambah elemen (mengubah array asli)

6. Loop pada Array

Ada beberapa cara untuk mengiterasi atau loop melalui array:

const buah = ["Apel", "Mangga", "Pisang", "Jeruk"];
 
// 1. Loop for tradisional
console.log("Loop for tradisional:");
for (let i = 0; i < buah.length; i++) {
  console.log(`Buah ${i + 1}: ${buah[i]}`);
}
// Output:
// Buah 1: Apel
// Buah 2: Mangga
// Buah 3: Pisang
// Buah 4: Jeruk
 
// 2. for...of loop (lebih modern dan rapi)
console.log("\nLoop for...of:");
for (const item of buah) {
  console.log(`Buah: ${item}`);
}
// Output:
// Buah: Apel
// Buah: Mangga
// Buah: Pisang
// Buah: Jeruk
 
// 3. forEach() method
console.log("\nLoop forEach:");
buah.forEach((item, index) => {
  console.log(`Buah ${index + 1}: ${item}`);
});
// Output:
// Buah 1: Apel
// Buah 2: Mangga
// Buah 3: Pisang
// Buah 4: Jeruk

Penjelasan:

  • Loop for tradisional: bagus ketika Anda memerlukan indeks
  • Loop for...of: lebih sederhana ketika Anda hanya memerlukan nilai
  • forEach(): metode khusus array yang juga memberikan akses ke indeks dan array

7. Transformasi Array dengan Map, Filter dan Reduce

Metode-metode ini sangat berguna untuk memproses data dalam array:

const angka = [1, 2, 3, 4, 5];
 
// 1. map() - membuat array baru dengan transformasi
const dikaliDua = angka.map((item) => item * 2);
console.log("Hasil map (kali 2):", dikaliDua);
// Output: Hasil map (kali 2): [2, 4, 6, 8, 10]
 
// 2. filter() - membuat array baru dengan elemen yang lulus kondisi
const angkaGenap = angka.filter((item) => item % 2 === 0);
console.log("Hasil filter (angka genap):", angkaGenap);
// Output: Hasil filter (angka genap): [2, 4]
 
// 3. reduce() - mereduksi array menjadi satu nilai
const total = angka.reduce((sum, item) => sum + item, 0);
console.log("Hasil reduce (jumlah):", total);
// Output: Hasil reduce (jumlah): 15

Penjelasan:

  • map(): membuat array baru dengan hasil pemanggilan fungsi pada setiap elemen
  • filter(): membuat array baru dengan elemen yang memenuhi kondisi
  • reduce(): mereduksi array menjadi satu nilai dengan menerapkan fungsi untuk setiap elemen

8. Array Multi-dimensi

Array juga bisa berisi array lain (array bersarang/nested array):

// Membuat array 2D (matriks)
const matriks = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
 
// Mengakses elemen dalam array 2D
console.log("Elemen di baris 1, kolom 2:", matriks[0][1]);
// Output: Elemen di baris 1, kolom 2: 2
console.log("Elemen di baris 3, kolom 3:", matriks[2][2]);
// Output: Elemen di baris 3, kolom 3: 9
 
// Loop melalui semua elemen matriks
console.log("\nSemua elemen matriks:");
for (let i = 0; i < matriks.length; i++) {
  for (let j = 0; j < matriks[i].length; j++) {
    console.log(`matriks[${i}][${j}] = ${matriks[i][j]}`);
  }
}
// Output:
// matriks[0][0] = 1
// matriks[0][1] = 2
// ... dan seterusnya

Penjelasan:

  • Array multi-dimensi adalah "array dari array"
  • Untuk mengakses elemen, gunakan beberapa tanda kurung siku berurutan
  • Berguna untuk merepresentasikan data berbentuk tabel, matriks, atau struktur bersarang

9. Tips dan Trik Array

✅ Praktik Terbaik:

  • Gunakan const saat mendeklarasikan array kecuali jika Anda berencana untuk mereassign seluruh array
  • Pilih metode yang tepat untuk tugas: push/pop lebih efisien daripada unshift/shift
  • Hindari delete array[index] karena akan membuat "lubang" di array (gunakan splice sebagai gantinya)
  • Gunakan metode array modern (map, filter, reduce) untuk kode yang lebih bersih
  • Menambahkan elemen dengan indeks yang jauh lebih besar dari panjang array bisa menciptakan "sparse array" dengan banyak slot kosong

10. Contoh Praktis: To-Do List Sederhana

// Membuat aplikasi To-Do List sederhana
let todoList = [];
 
// Fungsi untuk menambahkan tugas
function tambahTugas(tugas) {
  todoList.push(tugas);
  console.log(`Tugas "${tugas}" ditambahkan!`);
}
 
// Fungsi untuk menampilkan daftar tugas
function tampilkanTugas() {
  console.log("\n=== DAFTAR TUGAS ===");
  if (todoList.length === 0) {
    console.log("Tidak ada tugas.");
  } else {
    todoList.forEach((tugas, index) => {
      console.log(`${index + 1}. ${tugas}`);
    });
  }
  console.log("===================\n");
}
 
// Fungsi untuk menghapus tugas
function hapusTugas(index) {
  if (index >= 0 && index < todoList.length) {
    const tugasDihapus = todoList.splice(index, 1);
    console.log(`Tugas "${tugasDihapus}" dihapus!`);
  } else {
    console.log("Indeks tugas tidak valid!");
  }
}
 
// Demo aplikasi
tampilkanTugas(); // Daftar kosong
tambahTugas("Belajar JavaScript");
tambahTugas("Membuat proyek");
tambahTugas("Mengerjakan PR");
tampilkanTugas(); // Menampilkan 3 tugas
hapusTugas(1); // Menghapus "Membuat proyek"
tampilkanTugas(); // Menampilkan 2 tugas tersisa

Output:

=== DAFTAR TUGAS ===
Tidak ada tugas.
===================

Tugas "Belajar JavaScript" ditambahkan!
Tugas "Membuat proyek" ditambahkan!
Tugas "Mengerjakan PR" ditambahkan!

=== DAFTAR TUGAS ===
1. Belajar JavaScript
2. Membuat proyek
3. Mengerjakan PR
===================

Tugas "Membuat proyek" dihapus!

=== DAFTAR TUGAS ===
1. Belajar JavaScript
2. Mengerjakan PR
===================

Latihan Singkat

Pertanyaan 1:

Bagaimana cara mendapatkan elemen terakhir dari array buah = ["Apel", "Mangga", "Pisang"] tanpa menggunakan indeks angka langsung?

Petunjuk: Gunakan properti length array.

Jawaban: buah[buah.length - 1] akan menghasilkan "Pisang".

Pertanyaan 2:

Bagaimana cara menggabungkan dua array berikut menjadi satu?

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

Petunjuk: Anda bisa menggunakan metode concat() atau operator spread ....

Jawaban:

// Cara 1: concat()
const gabungan1 = array1.concat(array2);
 
// Cara 2: Spread operator
const gabungan2 = [...array1, ...array2];
 
// Kedua cara menghasilkan [1, 2, 3, 4, 5, 6]

JS BigInt

Pelajari cara menggunakan tipe data BigInt di JavaScript untuk angka yang sangat besar.

JS Array Methods

Pelajari cara menggunakan berbagai metode array di JavaScript untuk manipulasi data yang efektif.

On this page