Memahami Array Map dalam JavaScript


Memahami Array Map dalam JavaScript

Daftar Isi

Apa Itu Array Map?

Array map() adalah metode dalam JavaScript yang digunakan untuk membuat array baru dengan menerapkan fungsi pada setiap elemen dari array yang ada. Metode ini sangat berguna dalam memproses dan memanipulasi data dalam array.

Sintaks Array Map

const newArray = array.map(function(element, index, array) {
    return hasil;
});

Penggunaan Array Map

1. Transformasi Data dalam Array

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

2. Ekstraksi Data dari Array

const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" }
];
const names = users.map(user => user.name);
console.log(names); // Output: ["Alice", "Bob", "Charlie"]

3. Melakukan Operasi Matematika

const prices = [10, 20, 30];
const taxIncluded = prices.map(price => price * 1.1);
console.log(taxIncluded); // Output: [11, 22, 33]

Contoh Kasus

Kasus: Mengonversi Data Produk

Misalkan kita memiliki daftar produk dalam bentuk array objek, dan kita ingin mengambil daftar nama produk dalam huruf kapital.

const products = [
    { id: 1, name: "Laptop" },
    { id: 2, name: "Mouse" },
    { id: 3, name: "Keyboard" }
];
const uppercasedNames = products.map(product => product.name.toUpperCase());
console.log(uppercasedNames); // Output: ["LAPTOP", "MOUSE", "KEYBOARD"]

Keuntungan Menggunakan Array Map

  • Lebih Efisien: Menghindari penggunaan loop manual untuk transformasi data.
  • Kode Lebih Bersih: Mempermudah pembacaan dan pemeliharaan kode.
  • Non-Mutatif: Tidak mengubah array asli, melainkan menghasilkan array baru.

Kesimpulan

Metode map() dalam JavaScript adalah cara yang efisien dan bersih untuk memproses data dalam array. Dengan map(), kita dapat melakukan transformasi, ekstraksi, dan operasi lainnya dengan lebih mudah dan aman. Pastikan untuk menggunakannya dalam situasi yang membutuhkan perubahan data tanpa mengubah array asli.

0 comments :

Post a Comment