ES6 — Map vs Object — What and when?

Đặt vấn đề

Đọc xong tiêu đề này, bạn có thể tự hỏi - tại sao lại so sánh Map vs. Object mà không phải Map vs. Array, hay Object vs Set?

Chààà, cũng được thôi mà, song mình nhận thấy Map và Object có các trường hợp sử dụng rất giống nhau đòi hỏi chúng ta phải hiểu để có thể quyết định chọn dùng cái nào phù hợp trong mỗi trường hợp cụ thể.

Trong bài viết này chúng ta cùng nhau tìm hiểu nhé !

Concepts

What is Map?

Theo Mozilla:

Map is a data collection type (in a more fancy way — abstract data structure type), can iterate its elements in insertion order.

Với Map, dữ liệu được lưu theo dạng cặp: một unique key và value tương ứng với key đó.

Map được dùng để tra cứu và truy cập nhanh dữ liệu được lưu. Key và value có thể được lưu trong bất kì kiểu dữ liệu nào, không chỉ là chuỗi và số như ta hay gặp.

var myMap = new Map();

var keyString = 'a string',
    keyObj = {},
    keyFunc = function() {};

// đặt các values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, 'value associated with keyObj');
myMap.set(keyFunc, 'value associated with keyFunc');

myMap.size; // 3

// lấy các values
myMap.get(keyString);    // "value associated with 'a string'"
myMap.get(keyObj);       // "value associated with keyObj"
myMap.get(keyFunc);      // "value associated with keyFunc"

myMap.get('a string');   // "value associated with 'a string'"
                         // ?vì keyString === 'a string'
myMap.get({});           // undefined, vì keyObj !== {}
myMap.get(function() {}) // undefined, vì  keyFunc !== function () {}

What about Object?

Khi đọc bài viết này, mình nghĩ các bạn cũng chẳng xa lạ gì với Object nữa đúng không nào?