Media Pengembangan Web & App | by APPKEY

Pembuatan AplikasiMobile ProgrammingBelajar JavaScript Map : Cara Menggunakan Map Array atau...

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

javascript-1

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.

Artikel Terkait  Microsoft Power Apps : Solusi Pengembangan Tanpa Coding!

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 ();

Artikel Terkait  Tips-Tips AWS Security agar Keamanannya Tidak Goyah

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!.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya