Kapan harus menggunakan Peta, bukan Objek JavaScript biasa?
Obyek JavaScript sederhana {key: 'value'} menyimpan data terstruktur. Tetapi objek JS sederhana memiliki keterbatasan:
Hanya string dan simbol yang dapat digunakan sebagai kunci dari Objek. Jika kita menggunakan hal-hal lain mengatakan, angka sebagai kunci dari suatu objek maka saat mengakses kunci tersebut kita akan melihat kunci-kunci itu akan dikonversi menjadi string yang secara implisit menyebabkan kita kehilangan konsistensi jenis. const names = {1: 'one', 2: 'two'}; Object.keys (nama); // ['1', '2']
Ada kemungkinan secara tidak sengaja menimpa properti yang diwarisi dari prototipe dengan menulis pengidentifikasi JS sebagai nama kunci dari suatu objek (misalnya toString, konstruktor, dll.)
Objek lain tidak dapat digunakan sebagai kunci dari suatu objek, jadi tidak ada informasi tambahan yang dapat ditulis untuk suatu objek dengan menulis objek itu sebagai kunci dari objek lain dan nilai objek lain itu akan berisi informasi tambahan
Objek bukan iterator
Ukuran suatu objek tidak dapat ditentukan secara langsung
Batasan-batasan Objek ini diselesaikan oleh Peta tetapi kita harus mempertimbangkan Peta sebagai pelengkap untuk Objek alih-alih penggantian. Pada dasarnya Map hanyalah array array tetapi kita harus meneruskan array array tersebut ke objek Map sebagai argumen dengan kata kunci baru, jika tidak hanya untuk array array, properti dan metode Map yang berguna tidak tersedia. Dan ingat pasangan kunci-nilai di dalam array array atau Peta harus dipisahkan dengan koma saja, tidak ada titik dua seperti pada objek biasa.
3 tips untuk memutuskan apakah akan menggunakan Peta atau Objek:
Gunakan peta di atas objek ketika kunci tidak diketahui hingga waktu berjalan karena kunci yang dibentuk oleh input pengguna atau tanpa sadar dapat memecahkan kode yang menggunakan objek jika kunci tersebut menimpa properti yang diwarisi dari objek, sehingga peta lebih aman dalam kasus tersebut. Juga gunakan peta ketika semua tombol adalah tipe yang sama dan semua peta adalah tipe yang sama.
Gunakan peta jika ada kebutuhan untuk menyimpan nilai-nilai primitif sebagai kunci.
Gunakan objek jika kita perlu beroperasi pada elemen individual.
Manfaat menggunakan Maps adalah:
1. Peta menerima semua jenis kunci dan mempertahankan jenis kunci:
Kita tahu bahwa jika kunci objek bukan string atau simbol maka JS secara implisit mengubahnya menjadi string. Sebaliknya, Map menerima semua jenis kunci: string, angka, boolean, simbol dll. Dan Map mempertahankan jenis kunci asli. Di sini kita akan menggunakan angka sebagai kunci di dalam Peta dan nomor itu akan tetap:
const numbersMap= new Map();
numbersMap.set(1, 'one');
numbersMap.set(2, 'two');
const keysOfMap= [...numbersMap.keys()];
console.log(keysOfMap); // [1, 2]
Di dalam Peta kita bahkan bisa menggunakan seluruh objek sebagai kunci. Mungkin ada saat-saat ketika kita ingin menyimpan beberapa data terkait objek, tanpa melampirkan data ini di dalam objek itu sendiri sehingga kita dapat bekerja dengan objek lean tetapi ingin menyimpan beberapa informasi tentang objek. Dalam kasus-kasus tersebut kita perlu menggunakan Peta sehingga kita dapat menjadikan Objek sebagai kunci dan data terkait objek sebagai nilai.
const foo= {name: foo};
const bar= {name: bar};
const kindOfMap= [[foo, 'Foo related data'], [bar, 'Bar related data']];
Tetapi kelemahan dari pendekatan ini adalah kompleksitas mengakses nilai dengan kunci, karena kita harus mengulang seluruh array untuk mendapatkan nilai yang diinginkan.
function getBy Key(kindOfMap, key) {
for (const [k, v] of kindOfMap) {
if(key === k) {
return v;
}
}
return undefined;
}
getByKey(kindOfMap, foo); // 'Foo related data'
Kami dapat mengatasi masalah ini karena tidak mendapatkan akses langsung ke nilai dengan menggunakan Peta yang tepat.
const foo= {name: 'foo'};
const bar= {name: 'bar'};
const myMap= new Map();
myMap.set(foo, 'Foo related data');
myMap.set(bar, 'Bar related data');
console.log(myMap.get(foo)); // 'Foo related data'
Kita bisa melakukan ini menggunakan WeakMap, hanya perlu menulis, const myMap = new WeakMap (). Perbedaan antara Map dan WeakMap adalah WeakMap memungkinkan pengumpulan sampah kunci (di sini objek) sehingga mencegah kebocoran memori, WeakMap hanya menerima objek sebagai kunci, dan WeakMap telah mengurangi serangkaian metode.
2. Peta tidak memiliki batasan nama kunci:
Untuk objek JS biasa kita secara tidak sengaja dapat menimpa properti yang diwarisi dari prototipe dan itu bisa berbahaya. Di sini kita akan menimpa properti toString () dari objek aktor:
const actor= {
name: 'Harrison Ford',
toString: 'Actor: Harrison Ford'
};
Sekarang mari kita mendefinisikan fn isPlainObject () untuk menentukan apakah argumen yang disediakan adalah objek biasa dan fn ini menggunakan metode toString () untuk memeriksanya:
function isPlainObject(value) {
return value.toString() === '[object Object]';
}
isPlainObject(actor); // TypeError : value.toString is not a function
// this is because inside actor object toString property is a string instead of inherited method from prototype
Peta tidak memiliki batasan pada nama kunci, kita dapat menggunakan nama kunci seperti toString, konstruktor dll. Di sini meskipun objek actorMap memiliki properti bernama toString tetapi metode toString () yang diwarisi dari prototipe objek aktorMap bekerja dengan sempurna.
const actorMap= new Map();
actorMap.set('name', 'Harrison Ford');
actorMap.set('toString', 'Actor: Harrison Ford');
function isMap(value) {
return value.toString() === '[object Map]';
}
console.log(isMap(actorMap)); // true
Jika kita memiliki situasi di mana input pengguna membuat kunci maka kita harus mengambil kunci itu di dalam Peta, bukan objek biasa. Ini karena pengguna dapat memilih nama bidang khusus seperti, toString, konstruktor dll. Maka nama-nama kunci tersebut dalam objek biasa berpotensi memecahkan kode yang kemudian menggunakan objek ini. Jadi solusi yang tepat adalah untuk mengikat status antarmuka pengguna ke peta, tidak ada cara untuk memecah Peta:
const userCustomFieldsMap= new Map([['color', 'blue'], ['size', 'medium'], ['toString', 'A blue box']]);
3. Peta dapat diubah:
Untuk mengulangi properti objek biasa, kita perlu Object.entries () atau Object.keys (). Object.entries (plainObject) mengembalikan array pasangan nilai kunci yang diekstraksi dari objek, kita kemudian dapat merusak kunci dan nilai tersebut dan bisa mendapatkan kunci normal dan nilai output.
const colorHex= {
'white': '#FFFFFF',
'black': '#000000'
}
for(const [color, hex] of Object.entries(colorHex)) {
console.log(color, hex);
}
//
'white' '#FFFFFF'
'black' '#000000'
Karena Maps dapat diulang, maka kita tidak perlu entri () metode untuk beralih ke Peta dan perusakan kunci, array nilai dapat dilakukan secara langsung pada Peta karena di dalam Peta, setiap elemen berfungsi sebagai array pasangan nilai kunci yang dipisahkan oleh koma .
const colorHexMap= new Map();
colorHexMap.set('white', '#FFFFFF');
colorHexMap.set('black', '#000000');
for(const [color, hex] of colorHexMap) {
console.log(color, hex);
}
//'white' '#FFFFFF' 'black' '#000000'
Map.keys () mengembalikan iterator over keys dan map.values () mengembalikan iterator over values.
4. Kita dapat dengan mudah mengetahui ukuran Peta
Kami tidak dapat secara langsung menentukan jumlah properti dalam objek polos. Kita membutuhkan penolong fn seperti, Object.keys () yang mengembalikan array dengan kunci objek kemudian menggunakan properti panjang kita bisa mendapatkan jumlah kunci atau ukuran objek polos.
const exams= {'John Rambo': '80%', 'James Bond': '60%'};
const sizeOfObj= Object.keys(exams).length;
console.log(sizeOfObj); // 2
Tetapi dalam kasus Maps kita dapat memiliki akses langsung ke ukuran Peta menggunakan properti map.size.
const examsMap= new Map([['John Rambo', '80%'], ['James Bond', '60%']]);
console.log(examsMap.size);
