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

Get back a variety of substitutions

Utilize $stateParams to dynamically generate a title

Getting the content of a textarea within a v-for loop collection

"Turn a blind eye to Restangular's setRequestInterceptor just this

What steps can I take to resolve this issue when encountering an error during npm install?

Instructions on utilizing the CSSStyleSheet.insertRule() method for modifying a :root attribute

Mongoose fails to save due to an error stating "undefined id"

Javascript Calculator with Dual Input Fields

An Angular application running on an Azure App Service experiences crashes exclusively when accessed through the Chrome browser

To ensure that new tabs are opened directly within jQuery UI tabs, the tab should be created within the jQuery UI tabs interface

How to pass a prop from Nuxt.js to a component's inner element

VueJS Vuetify automatically centers default content

Creative Solution for Implementing a Type Parameter in a Generic

What is the best way to show a div after successfully sending a post value using AJAX?

Using react hooks, I am refreshing the product image by replacing it with the thumbnail image

Having issues with displaying options in Select2 within a Vue Component?

How to detect the Back Button or Forward Button events in a single-page application

Zod vow denial: ZodError consistently delivers an empty array

What is the best method for passing a JavaScript object to PHP using Ajax?

Angular's interactive checkboxes and dropdown menus provide a dynamic user experience