Belajar JavaScript Map : Cara Menggunakan Map Array atau Array Method

Last Updated on April 18, 2022 by

Map adalah sebuah koleksi dari elemen-elemen yang ada pada JavaScript yang tiap elemen ini disimpan sebagai pasangan KV (key, value). Hal ini memungkinkan untuk objek pada JavaScript Map untuk untuk menahan objek dan nilai primitif sebagai kunci atau nilainya. Elemen dalam objek Map dilakukan iterasi dalam urutan penyisipan.

Saat melakukan iterasi pada objek Map, kunci, pasangan nilai dikembalikan dalam urutan yang sama seperti yang disisipkan, yaitu mengingat urutan penyisipan asli. Syntax umum yang digunakan untuk membuat objek Map JavaScript adalah:

new Map([it])

Syntax ini adalah objek yang dapat diiterasi. Value yang berkaitan dengan hal yang sama disimpan sebagai pasangan key value. Jika tidak ditentukan maka objek  Map pada JavaScript yang baru akan dibuat atau dibiarkan kosong. Setiap nilai ‘null’ diperlakukan sebagai nilai tidak ditentukan.

Definisi dan Kegunaan

Metode map() berfungsi untuk membuat array baru dengan hasil dari memanggil sebuah fungsi dari setiap elemen array.  Metode memanggil map() menyediakan satu fungsi untuk setiap elemen di setiap array dalam order. Perlu diingat bahwa map() tidak mengeksekusi fungsi untuk elemen array tanpa value.

Metode map() ini pun sudah disupport dalam berbagai browser seperti Chrome, Internet Explorer, Mozilla Firefox, Safari, dan Opera.

Perbedaan JavaScript Map vs Objek JavaScript

Objek JavaScript sangat mirip dengan Map JavaScript. Misalnya, kedua entitas JavaScript ini mengizinkan Anda untuk melakukan beberapa tindakan berikut:

• Memeriksa apakah sesuatu disimpan pada kunci atau tidak
• Menghapus kunci
• Mengambil nilai menggunakan kunci
• Menetapkan kunci ke nilai

Terlepas dari kemiripan yang luar biasa ini, ada beberapa skenario di mana menggunakan Map JavaScript lebih menguntungkan daripada Objek JavaScript jika Anda menggunakannya. Situasi ini muncul ketika:

Diperlukan iterasi langsung. Objek Map JavaScript bersifat dapat diiterasi tidak seperti Objek pada Javascript yang membutuhkan key dan kemudian mengulanginya. Tentu saja, hal ini bisa menjadi tugas yang sangat memakan waktu jika jumlah total key sangat besar

1. Penambahan dan/atau penghapusan key yang sering, pasangan key-value sangatlah diperlukan
2. Menjaga urutan key
3. Ada kebutuhan untuk menyimpan kunci yang bukan tipe String maupun tipe Simbol. Dalam objek Map JavaScript, key dapat memiliki jenis value apa pun.
4. Ukuran objek Map dapat dengan mudah diperoleh dengan menggunakan properti Map.prototype.size. Namun pengukuran besar kecilnya suatu obyek harus dilakukan secara manual.

Mempelajari JavaScript tentunya dapat memakan banyak waktu. Jika Anda ingin mempelajari cara mempercepat proses pembelajaran, berikut ini cara mempelajari JavaScript dengan cepat. Jadi setelah itu, mari kita lanjutkan ke contoh kode umum Map pada JavaScript berikut ini.

Contoh Kode JavaScript Map

var map1 = new Map ([[1, 2], [3, 4], [5, 6], [7, 8]]); /*creates a Map object named map1 with integers as both keys and values*/

console.log(map1.size); /* returns the total number of key-value pairs or elements in a Map object*/
var map2 = new Map ([[“Ariel”, “Kharisma”], [“Edi”, “Perdana”], [“Diera”, “Aviantara”], [“Okta”, “Via”]]); /*creates a new Map object named map2 with strings as both keys and values*/
console.log(map2.size);
var map3 = new Map ([[“Ariel”, 4], [“Edi”, 3], [“Diera”, 2], [“Okta”, 1]]) /* creates a new Map object named map3 containing strings as keys and integers as values*/
console.log(map3.size);

Maka outputnya:
4
4
4

Properti pada JavaScript Map

prototype

Properti ini mewakili prototipe untuk konstruktor Map. Selain itu, Map.prototype juga memungkinkan penambahan property ke objek Map.

Oleh karena itu, dapat diartikan bahwa untuk menambahkan property atau metode ke semua objek Map, developer dapat menggunakan objek prototipe konstruktor.

Selurun instance Map akan mewarisi dari Map.prototype. Untuk Map.prototype.constructor sendiri akan mengembalikan fungsi yang membuat prototipe instance Map. Inilah fungsi dari Map secara default.

prototype.size

Berfungsi untuk mengembalikan total jumlah elemen yaitu pasangan nilai kunci dalam objek Map JavaScript.

Syntax umum dari properti ini:
some_map.size

• protptype[@@toStringTag]

Properti ini memiliki nilai inisial dari Map. Meskipun tidak dapat dihitung dan ditulis, properti ini dapat dikonfigurasi.

Syntax umum dari properti ini:

Map[Symbol.toStringTag]

• get Map [@@species]

Digunakan untuk membuat objek turunan. Map [@@ species] mengembalikan konstruktor Map default. Untuk mengubah tugas konstruktor, konstruktor subkelas pun dimungkikan mengganti properti. Syntax umum dari properti ini:

Map[Symbol.species]

Metode JavaScript

Tambahkan key (k), value (v), laly pasangkan pada objek Map dan kembalikan objek Map tersebut.

Syntax umum:
some_map.set(k, v);
Contoh penggunaan:
var a_map = new Map();
a_map.set(“Edi”, “Bayu”);
a_map.set(“Ariel”, “Hendra”);
a_map.set(“Gugus”, “Arta”);
console.log(a_map.size);
Output:
3

Map.prototype.has(k)

Mengembalikan sebuah nilai Boolean yang tergantung apakah ada nilai yang berkaitan dengan key tersebut atau tidak. Mengembalikan nilai ‘true’ jika nilainya ada dan ‘false’ jika nilainya tidak ada.

Syntax umum:
some_map.has(k);
Contoh:
var a_map2 = new Map();
a_map2.set("Ariel", 1);
a_map2.set("Bayu", 2);
a_map2.set("Diera", 3);
a_map2.set("Hendra", 4);
console.log(a_map2.has("Arta"));
console.log(a_map2.has("Edi"));

Output:
true

false

Map.prototype.get(k)

Mengembalikan ‘value’ yang berkaitan dengan kunci masukan. Jika tidak ada ‘value’ yang terkait dengan ‘kunci’ maka ‘returns’ tidak akan terdefinisi.

Syntax umum:
some_map.get(k);
Contoh:
var a_map3 = new Map ();
a_map3.set("Twenty Two", 22);
a_map3.set("Twenty Four", 24);
a_map3.set("Forty Six", 46);
console.log(a_map3.get("Twenty Two"));
console.log(a_map3.get("Forty Six"));
console.log(a_map3.get("Seventy Two"));

Output:
22
46
undefined

Map.prototype.delete(k)

Menghapus kunci serta nilai yang berkaitan dengannya dari objek Map yang ditentukan. Mengembalikan nilai ‘true’ jika elemen ada dan dihapus, atau ‘false’ jika tidak dapat menemukan nilainya.

Syntax umum:
some_map.delete(k);
Contoh:
var a_map4 = new Map ();
a_map4.set("Y", 25);
a_map4.set("O", 15);
a_map4.set("I", 9);
a_map4.set("B", 2);
console.log(a_map4.size);
console.log(a_map4.delete("O"));
console.log(a_map4.size);
console.log(a_map4.delete("I"));
console.log(a_map4.size);
console.log(a_map4.delete("W"));
console.log(a_map4.size);

Output:
4
true
3
true
2
false
2

Map.prototype.clear

Properti ini berfungsi untuk menghilangkan semua elemen seperti pasangan key-value dari objek Map JavaScript yang spesifik. Tidak dibutuhkan parameter.

Syntax umum:
some_map.clear();
Contoh:
var a_map5 = new Map();
a_map5.set(“Twenty Two”, 22);
a_map5.set(“Twenty Four”, 24);
a_map5.set(“Forty Six”, 46);
console.log(a_map5.size);
a_map5.clear();
console.log(a_map5.size);

Output:
3
0

Map.prototype.entries()

Mengembalikan sebuah objek iterator baru yang berisikan sebuah array dari pasangan key-vaue untuk masing-masing element yang presentasikan pada objek Map yang spesifik di dalam urutan penyisipan. Tidak dibutuhkan parameter.

Syntax umum:
some_map.entries();
Contoh:
var a_map6 = new Map();
a_map6.set(“Ariel”, “Bayu”);
a_map6.set(“Edi”, “Arta”);
var iterator = a_map6.entries();
console.log(iterator.next().value);
console.log(iterator.next().value);

Output:
Array [“Ariel”, “Bayu”]
Array [“Edi”, “Arta”]
Map.prototype.keys()

Properti ini memiliki fungsi untuk mengembalikan objek iterator baru yang mengandung seluruh presentasi ‘key’ di dalam objek Map JavaScript yang spesifik di dalam insertion order atau urutan penyisipan. Tidak dibutuhkan parameter.

Syntax umum:
some_map.keys();

Contoh:
var a_map7 = New Map ();
a_map7.set (“Nama Depan”, “Ariel”);
a_map7.set (“Nama Kedua”, “Kharisma”);
a_map7.set ("Penunjukan", "Penulis Konten Teknis Lepas");
a_map7.keys ();

Map.prototype.values()

Mengembalikan sebuah objek iterator yang baru, yang mengandung semua ‘value’ yang berkaitan dengan objek Map di dalam insertion order atau urutan penyisipan.

Syntax umum:
some_map.values();
Contoh:
var a_map8 = New Map ();
a_map8.set (“Nama Depan”, “Ariel”);
a_map8.set (“Nama Kedua”, “Kharisma”);
a_map8.set ("Penunjukan", "Penulis Konten Teknis Lepas");
a_map8.values ();

Map.prototype.forEach(callbackFn[, thisArg])

Memanggil callbackFn (fungsi callback) masing-masing satu kali untuk semua pasangan nilai kunci yang ada di objek Map yang ditentukan dalam urutan penyisipan. Fungsi panggilan balik memiliki tiga parameter:

• Elemen key
• Elemen value
• Objek Map yang perlu dilintasi.

Jika parameter ‘thisArg’ juga ditentukan maka hal yang sama akan digunakan sebagai nilai untuk setiap callback.

Syntax umum:

some_map.forEach(callbackFn[, thisArg]);

Contoh:

function logMapElements(value, key, map) {
console.log(`m[$] = $`);
}

new Map([[“Ariel”, 3], [“Kharisma”, {}], [“JavaScript Map”, undefined]])
.forEach(logMapElements);

Output:
"m[Ariel] = 3"
"m[Kharisma] = [object Object]"
"m[JavaScript Map] = undefined"

Map.prototype[@@iterator]()

Mengembalikan sebuah objek iterator baru yang berisikan sebuah array dari sepasang key-value untuk masing-masing elemen yang terpresentasikan di dalam objek Map yang spesifik di dalam insertion order.

Syntax:
some_map[Symbol.iterator];

Contoh:
var a_map10 = new Map();
a_map10.set('Ariel', 'Kharisma');
a_map10.set(22, 24);
var iterator = a_map10[Symbol.iterator]();
for (let item of iterator) {
console.log(item);

Output:
Array ["Ariel", "Kharisma"]
Array [22, 24]

Demikianlah penjelasan tentang JavaScript Map yang dapat membantu Anda dalam mengembangkan sebuah aplikasi maupun website. Sama seperti array, objek Map dapat diklon atau digandakan. Selain itu, objek Map dapat digabungkan dengan array, jika diinginkan. Semoga artikel ini membantu dan terus kunjungi situs Appkey.id dapatkan informasi terbaru setiap harinya!.