MulaiCode
JavaScript

JS Array Methods

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

JavaScript Array Methods untuk Pemula

Array methods adalah fungsi bawaan JavaScript yang membuat kita lebih mudah bekerja dengan array. Dengan methods ini, kita bisa memanipulasi data dengan lebih efisien dan menulis kode yang lebih bersih.

Mengapa Kita Butuh Array Methods? 🤔

Tanpa array methods, kita harus menulis banyak kode berulang untuk melakukan operasi sederhana seperti:

  • Mencari elemen dalam array
  • Memfilter array berdasarkan kondisi
  • Mengubah setiap elemen dalam array
  • Mengurutkan elemen-elemen array

Array methods memungkinkan kita melakukan semua ini dengan sintaks yang ringkas!

1. Membuat Array di JavaScript

// Cara membuat array
const buah = ["Apel", "Pisang", "Mangga"];
const angka = [1, 2, 3, 4, 5];
const campuran = [42, "Hello", true, null, { nama: "Budi" }];
 
// Array kosong
const arrayKosong = [];
 
// Array dengan constructor
const arrayBaru = new Array(1, 2, 3); // [1, 2, 3]
 
console.log(buah); // Output: ["Apel", "Pisang", "Mangga"]
console.log(angka.length); // Output: 5

Penjelasan:

  • Array bisa berisi berbagai tipe data (string, number, boolean, object, dll)
  • Array memiliki properti .length yang menunjukkan jumlah elemen
  • Array di JavaScript bisa berisi elemen dengan tipe data berbeda

2. Metode untuk Menambah/Menghapus Elemen

const hewan = ["Kucing", "Anjing", "Kelinci"];
 
// Menambah di akhir array
hewan.push("Burung");
console.log(hewan); // Output: ["Kucing", "Anjing", "Kelinci", "Burung"]
 
// Menghapus dari akhir array
const terakhir = hewan.pop();
console.log(terakhir); // Output: "Burung"
console.log(hewan); // Output: ["Kucing", "Anjing", "Kelinci"]
 
// Menambah di awal array
hewan.unshift("Ikan");
console.log(hewan); // Output: ["Ikan", "Kucing", "Anjing", "Kelinci"]
 
// Menghapus dari awal array
const pertama = hewan.shift();
console.log(pertama); // Output: "Ikan"
console.log(hewan); // Output: ["Kucing", "Anjing", "Kelinci"]

Penjelasan:

  • push(): Menambah elemen di akhir array
  • pop(): Menghapus elemen terakhir dan mengembalikan nilai tersebut
  • unshift(): Menambah elemen di awal array
  • shift(): Menghapus elemen pertama dan mengembalikan nilai tersebut

⚠️ Perhatikan: Metode-metode ini mengubah array asli (mutating methods)

3. Metode untuk Mengubah Array

const makanan = ["Nasi", "Mie", "Roti", "Pizza", "Burger"];
 
// slice(): Mengambil bagian array
const porsi = makanan.slice(1, 3); // Mulai dari indeks 1 hingga sebelum indeks 3
console.log(porsi); // Output: ["Mie", "Roti"]
console.log(makanan); // Output: ["Nasi", "Mie", "Roti", "Pizza", "Burger"] (tidak berubah)
 
// splice(): Mengubah array dengan menghapus/menambah elemen
const dihapus = makanan.splice(2, 2, "Sushi", "Pasta");
console.log(dihapus); // Output: ["Roti", "Pizza"] (elemen yang dihapus)
console.log(makanan); // Output: ["Nasi", "Mie", "Sushi", "Pasta", "Burger"] (array berubah)
 
// concat(): Menggabungkan array
const buah = ["Apel", "Mangga"];
const gabungan = makanan.concat(buah);
console.log(gabungan); // Output: ["Nasi", "Mie", "Sushi", "Pasta", "Burger", "Apel", "Mangga"]

Penjelasan:

  • slice(start, end): Mengambil bagian array dari indeks start hingga sebelum indeks end
  • splice(start, count, ...items): Menghapus count elemen dimulai dari indeks start, dan menambahkan items (opsional)
  • concat(): Menggabungkan dua atau lebih array

⚠️ Perbedaan penting: slice() tidak mengubah array asli, sedangkan splice() mengubah array asli

4. Metode untuk Mencari Elemen

const angka = [10, 20, 30, 40, 50, 30];
 
// indexOf(): Mencari indeks elemen pertama
console.log(angka.indexOf(30)); // Output: 2
console.log(angka.indexOf(100)); // Output: -1 (tidak ditemukan)
 
// lastIndexOf(): Mencari indeks elemen terakhir
console.log(angka.lastIndexOf(30)); // Output: 5
 
// includes(): Memeriksa apakah elemen ada dalam array
console.log(angka.includes(40)); // Output: true
console.log(angka.includes(60)); // Output: false
 
// find(): Mencari elemen berdasarkan kondisi
const hasilFind = angka.find((item) => item > 25);
console.log(hasilFind); // Output: 30 (elemen pertama yang memenuhi kondisi)
 
// findIndex(): Mencari indeks elemen berdasarkan kondisi
const hasilFindIndex = angka.findIndex((item) => item > 25);
console.log(hasilFindIndex); // Output: 2 (indeks elemen pertama yang memenuhi kondisi)

Penjelasan:

  • indexOf(): Mengembalikan indeks pertama dari elemen yang dicari, atau -1 jika tidak ditemukan
  • lastIndexOf(): Mengembalikan indeks terakhir dari elemen yang dicari
  • includes(): Mengembalikan true jika elemen ada dalam array, false jika tidak
  • find(): Mengembalikan nilai elemen pertama yang memenuhi kondisi
  • findIndex(): Mengembalikan indeks elemen pertama yang memenuhi kondisi

5. Metode untuk Transformasi Array (Functional Programming)

const angka = [1, 2, 3, 4, 5];
 
// map(): Membuat array baru dengan transformasi
const dikaliDua = angka.map((num) => num * 2);
console.log(dikaliDua); // Output: [2, 4, 6, 8, 10]
console.log(angka); // Output: [1, 2, 3, 4, 5] (tidak berubah)
 
// filter(): Membuat array baru dengan elemen yang memenuhi kondisi
const lebihDariDua = angka.filter((num) => num > 2);
console.log(lebihDariDua); // Output: [3, 4, 5]
 
// reduce(): Mengurangi array menjadi satu nilai
const jumlah = angka.reduce((total, num) => total + num, 0);
console.log(jumlah); // Output: 15 (1+2+3+4+5)
 
// forEach(): Menjalankan fungsi untuk setiap elemen
angka.forEach((num) => console.log(`Angka: ${num}`));
// Output:
// Angka: 1
// Angka: 2
// ... dst

Penjelasan:

  • map(): Membuat array baru dengan hasil memanggil fungsi untuk setiap elemen
  • filter(): Membuat array baru dengan elemen yang memenuhi kondisi
  • reduce(): Mengurangi array menjadi satu nilai dengan menjalankan fungsi untuk setiap elemen
  • forEach(): Menjalankan fungsi untuk setiap elemen tanpa mengembalikan array baru

⭐ Keunggulan: Metode-metode ini tidak mengubah array asli dan mendukung pendekatan pemrograman fungsional

6. Metode untuk Mengurutkan Array

const buah = ["Mangga", "Apel", "Pisang", "Durian"];
 
// sort(): Mengurutkan array secara alfabetis
buah.sort();
console.log(buah); // Output: ["Apel", "Durian", "Mangga", "Pisang"]
 
// reverse(): Membalik urutan array
buah.reverse();
console.log(buah); // Output: ["Pisang", "Mangga", "Durian", "Apel"]
 
// Mengurutkan angka dengan benar
const angka = [100, 3, 25, 8, 1];
angka.sort(); // Perhatikan: sort() biasa mengurutkan secara string
console.log(angka); // Output: [1, 100, 25, 3, 8] (urutan tidak sesuai)
 
// Mengurutkan angka dengan compare function
angka.sort((a, b) => a - b); // Urutan naik
console.log(angka); // Output: [1, 3, 8, 25, 100]
 
angka.sort((a, b) => b - a); // Urutan turun
console.log(angka); // Output: [100, 25, 8, 3, 1]

Penjelasan:

  • sort(): Mengurutkan elemen array dan mengubah array asli
  • reverse(): Membalik urutan elemen array dan mengubah array asli
  • Untuk mengurutkan angka dengan benar, kita perlu memberikan fungsi pembanding (compare function)

⚠️ Perhatian: sort() dan reverse() mengubah array asli (mutating methods)

7. Metode untuk Konversi Array

const angka = [1, 2, 3, 4, 5];
 
// join(): Menggabungkan elemen array menjadi string
const str1 = angka.join();
console.log(str1); // Output: "1,2,3,4,5"
 
const str2 = angka.join("-");
console.log(str2); // Output: "1-2-3-4-5"
 
// toString(): Mengonversi array menjadi string
const str3 = angka.toString();
console.log(str3); // Output: "1,2,3,4,5"
 
// String ke Array menggunakan split()
const kalimat = "Hello World";
const kata = kalimat.split(" ");
console.log(kata); // Output: ["Hello", "World"]

Penjelasan:

  • join(separator): Menggabungkan elemen array menjadi string dengan separator yang ditentukan
  • toString(): Mengonversi array menjadi string (menggunakan koma sebagai separator)
  • split(): Metode string untuk memecah string menjadi array (bukan metode array)

8. Contoh Nyata: Pengelolaan Data Produk

// Daftar produk dalam toko online
const produk = [
  { id: 1, nama: "Laptop", harga: 12000000, stok: 5 },
  { id: 2, nama: "Smartphone", harga: 5000000, stok: 10 },
  { id: 3, nama: "Kamera", harga: 8000000, stok: 2 },
  { id: 4, nama: "Headphone", harga: 1500000, stok: 0 },
  { id: 5, nama: "Mouse", harga: 300000, stok: 15 },
];
 
// 1. Mencari produk berdasarkan ID
const produkId3 = produk.find((p) => p.id === 3);
console.log("Produk dengan ID 3:", produkId3);
// Output: Produk dengan ID 3: { id: 3, nama: "Kamera", harga: 8000000, stok: 2 }
 
// 2. Mendapatkan produk dengan stok tersedia
const tersedia = produk.filter((p) => p.stok > 0);
console.log("Produk tersedia:", tersedia.length); // Output: 4
 
// 3. Menghitung total nilai inventaris
const totalNilai = produk.reduce((total, p) => total + p.harga * p.stok, 0);
console.log(`Total nilai inventaris: Rp${totalNilai.toLocaleString("id-ID")}`);
// Output: Total nilai inventaris: Rp177.500.000
 
// 4. Mengurutkan produk berdasarkan harga (termurah ke termahal)
const urutHarga = [...produk].sort((a, b) => a.harga - b.harga);
console.log("Produk termurah:", urutHarga[0].nama); // Output: Mouse
 
// 5. Membuat daftar nama produk saja
const namaProduk = produk.map((p) => p.nama);
console.log("Daftar produk:", namaProduk.join(", "));
// Output: Daftar produk: Laptop, Smartphone, Kamera, Headphone, Mouse

Penjelasan:

Dalam contoh nyata ini, kita menunjukkan beberapa array methods yang bekerja sama untuk:

  • Mencari produk spesifik (find())
  • Memfilter produk dengan kondisi tertentu (filter())
  • Menghitung total nilai dengan akumulasi (reduce())
  • Mengurutkan berdasarkan properti tertentu (sort())
  • Membuat array baru dengan format yang berbeda (map() dan join())

Perhatikan bahwa kita menggunakan [...produk] untuk membuat salinan array sebelum menggunakan sort() agar array asli tidak berubah.

9. Tips untuk Array Methods

✅ Lakukan:

  • Gunakan metode immutable (map, filter, reduce) jika ingin menjaga array asli tetap tidak berubah
  • Pahami perbedaan antara forEach() dan metode lain (forEach tidak mengembalikan nilai)
  • Gunakan find() untuk mencari satu elemen dan filter() untuk mencari banyak elemen
  • Perhatikan bahwa sort() mengubah array asli, buat salinan jika perlu

❌ Hindari:

  • Jangan gunakan for loop jika ada array method yang sesuai
  • Jangan berharap forEach() mengembalikan array baru (gunakan map() sebagai gantinya)
  • Hindari penggunaan berlebihan chaining methods (.map().filter().sort()) karena bisa sulit dibaca

Latihan Singkat

Pertanyaan 1:

Apa output dari kode berikut?

const arr = [1, 2, 3];
arr.push(4);
arr.pop();
arr.unshift(0);
console.log(arr);

Petunjuk: Perhatikan urutan operasi yang dilakukan pada array.

Jawaban: Output adalah [0, 1, 2, 3] (menambah 4, menghapus 4, menambah 0 di awal)

Pertanyaan 2:

Bagaimana cara mendapatkan nilai maksimum dari array berikut?

const nilai = [85, 90, 78, 92, 88];

Petunjuk: Anda bisa menggunakan Math.max() bersama dengan operasi array yang sesuai.

Jawaban:

const nilaiMaks = Math.max(...nilai);
console.log(nilaiMaks); // Output: 92

Atau dengan reduce():

const nilaiMaks = nilai.reduce((max, val) => Math.max(max, val), nilai[0]);
console.log(nilaiMaks); // Output: 92

JS Arrays

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

JS Array Search

Pelajari cara mencari elemen dalam array JavaScript dengan berbagai metode pencarian.

On this page