Exploring the mechanics behind ES6 Map shims

Question

Exploring the mechanics behind ES6 Map shims

From what I've gathered from the documentation (here and here), it seems that having a reference to the memory address is necessary for the operation to work:

const foo = {};
const map = new Map();
map.set(foo,'123');  // This action requires knowledge of the memory address of `foo`. Otherwise, any other method would involve converting `foo` into a string.

This limitation exists because keys in JavaScript objects {} can only be strings (at least in ES5).

However, there appears to be a shim available for Map: https://github.com/zloirock/core-js#map. I attempted to go through the source code but found it too abstracted (internally, it utilizes strong collection which further imports 10 more files)

Question

Please respond to any of the following queries

Is there a straightforward method to achieve this without involving string conversion?
Could it potentially alter foo to save a string within it and then utilize that as the key?
Perhaps I'm misunderstanding the documentation entirely?

javascript typescript ecmascript-6

Answer 1

Answer №1

When considering different approaches, two methods stand out. Firstly, you could utilize an array of keys and search through it sequentially:

Map1 = {
    keys: [],
    values: [],
};

Map1.set = function(key, val) {
    var k = this.keys.indexOf(key);
    if (k < 0)
        this.keys[k = this.keys.length] = key;
    this.values[k] = val;
};

Map1.get = function(key) {
    return this.values[this.keys.indexOf(key)];
};


foo = {};
bar = {};

Map1.set(foo, 'xxx');
Map1.set(bar, 'yyy');

document.write(Map1.get(foo) + Map1.get(bar) + "<br>")

The second approach involves assigning a unique "key" identifier to an object used as a key:

Map2 = {
    uid: 0,
    values: {}
};

Map2.set = function(key, val) {
    key = typeof key === 'object'
        ? (key.__uid = key.__uid || ++this.uid)
        : String(key);
    this.values[key] = val;
};

Map2.get = function(key) {
    key = typeof key === 'object'
        ? key.__uid
        : String(key);
    return this.values[key];
};


foo = {};
bar = {};

Map2.set(foo, 'xxx');
Map2.set(bar, 'yyy');

document.write(Map2.get(foo) + Map2.get(bar) + "<br>")

Unlike the first method, the second one has a time complexity of O(1). To enhance accuracy, consider making uid non-writable/enumerable. Additionally, ensure each Map has its own designated "uid" property (easily implemented in the Map constructor).

Answer 2

When considering different approaches, two methods stand out. Firstly, you could utilize an array of keys and search through it sequentially:

Map1 = {
    keys: [],
    values: [],
};

Map1.set = function(key, val) {
    var k = this.keys.indexOf(key);
    if (k < 0)
        this.keys[k = this.keys.length] = key;
    this.values[k] = val;
};

Map1.get = function(key) {
    return this.values[this.keys.indexOf(key)];
};


foo = {};
bar = {};

Map1.set(foo, 'xxx');
Map1.set(bar, 'yyy');

document.write(Map1.get(foo) + Map1.get(bar) + "<br>")

The second approach involves assigning a unique "key" identifier to an object used as a key:

Map2 = {
    uid: 0,
    values: {}
};

Map2.set = function(key, val) {
    key = typeof key === 'object'
        ? (key.__uid = key.__uid || ++this.uid)
        : String(key);
    this.values[key] = val;
};

Map2.get = function(key) {
    key = typeof key === 'object'
        ? key.__uid
        : String(key);
    return this.values[key];
};


foo = {};
bar = {};

Map2.set(foo, 'xxx');
Map2.set(bar, 'yyy');

document.write(Map2.get(foo) + Map2.get(bar) + "<br>")

Unlike the first method, the second one has a time complexity of O(1). To enhance accuracy, consider making uid non-writable/enumerable. Additionally, ensure each Map has its own designated "uid" property (easily implemented in the Map constructor).

Answer 3

Answer №2

To efficiently retrieve data from a collection, one can utilize an array for storage and implement a lookup operation in O(n) time complexity by iterating through the array with strict comparison. This approach differs from using a true hash function, which would provide O(1) lookup performance. An illustration of this concept is demonstrated below:

var myObj = {};

var someArray = [{}, {}, myObj, {}];

console.log(someArray.indexOf(myObj)); // returns 2

A more detailed implementation can be found in the following reference link: JavaScript HashTable Using Object Keys

function Map() {
    var keys = [], values = [];

    return {
        put: function (key, value) {
            var index = keys.indexOf(key);
            if(index == -1) {
                keys.push(key);
                values.push(value);
            }
            else {
                values[index] = value;
            }
        },
        get: function (key) {
            return values[keys.indexOf(key)];
        }
    };
}

Answer 4

To efficiently retrieve data from a collection, one can utilize an array for storage and implement a lookup operation in O(n) time complexity by iterating through the array with strict comparison. This approach differs from using a true hash function, which would provide O(1) lookup performance. An illustration of this concept is demonstrated below:

var myObj = {};

var someArray = [{}, {}, myObj, {}];

console.log(someArray.indexOf(myObj)); // returns 2

A more detailed implementation can be found in the following reference link: JavaScript HashTable Using Object Keys

function Map() {
    var keys = [], values = [];

    return {
        put: function (key, value) {
            var index = keys.indexOf(key);
            if(index == -1) {
                keys.push(key);
                values.push(value);
            }
            else {
                values[index] = value;
            }
        },
        get: function (key) {
            return values[keys.indexOf(key)];
        }
    };
}

Answer 5

Answer №3

Check out my polyfill solution here. I'm not promoting it, but I believe it's the simplest and most straightforward option available for learning and educational purposes. It utilizes a lookup table for keys and corresponding value tables.

var k = {}, j = [], m = document, z = NaN;
var m = new Map([
    [k, "foobar"], [j, -0xf], [m, true], [z, function(){}]
]);




Index      Key                 Value
##### ################    ################
0.    k ({})              "foobar"
1.    j ([])              -15
2.    m (Document)        true
3.    z (NaN)             function(){}

Each item is internally stored at a different index, following a similar approach to how browsers handle it. Some other polyfills store keys on objects themselves and manipulate internal methods, causing significant performance issues. My method aims to avoid such slowdowns by segregating items in memory locations.

The functionality of my polyfill relies on the distinct storage locations of javascript objects, hence why [] !== [] and indexOf works seamlessly on arrays of objects. They are unique entities in memory.

Answer 6

Check out my polyfill solution here. I'm not promoting it, but I believe it's the simplest and most straightforward option available for learning and educational purposes. It utilizes a lookup table for keys and corresponding value tables.

var k = {}, j = [], m = document, z = NaN;
var m = new Map([
    [k, "foobar"], [j, -0xf], [m, true], [z, function(){}]
]);




Index      Key                 Value
##### ################    ################
0.    k ({})              "foobar"
1.    j ([])              -15
2.    m (Document)        true
3.    z (NaN)             function(){}

Each item is internally stored at a different index, following a similar approach to how browsers handle it. Some other polyfills store keys on objects themselves and manipulate internal methods, causing significant performance issues. My method aims to avoid such slowdowns by segregating items in memory locations.

The functionality of my polyfill relies on the distinct storage locations of javascript objects, hence why [] !== [] and indexOf works seamlessly on arrays of objects. They are unique entities in memory.

Exploring the mechanics behind ES6 Map shims

Question

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to utilize two different versions of a JavaScript library on a single page without causing function conflicts?

What could be the reason for rowsAffected not returning an integer value?

Leveraging jQuery event listeners within a Javascript class initialization

I am encountering an issue where I am using Getserversideprops within a page to retrieve data from Strapi, but I am consistently

Activate the search feature in select2 to allow multiple selections

Deactivate the button for each package based on a specific PHP value

A more efficient method for querying documents based on ids that are not in a given list and then sorting them by a specific publish date

Can you give me some insights about what an Action Creator is?

Display the chosen option in the console by using onChange() function; this is analogous to how onSelect()

Converting JSON to PNG format using FabricJS

What is the syntax for passing a generic type to an anonymous function in a TypeScript TSX file?

What is the process for implementing a grid with 5 columns on larger screens and 2 columns on smaller screens using reactjs?

What is the best way to remove a void type from a union type?

Automatically forward to m.example.com on mobile devices using nodejs

Ways to update the div's appearance depending on the current website's domain

Problem with routing: Request parameters not being collected

Identifying the Nearest Div Id to the Clicked Element

Ensure selected language is maintained when refreshing or changing view by utilizing switch i18n functionality

The v-bind value remains static even as the data in Vue.js updates

Is it possible to incorporate HTML content into the metadata within the head section of a Nuxt application?