Perbedaan Metode ForEach dan Map dalam Javascript: Panduan Pemula

    Jika Anda sering bermain dengan JavaScript akhir - akhir ini, Anda mungkin menemukan dua metode Array yang sepertinya fungsi dari kedua itu sama.

    Irsyad A. Panjaitan

    2 min read·05 Jan 2022

    Perbedaan Metode ForEach dan Map dalam Javascript: Panduan Pemula

    Jika Anda sering bermain dengan JavaScript akhir - akhir ini, Anda mungkin menemukan dua metode Array yang sepertinya fungsi dari kedua itu sama.

    Jika Anda menyangka seperti itu, yap, wajar sekali, karena dua-dua bisa digunakan untuk teknik looping. Baik pada artikel ini, kita akan membahas apa sebenarnya perbedaan antara dua fungsi tersebut.

    For Each

    Menurut MDN, Metode forEach() akan mengeksekusi fungsi yang disediakan satu kali untuk setiap elemen array.

    Singkatnya, gunakan forEach, jika Anda tidak ingin memanipulasi data yang asli, atau keluaran dari array tersebut.

    Karena pada dasarnya, metode ini tidak mengembalikan apapun, yap, apapun tidak dikembalikannya, melainkan dia hanya akan memanggil fungsi yang disediakan pada setiap elemen dalam array yang kita punya.

    Berikut contoh penggunaannya.

    const users = [
        { firstname: 'Irsyad', lastname: 'A. Panjaitan', age: 25 },
        { firstname: 'Alex', lastname: 'Smith', age: 29 },
        { firstname: 'Sri', lastname: 'A. Rahayu', age: 26 },
    ];
    
    users.forEach((user) => {
        console.log(user.firstname);
    });
    
    // expected output: 'Irsyad'
    // expected output: 'Alex'
    // expected output: 'Sri'
    

    Map

    Menurut MDN, Metode map() membuat array baru yang diisi dengan hasil pemanggilan fungsi yang disediakan pada setiap elemen kembali dalam array.

    Singkatnya, gunakan map jika Anda ingin merubah data yang didapat dari array tersebut.

    Perhatikan array berikut.

    const users = [
        { firstname: 'Irsyad', lastname: 'A. Panjaitan', age: 25 },
        { firstname: 'Alex', lastname: 'Smith', age: 29 },
        { firstname: 'Sri', lastname: 'A. Rahayu', age: 26 },
    ];
    

    Jika Anda lihat array di atas, masing-masing dari mereka mempunya key yang namanya firstname dan lastname. Bagaimana jika firstname dan lastname kita gabung menjadi name.

    Perhatikan contoh berikut.

    users.map((user) => {
        return {
            name: `${user.firstname} ${user.lastname}`,
            age: user.age,
        };
    });
    
    /*
     expected output: Array [
      { name: 'Irsyad A. Panjaitan', age: 25 },
      { name: 'Alex Smith', age: 29 },
      { name: 'Sri A. Rahayu', age: 26 }
    ]
    */
    

    Jika kita lihat, dari outputnya, jelas mereka berbeda, map mengembalikan array kembali, sedangkan forEach tidak.

    Berikut adalah contoh lain.

    const numbers = [2, 3, 4, 5];
    
    numbers.forEach((number) => {
        console.log(number * 5);
    });
    
    // expected output: 10
    // expected output: 15
    // expected output: 20
    // expected output: 25
    

    Jika kita menggunakan map, maka yang dikembalikan adalah data dalam bentuk array.

    const numbers = [2, 3, 4, 5];
    
    numbers.map((number) => number * 5);
    // expected output: Array [ 10, 15, 20, 25 ]
    

    Kesimpulan

    Sudah jelas ya perbedaan dari kedua fungsi tersebut, map akan mengembalikan array kembali, sedangkan forEach tidak.

    Semoga artikel ini bermanfaat, like jika Anda suka, share jika Anda suka berbagi.

    Karteil
    Destinasi Utama Belajar Online dengan Format Tulisan yang Elegan
    Kunjungi Sekarang

    Irsyad A. Panjaitan

    Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

    Follow me on
    Support me
    SaweriaGithub

    Newsletter

    Bergabunglah dengan 23.000+ lainnya dan jangan pernah ketinggalan screencast, tips, tutorial, dan lainnya.