JavaScript - Object Peta

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

Apa Itu Peta?

Sebelum kita masuk ke hal-hal kecil, mari kita mengerti apa itu Peta. Bayangkan Anda memiliki kotak ajaib tempat Anda dapat memasukkan kunci dan langsung mendapatkan nilai yang sesuai. Itu sebenarnya apa itu Peta di JavaScript - sebuah koleksi pasangan kunci-nilai tempat keduanya, kunci dan nilai, 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 sejak awal. Itu seperti memuat beberapa makanan di kotak ajaib kita!

Properti Peta

Peta datang dengan properti yang praktis:

Properti	Deskripsi
size	Mengembalikan jumlah pasangan kunci-nilai di Peta

Mari kita lihat dalam tindakan:

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 lihat mereka dalam format tabel:

Metode	Deskripsi
set()	Menambahkan pasangan kunci-nilai baru ke Peta
get()	Mengembalikan nilai yang terhubung 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 tindakan dengan beberapa 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 melabelkan 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 kita 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 kepada kotak ajaib kita, "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 kita. 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 mengelola 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 menambahkan pemain, memperbarui skor, memeriksa apakah pemain ada, mengambil skor mereka, menghapus pemain, dan mengetahui berapa banyak pemain kita punya. Itu seperti memiliki skorboard ajaib yang kita dapat manipulasi dengan mudah!

Peta vs. Object di JavaScript

Sekarang Anda mungkin berpikir, " Mengapa menggunakan Peta saat kita memiliki Object di JavaScript?" Pertanyaan yang bagus! Mari kita bandingkan mereka:

1. Tipe Kunci: Object hanya mengijinkan kunci berupa string atau simbol, sedangkan Peta mengijinkan jenis apa saja sebagai kunci ( bahkan object! ).

2. Urutan: Peta menjaga urutan penempatan elemen, sedangkan Object tidak menjamin urutan apa pun.

3. Ukuran: Anda dapat mudah mendapatkan ukuran Peta menggunakan properti size, sedangkan untuk Object, Anda perlu menghitung propertinya secara manual.

4. Kinerja: Peta menunjukkan kinerja yang lebih baik dalam konteks 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 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 adalah object yang berbeda)

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

Dan itu dia, teman-teman! Kita telah melakukan perjalanan melalui negeri Peta JavaScript, dari membuatnya hingga mengoperasinya, dan bahkan membandingkannya dengan kerabatnya, Object. Saya harap kotak pengetahuan ajaib ini telah menyenangkan untuk Anda jelajahi seperti yang telah saya bagikan. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba Peta dalam kode Anda sendiri. Selamat pemrograman, dan may your code always run bug-free!

Credits: Image by storyset