Map JavaScript

Objek Map menyimpan sepasang kunci-nilai dan mempertahankan urutan penyisipan. Nilai apa pun baik objek maupun nilai primitif dapat digunakan sebagai kunci atau nilai.

Map hadir di ECMAScript 2015 bersama dengan objek Set dan beberapa fitur baru yang lainnya.

Perbedaan Objek dan Map

Map mirip dengna Object, keduanya memungkinkan kita menyimpan nilai dengan kunci, mengambil nilai, menghapus kunci dan sebagainya.

Namun, ada beberapa perbedaan penting yang membuat Map lebih baik daripada Object dalam beberapa kasus.

Berikut beberapa perbedaan Object dan Map:

Properti dan Method Map

new Map() - Membuat Map Baru

Konstruktor Map() berfungsi untuk membuat objek Map baru. Kita dapat meneruskan objek iterable secara langsung ke parameter atau menggunakan method set().

Sintaks

new Map();
new Map(iterable);

Parameter

• iterable (opsional): Array atau objek iterable lainnya yang elemennya pasangan kunci nilai. Sebagai contoh array dua elemen, [[key1, value1], [key2, value2]].

Contoh

const fruits = new Map([
  ['banana', 40000],
  ['apple', 50000],
]);
const emptyMap = new Map();

console.log(fruits); // Map(2) { 'banana' => 40000, 'apple' => 50000 }
console.log(emptyMap); // Map(0) {}

set() - Menambah atau Mengubah Nilai

Method set() berfungsi untuk menambah atau mengubah nilai berdasarkan kunci.

Jika kunci ada di dalam objek Map method ini akan mengubah nilainya, tapi jika tidak ada maka akan menambah.

Sintaks

set(key, value);

Parameter

• key: kunci elemen yang ingin ditambahkan ke objek Map.
• value: nilai elemen yang ingin ditambahkan ke objek Map.

Nilai Kembalian

Mengembalikan objek Map dengan elemen yang telah diubah atau ditambah.

Contoh

const fruits = new Map();

// tambah
fruits.set('banana', 50000);
console.log(fruits); // Map(1) { 'banana' => 50000 }

// ubah
fruits.set('banana', 40000);
console.log(fruits); // Map(1) { 'banana' => 40000 }

get() - Mengambil Nilai Berdasarkan Kunci

Method get() berfungsi untuk mengambil nilai elemen berdasarkan kunci.

Jika nilai yang diasosiasikan dengan kunci adalah objek, method ini mengembalikan referensi ke objek tersebut dan jika kita mengubah objek tersebut maka objek yang ada di dalam Map ikut berubah.

Sintaks

get(key);

Parameter

• key: kunci elemen yang ingin diambil nilainya dari objek Map

Nilai Kembalian

Mengembalikan nilai yang terkait dengan kunci tersebut, jika tidak ada mengembalikan nilai undefined.

Contoh

const fruits = new Map();
fruits.set('banana', 50000);

const banana = fruits.get('banana');
console.log(banana); // 50000

const apple = fruits.get('apple');
console.log(apple); // undefined

clear() - Menghapus Semua Elemen

Method clear() berfungsi untuk menghapus semua elemen objek Map.

Sintaks

clear();

Nilai Kembalian

Mengembalikan nilai undefined.

Contoh

const fruits = new Map();
fruits.set('banana', 50000);
fruits.set('grape', 30000);
fruits.set('apple', 40000);

fruits.clear();
console.log(fruits); // Map(0) {}

delete() - Hapus Elemen Berdasarkan Kunci

Method delete() berfungsi untuk menghapus elemen berdasarkan kunci tertentu dari objek Map.

Sintaks

delete(key);

Parameter

• key: kunci elemen yang ingin dihapus dari objek Map.

Nilai Kembalian

Mengembalikan nilai true jika elemen berhasil dihapus atau false jika gagal.

Contoh

const fruits = new Map();
fruits.set('banana', 50000);

const hasDeleted = fruits.delete('banana');
console.log(hasDeleted); // true

has() - Mengecek Keberadaan Elemen Berdasarkan Kunci

Method has() berfungsi untuk mengecek apakah elemen dengan kunci tertentu ada atau tidak di dalam objek Map.

Sintaks

has(key);

Parameter

• key: kunci elemen yang ingin dicek keberadaannya dalam objek Map.

Nilai Kembalian

Mengembalikan nilai true jika elemen dengan kunci yang ditentukan ada di dalam objek Map atau false jika tidak ada.

Contoh

const fruits = new Map();
fruits.set('banana', 50000);

const isExistsBanana = fruits.has('banana');
console.log(isExistsBanana); // true

const isExistsGrape = fruits.has('grape');
console.log(isExistsGrape); // false

forEach() - Mengeksekusi Fungsi yang Disediakan

Method forEach() mengeksekusi fungsi yang disediakan, fungsi yang disediakan dieksekusi sekali untuk setiap elemen dalam objek Map secara berurutan.

Sintaks

// arrow function
forEach((value, key, map) => { ... });

// callback function
forEach(callbackFn, thisArg);

Parameter

• callbackFn: fungsi yang akan dieksekusi sekali untuk setiap elemen objek Map, mengambil argumen berikut:
  • value (opsional): nilai elemen saat ini.
  • kunci (opsional): kunci elemen saat ini.
  • map (opsional): objek Map yang sedang diulang.
• thisArg (opsional): nilai untuk this saat callbackFn dieksekusi.

Nilai Kembalian

Mengembalikan nilai undefined.

Contoh

const fruits = new Map();
fruits.set('banana', 50000);
fruits.set('grape', 40000);

fruits.forEach((value, key, map) => {
  console.log('value =', value);
  console.log('key =', key);
  console.log('map =', map);
  console.log('-----------');
});
/* output:
value = 50000
key = banana
map = Map(2) { 'banana' => 50000, 'grape' => 40000 }
-----------
value = 40000
key = grape
map = Map(2) { 'banana' => 50000, 'grape' => 40000 }
-----------
*/

entries() - Membuat Objek Iterator Berisi Nilai dan Kunci

Method entries() berfungsi untuk membuat objek iterator baru yang berisi array [key, value] untuk setiap elemen dalam objek Map.

Sintaks

entries();

Nilai Kembalian

Mengembalikan objek iterator baru dari objek Map.

Contoh

const fruits = new Map();
fruits.set('banana', 50000);
fruits.set('grape', 40000);

const fruitsIterator = fruits.entries();

console.log(fruitsIterator); // [Map Entries] { [ 'banana', 50000 ], [ 'grape', 40000 ] }

const element1 = fruitsIterator.next().value;
const element2 = fruitsIterator.next().value;

console.log(element1); // [ 'banana', 50000 ]
console.log(element2); // [ 'grape', 40000 ]

keys() - Membuat Objek Iterator Berisi Kunci

Method keys() berfungsi untuk membuat objek iterator baru berisi kunci elemen objek Map.

Mirip dengan entries(), bedanya keys() hanya mengembalikan kunci elemen.

Sintaks

entries();

Nilai Kembalian

Mengembalikan objek iterator berisi kunci elemen objek Map.

Contoh

const fruits = new Map();
fruits.set('banana', 50000);
fruits.set('grape', 40000);

const fruitsIterator = fruits.keys();

console.log(fruitsIterator); // [Map Iterator] { 'banana', 'grape' }

const key1 = fruitsIterator.next().value;
const key2 = fruitsIterator.next().value;

console.log(key1); // banana
console.log(key2); // grape

values() - Membuat Objek Iterator Berisi Nilai

Method values() berfungsi untuk membuat objek iterator baru yang berisi nilai setiap elemen dari objek Map.

Mirip dengan keys(), alih-alih kunci, values() mengembalikan nilai elemen.

Sintaks

values();

Nilai Kembalian

Mengembalikan objek iterator baru berisi nilai setiap elemen dari objek Map.

Contoh

const fruits = new Map();
fruits.set('banana', 50000);
fruits.set('grape', 40000);

const fruitsIterator = fruits.values();

console.log(fruitsIterator); // [Map Iterator] { 50000, 40000 }

const value1 = fruitsIterator.next().value;
const value2 = fruitsIterator.next().value;

console.log(value1); // 50000
console.log(value2); // 40000

size - Mengambil Jumlah Elemen

Properti size mengembalikan nilai bilangan bulat yang mewakili banyaknya entri atau elemen yang dimiliki objek Map

Contoh

const fruits = new Map();
fruits.set('banana', 50000);
fruits.set('grape', 40000);

const fruitsSize = fruits.size;

console.log(fruitsSize); // 2