Array Map JavaScript: Sintaks dan Contoh Penggunaan

map() merupakan method array di JavaScript yang mengembalikan array baru berisi elemen yang dikembalikan oleh fungsi callback.

Mirip seperti forEach(), alih-alih mengembalikan nilai undefined, map() mengembalikan array baru.

Method ini cocok digunakan ketika kita ingin memodifikasi elemen array tanpa mengubah array asli.

Mari kita pelajari lebih lanjut method array map mulai dari sintaks hingga contoh penggunaannya.

1. Sintaks
2. Contoh
   1. Mengubah Elemen Array
   2. Memodifikasi Objek Dalam Array
   3. Jika Callback Tidak Mengembalikan Nilai
3. Kapan Menggunakan Map?

Sintaks

// arrow function
map((elemen, indeks, array) => { ... })

// callback function
map(callbackFn, thisValue);

Parameter

• callbackFn: fungsi yang dipanggil untuk setiap elemen array. Nilai yang dikembalikan callbackFn dimasukkan dan disatukan ke dalam array baru. Fungsi ini menerima argumen berikut:
  • elemen: elemen saat ini.
  • indeks (opsional): indeks elemen saat ini.
  • array (opsional): array sumber.
• thisValue (opsional): Nilai this saat callbackFn dieksekusi.

Nilai Kembalian

Mengembalikan array baru berisi elemen yang dikembalikan fungsi callback.

Contoh

Mengubah Elemen Array

Mari kita lihat contoh sederhana mengubah setiap elemen pada array.

Contoh berikut akan mengalikan setiap elemen pada array number dengan 2, lalu nilai yang dikembalikan method map kita tampung ke variabel numbersMultiplyTwo.

const numbers = [5, 8, 7, 3, 4, 9];

const numbersMultiplyTwo = numbers.map((number) => number * 2);

console.log(numbersMultiplyTwo); // [ 10, 16, 14, 6, 8, 18 ]
console.log(numbers); // [ 5, 8, 7, 3, 4, 9 ]

Array variabel numbersMultiplyTwo berisi elemen hasil dari perkalian 2 setiap elemen pada array numbers. Array asli (numbers) tidak berubah.

Memodifikasi Objek Dalam Array

map juga sering digunakan ketika kita ingin memodifikasi objek di dalam array dan hasilnya dimasukkan ke array baru.

Misalnya, kita memiliki objek di dalam array users, agar seragam menggunakan bahasa Inggris, kita harus mengubah properti gender yang bernilai pria menjadi male.

Hasilnya kita tampungn ke variabel refactUserGender.

const users = [
  { name: 'budi', gender: 'pria' },
  { name: 'rara', gender: 'female' },
  { name: 'ucup', gender: 'pria' },
  { name: 'intan', gender: 'female' },
];

const refactUserGender = users.map((user) => {
  if (user.gender === 'pria') {
    return {
      ...user,
      gender: 'male',
    };
  }

  return user;
});

console.log(refactUserGender);
/* output:
[
  { name: 'budi', gender: 'male' },
  { name: 'rara', gender: 'female' },
  { name: 'ucup', gender: 'male' },
  { name: 'intan', gender: 'female' }
]
*/

Di bagian akhir callback kita menulis return user, artinya jika properti gender pada objek saat ini tidak sama dengan pria maka kembalikan apa adanya, kalau sama ganti menjadi male.

Jika Callback Tidak Mengembalikan Nilai

Jika fungsi callback tidak mengembalikan nilai secara eksplisit (return ...), fungsi tersebut akan mengembalikan nilai undefined.

Oleh karena itu pada contoh sebelumnya kita menulis return user di akhir callback.

Mari kita buktikan.

const numbers = [1, 2, 3];

const newNumbers = numbers.map(() => {});

console.log(newNumbers); // [ undefined, undefined, undefined ]

Kapan Menggunakan Map?

Karena map mengembalikan array baru, menggunakannya saat Anda tidak membutuhkan array yang dikembalikan adalah mubazir dan anti-pattern.

Jangan gunakan map jika Anda tidak membutuhkan array yang dikembalikan, dan/atau callback tidak mengembalikan nilai.

Alternatifnya gunakan forEach atau for...of.