Cara Menggunakan .map() untuk Melakukan Iterasi Item Array di JavaScript

Pengantar

Mulai dari forloop yang klasik hingga metode forEach(), berbagai teknik dan metode digunakan untuk melakukan iterasi set data dalam JavaScript. Salah satu metode paling populer adalah metode .map(). .map() menciptakan array dengan memanggil fungsi spesifik pada setiap item di array induk. .map() adalah metode nonmutasi yang menciptakan array baru, yang merupakan kebalikan dari metode mutasi, yang hanya membuat perubahan terhadap array yang memanggil.

Metode ini dapat memiliki banyak penggunaan saat digunakan bersama array. Dalam tutorial ini, Anda akan menyaksikan empat penggunaan bermanfaat dari .map() di JavaScript: memanggil fungsi elemen array, mengubah string menjadi array, merender daftar di dalam pustaka JavaScript, dan memformat ulang objek array.

Prasyarat

Tutorial ini tidak memerlukan pengodean apa pun, tetapi jika Anda tertarik mengikuti contoh, Anda dapat menggunakan baik Node.js REPL atau alat pengembang dari peramban.

• Untuk menginstal Node.js secara lokal, Anda dapat mengikuti langkah-langkahnya di Cara Menginstal Node.js dan Menciptakan Lingkungan Pengembangan Lokal.

• Chrome DevTools bisa didapatkan dengan mengunduh dan menginstal versi terbaru dari Google Chrome.

Langkah 1 — Memanggil Fungsi pada Setiap Item dalam Array

.map() menerima fungsi panggil kembali sebagai salah satu argumennya, dan satu parameter penting dari fungsi itu adalah nilai saat ini dari item yang sedang diproses oleh fungsi tersebut. Ini adalah parameter yang diperlukan. Dengan parameter ini, Anda dapat memodifikasi setiap item dalam suatu array dan menciptakan fungsi baru.

Berikut adalah contohnya:

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2
})

console.log(sweeterArray)

Keluaran ini tercatat pada konsol:

Output
[ 4, 6, 8, 10, 70 ]

Ini dapat disederhanakan lebih jauh untuk membuatnya lebih bersih dengan:

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;

// we have an array
const sweetArray = [2, 3, 4, 5, 35];

// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray);

Keluaran yang sama tercatat pada konsol:

Output
[ 4, 6, 8, 10, 70 ]

Memiliki kode seperti sweetArray.map(makeSweeter) membuat kode Anda sedikit lebih mudah terbaca.

Langkah 2 — Mengubah String Menjadi Array

.map() dikenal sebagai bagian dari prototipe array. Dalam langkah ini, Anda akan menggunakannya untuk mengubah suatu string menjadi suatu array. Anda tidak mengembangkan metode untuk bekerja dengan string di sini. Alih-alih, Anda akan menggunakan metode khusus .call().

Segala sesuatu dalam JavaScript adalah suatu objek, dan metode adalah fungsi yang melekat pada objek-objek ini. call() memungkinkan Anda untuk menggunakan konteks dari satu objek ke objek lainnya. Oleh karena itu, Anda akan menyalin konteks dari .map() dalam suatu array ke suatu string.

.call() dapat diberikan argumen dari konteks yang akan digunakan dan parameter untuk argumen dari fungsi aslinya.

Berikut adalah contohnya:

const name = "Sammy"
const map = Array.prototype.map

const newName = map.call(name, eachLetter => {
    return `${eachLetter}a`
})

console.log(newName)

Keluaran ini tercatat pada konsol:

Output
[ "Sa", "aa", "ma", "ma", "ya" ]

Di sini, Anda menggunakan konteks dari .map() pada suatu string dan memberikan argumen dari fungsi yang diharapkan .map().

Ini berfungsi seperti metode .split() dari suatu string, hanya bahwa setiap karakter string individual dapat dimodifikasi sebelum dikembalikan dalam suatu array.

Langkah 3 — Merender Daftar dalam Pustaka JavaScript

Pustaka JavaScript seperti React menggunakan .map() untuk merender item di dalam suatu daftar. Namun, ini memerlukan sintaks JSX, karena metode .map() dibungkus dalam sintaks JSX.

Berikut adalah contoh dari komponen React:

import React from "react";
import ReactDOM from "react-dom";

const names = ["whale", "squid", "turtle", "coral", "starfish"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

Ini adalah komponen tanpa kondisi dalam React, yang merender div dengan suatu daftar. Item daftar individual yang dirender menggunakan .map() untuk melakukan iterasi terhadap nama-nama yang awalnya diciptakan oleh array. Komponen ini dirender menggunakan ReactDOM di elemen DOM dengan Id dari root.

Langkah 4 — Memformat Ulang Objek Array

.map() dapat digunakan untuk melakukan iterasi objek dalam suatu array dan, dengan cara yang serupa seperti array tradisional, memodifikasi konten dari setiap objek individu dan memberikan array yang baru. Modifikasi ini dilakukan berdasarkan apa yang dikembalikan dalam fungsi callback.

Berikut adalah contohnya:

const myUsers = [
    { name: 'shark', likes: 'ocean' },
    { name: 'turtle', likes: 'pond' },
    { name: 'otter', likes: 'fish biscuits' }
]

const usersByLikes = myUsers.map(item => {
    const container = {};

    container[item.name] = item.likes;
    container.age = item.name.length * 10;

    return container;
})

console.log(usersByLikes);

Keluaran ini tercatat pada konsol:

Output
[
    {shark: "ocean", age: 50},
    {turtle: "pond", age: 60},
    {otter: "fish biscuits", age: 50}
]

Di sini, Anda memodifikasi setiap objek di dalam array menggunakan tanda kurung dan notasi titik. Kasus penggunaan ini dapat digunakan untuk memproses atau memadatkan data yang diterima sebelum disimpan atau diurai di aplikasi bagian depan.

Kesimpulan

Dalam tutorial ini, kita telah membahas empat penggunaan metode .map() dalam JavaScript. Dalam kombinasi dengan metode lain, fungsionalitas dari .map() dapat diperluas. Untuk informasi lebih lanjut, lihat artikel Cara Menggunakan Metode Array dalam JavaScript: Metode Iterasi dari kami.