JavaScript - Objek Peta

Selamat datang, para pemrogram yang bersemangat! Hari ini, kita akan melihat dunia menarik JavaScript Maps. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Jadi, siapkan topi berpikir virtual Anda, dan mari kita mulai petualangan ini bersama!

JavaScript - Maps

Apa Itu Peta?

Sebelum kita masuk ke detailnya, mari pahami apa itu Peta. Bayangkan Anda memiliki kotak ajaib tempat Anda dapat memasukkan kunci dan segera mendapatkan nilai yang sesuai. Itu adalah esensi Peta di JavaScript - sebuah koleksi pasangan kunci-nilai di mana keduanya dapat berupa jenis apa saja. Keren, kan?

Sintaks

Sintaks dasar untuk membuat Peta cukup mudah:

let myMap = new Map();

Di sini, kita membuat objek Peta baru dan mengassignnya ke variabel myMap. Itu seperti membuka kotak ajaib yang kita bicarakan sebelumnya!

Parameter

Pada saat membuat Peta, Anda dapat secara opsional memasukkan objek iterabel (seperti array) yang berisi pasangan kunci-nilai:

let myMap = new Map([
['key1', 'value1'],
['key2', 'value2']
]);

Dalam contoh ini, kita membuat Peta dengan dua pasangan kunci-nilai dari awal. Itu seperti memuat beberapa barang ke dalam kotak ajaib kita!

Properti Peta

Peta datang dengan properti yang praktis:

Properti	Deskripsi
size	Mengembalikan jumlah pasangan kunci-nilai di Peta

mari lihatnya dalam aksi:

let myMap = new Map([
['apples', 5],
['bananas', 3],
['oranges', 2]
]);

console.log(myMap.size); // Output: 3

Dalam contoh buah-buahan ini, Peta kita memiliki 3 pasangan kunci-nilai, jadi size mengembalikan 3. Itu seperti menghitung berapa banyak kompartemen yang terisi di kotak ajaib kita!

Metode Peta

Peta dilengkapi dengan beberapa metode yang berguna. Mari kita lihatnya dalam format tabel:

Metode	Deskripsi
set()	Menambahkan pasangan kunci-nilai baru ke Peta
get()	Mengembalikan nilai yang terkait dengan kunci
has()	Memeriksa apakah kunci ada di Peta
delete()	Menghapus pasangan kunci-nilai dari Peta
clear()	Menghapus semua pasangan kunci-nilai dari Peta

Sekarang, mari kita lihat metode ini dalam contoh!

Metode set()

let petMap = new Map();

petMap.set('dog', 'Buddy');
petMap.set('cat', 'Whiskers');
petMap.set('fish', 'Nemo');

console.log(petMap);
// Output: Map(3) { 'dog' => 'Buddy', 'cat' => 'Whiskers', 'fish' => 'Nemo' }

Dalam contoh ini, kita menambahkan hewan peliharaan dan namanya ke Peta. Itu seperti melabeli berbagai kompartemen di kotak ajaib kita!

Metode get()

console.log(petMap.get('dog')); // Output: Buddy
console.log(petMap.get('elephant')); // Output: undefined

Di sini, kita mengambil nilai menggunakan kunci. Ketika kita meminta 'dog', kita mendapat 'Buddy'. Tetapi ketika kita meminta 'elephant', yang tidak ada di Peta kita, kita mendapat undefined. Itu seperti mencari sesuatu di kotak ajaib dan sia-sia!

Metode has()

console.log(petMap.has('cat')); // Output: true
console.log(petMap.has('elephant')); // Output: false

Metode has() memeriksa apakah kunci ada di Peta. Itu seperti bertanya ke kotak ajaib, "Apakah Anda punya kompartemen yang diberi label 'cat'?"

Metode delete()

petMap.delete('fish');
console.log(petMap);
// Output: Map(2) { 'dog' => 'Buddy', 'cat' => 'Whiskers' }

Di sini, kita menghapus entri 'fish' dari Peta kita. Sayang Nemo!

Metode clear()

petMap.clear();
console.log(petMap); // Output: Map(0) {}

Metode clear() mengosongkan seluruh Peta. Itu seperti menguras semua isi dari kotak ajaib kita!

Konstruktor Peta JavaScript

Konstruktor Peta dapat membuat objek Peta baru:

let newMap = new Map();

Anda juga dapat menginisialisasi Peta dengan objek iterabel:

let initMap = new Map([
['key1', 'value1'],
['key2', 'value2']
]);

Itu seperti menyiapkan kotak ajaib kita dengan beberapa kompartemen dan item awal!

Contoh

Mari kita gabungkan semua ini dengan contoh yang menyenangkan. Bayangkan kita mengikuti skor turnamen permainan video:

let gameScores = new Map();

// Menambahkan skor
gameScores.set('Alice', 1000);
gameScores.set('Bob', 850);
gameScores.set('Charlie', 1200);

console.log(gameScores);
// Output: Map(3) { 'Alice' => 1000, 'Bob' => 850, 'Charlie' => 1200 }

// Memperbarui skor
gameScores.set('Bob', 900);

// Memeriksa apakah pemain ada
console.log(gameScores.has('David')); // Output: false

// Mengambil skor pemain
console.log(gameScores.get('Charlie')); // Output: 1200

// Menghapus pemain
gameScores.delete('Alice');

console.log(gameScores);
// Output: Map(2) { 'Bob' => 900, 'Charlie' => 1200 }

// Mengambil jumlah pemain
console.log(gameScores.size); // Output: 2

Dalam contoh ini, kita menggunakan Peta seperti skorboard. Kita dapat mudah menambahkan pemain, memperbarui skor, memeriksa apakah pemain ada, mengambil skor mereka, menghapus pemain, dan menghitung berapa banyak pemain kita punya. Itu seperti memiliki skorboard ajaib yang dapat kita manipulasi dengan mudah!

Peta vs. Objek di JavaScript

Sekarang, Anda mungkin bertanya-tanya, " Mengapa menggunakan Peta saat kita punya Objek di JavaScript?" Pertanyaan yang bagus! Mari kita bandingkan mereka:

Tipe Kunci: Objek hanya mengizinkan kunci berupa string atau simbol, sedangkan Peta mengizinkan jenis apa saja sebagai kunci ( bahkan objek! ).
Urutan: Peta mempertahankan urutan penempatan elemen, sedangkan Objek tidak menjamin urutan apa pun.
Ukuran: Anda dapat mudah mendapatkan ukuran Peta menggunakan properti size, sedangkan untuk Objek, Anda perlu menghitung propertinya secara manual.
Kinerja: Peta menunjukkan performa yang lebih baik dalam situasi yang melibatkan penambahan dan penghapusan frequent pasangan kunci-nilai.

Berikut adalah contoh yang menjelaskan:

let obj = {
'string key': 'string value',
1: 'number value',
[{}]: 'object key' // Ini sebenarnya menjadi '[object Object]'
};

let map = new Map([
['string key', 'string value'],
[1, 'number value'],
[{}, 'object key'] // Ini bekerja seperti yang diharapkan
]);

console.log(Object.keys(obj).length); // Output: 3
console.log(map.size); // Output: 3

console.log(obj['[object Object]']); // Output: 'object key'
console.log(map.get({})); // Output: undefined (karena itu objek yang berbeda)

Dalam contoh ini, kita melihat bagaimana Peta menangani jenis kunci berbeda lebih halus daripada Objek. Itu seperti memiliki kotak ajaib yang lebih fleksibel dan kuat!

Dan begitu juga, teman-teman! Kita telah berpetualangan melalui negeri JavaScript Maps, dari membuatnya hingga mengubahnya, dan bahkan membandingkannya dengan kerabatnya, Objek. Saya harap kotak pengetahuan ajaib ini telah menyenangkan untuk Anda jelajahi seperti halnya bagi saya untuk berbagi. Ingat, latihan membuatlah sempurna, jadi jangan khawatir untuk mencoba Maps dalam kode Anda sendiri. Selamat mapping, dan semoga kode Anda selalu berjalan tanpa bug!

Credits: Image by storyset