Using a tuple as a key in a Map in Typescript/Javascript can be a powerful

Question

Using a tuple as a key in a Map in Typescript/Javascript can be a powerful

Encountered a strange bug in my code where I'm struggling to achieve constant time lookup from a Map when using a tuple as the key.

Here is an example highlighting the issue, along with the workaround I am currently using to make it function:

hello.ts:

let map: Map<[number, number], number> = new Map<[number, number], number>()
    .set([0, 0], 48);

console.log(map.get([0,0])); // prints undefined

console.log(map.get(String([0, 0]))); //  compiler:  error TS2345: Argument of type 
// 'string' is not assignable to parameter of type '[number, number]'.

//the workaround:
map.forEach((value: number, key: [number, number]) => {
    if(String(key) === String([0, 0])){
        console.log(value); // prints 48
    }
})

For compilation (transpilation?), I am using:

tsc hello.ts -target es6

tsc version 2.1.6

I've experimented with different approaches to make the Map.get() method function properly, but haven't found a successful solution yet.

javascript typescript

Answer 1

Answer №1

When working in JavaScript (and TypeScript), it's important to understand that no two arrays are considered equal unless they point to the same array. Even if you create a new array with the same elements, it won't be recognized as equal to an existing array.

This concept becomes particularly important when using Maps, as they rely on exact array references when looking up elements. For example, if you store a value with an array as a key in a Map, you'll only be able to retrieve the value if you use the exact same array reference as the key:

const map: Map<[ number, number], number> = new Map<[ number, number ], number>();

const a: [ number, number ] = [ 0, 0 ];
const b: [ number, number ] = [ 0, 0 ];

// Although a and b have the same value, they refer to different arrays and are not equal
a === b; // = false

map.set(a, 123);
map.get(a); // = 123
map.get(b); // = undefined

To work around this limitation, you can use strings or numbers as keys since they will always be considered equal if they have the same value:

const map: Map<string, number> = new Map<string, number>();

const a: [ number, number ] = [ 0, 0 ];
const b: [ number, number ] = [ 0, 0 ];

const astr: string = a.join(','); // = '0,0'
const bstr: string = b.join(','); // = '0,0'

// Since astr and bstr are strings with the same value, they are considered equal
astr === bstr; // = true

map.set(astr, 123);
map.get(astr); // = 123
map.get(bstr); // = 123

Answer 2

When working in JavaScript (and TypeScript), it's important to understand that no two arrays are considered equal unless they point to the same array. Even if you create a new array with the same elements, it won't be recognized as equal to an existing array.

This concept becomes particularly important when using Maps, as they rely on exact array references when looking up elements. For example, if you store a value with an array as a key in a Map, you'll only be able to retrieve the value if you use the exact same array reference as the key:

const map: Map<[ number, number], number> = new Map<[ number, number ], number>();

const a: [ number, number ] = [ 0, 0 ];
const b: [ number, number ] = [ 0, 0 ];

// Although a and b have the same value, they refer to different arrays and are not equal
a === b; // = false

map.set(a, 123);
map.get(a); // = 123
map.get(b); // = undefined

To work around this limitation, you can use strings or numbers as keys since they will always be considered equal if they have the same value:

const map: Map<string, number> = new Map<string, number>();

const a: [ number, number ] = [ 0, 0 ];
const b: [ number, number ] = [ 0, 0 ];

const astr: string = a.join(','); // = '0,0'
const bstr: string = b.join(','); // = '0,0'

// Since astr and bstr are strings with the same value, they are considered equal
astr === bstr; // = true

map.set(astr, 123);
map.get(astr); // = 123
map.get(bstr); // = 123

Answer 3

Answer №2

For optimal functionality and ease of use, I have designed a custom class that leverages all the methods available in maps:

class CustomMap {
    private data = new Map<string, number>();

    set(key: [number, number], value: number): this {
        this.data.set(JSON.stringify(key), value);
        return this;
    }

    get(key: [number, number]): number | undefined {
        return this.data.get(JSON.stringify(key));
    }

    clear() {
        this.data.clear();
    }

    delete(key: [number, number]): boolean {
        return this.data.delete(JSON.stringify(key));
    }

    has(key: [number, number]): boolean {
        return this.data.has(JSON.stringify(key));
    }

    get size() {
        return this.data.size;
    }

    forEach(callbackfn: (value: number, key: [number, number], map: Map<[number, number], number>) => void, thisArg?: any): void {
        this.data.forEach((value, key) => {
            callbackfn.call(thisArg, value, JSON.parse(key), this);
        });
    }
}

By utilizing this custom map class like the example below, you can streamline operations without the need to manually handle key conversion:

let customMap = new CustomMap();
customMap.set([1, 2], 4);
console.log(customMap.get([1, 2])) // 4

customMap.set([3, 4], 20);
customMap.forEach((v, k) => console.log(k, v));
// prints:
// [1, 2] 4
// [3, 4] 20

Answer 4

For optimal functionality and ease of use, I have designed a custom class that leverages all the methods available in maps:

class CustomMap {
    private data = new Map<string, number>();

    set(key: [number, number], value: number): this {
        this.data.set(JSON.stringify(key), value);
        return this;
    }

    get(key: [number, number]): number | undefined {
        return this.data.get(JSON.stringify(key));
    }

    clear() {
        this.data.clear();
    }

    delete(key: [number, number]): boolean {
        return this.data.delete(JSON.stringify(key));
    }

    has(key: [number, number]): boolean {
        return this.data.has(JSON.stringify(key));
    }

    get size() {
        return this.data.size;
    }

    forEach(callbackfn: (value: number, key: [number, number], map: Map<[number, number], number>) => void, thisArg?: any): void {
        this.data.forEach((value, key) => {
            callbackfn.call(thisArg, value, JSON.parse(key), this);
        });
    }
}

By utilizing this custom map class like the example below, you can streamline operations without the need to manually handle key conversion:

let customMap = new CustomMap();
customMap.set([1, 2], 4);
console.log(customMap.get([1, 2])) // 4

customMap.set([3, 4], 20);
customMap.forEach((v, k) => console.log(k, v));
// prints:
// [1, 2] 4
// [3, 4] 20

Answer 5

Answer №3

In certain scenarios (e.g. when the second element in the pair is dependent on the first element) utilizing a nested map might offer a solution:

// scenario: a mapping from a pair of (tableId, rowId) to the title of the row

// rather than using Map<[number, number], string> where the initial number represents
// tableId and the subsequent number signifies rowId, we could implement:
const rowTitleMap = Map<number, Map<number, string>>

const title = rowTitleMap.get(2)?.get(4) // potential output is a string or undefined

Answer 6

In certain scenarios (e.g. when the second element in the pair is dependent on the first element) utilizing a nested map might offer a solution:

// scenario: a mapping from a pair of (tableId, rowId) to the title of the row

// rather than using Map<[number, number], string> where the initial number represents
// tableId and the subsequent number signifies rowId, we could implement:
const rowTitleMap = Map<number, Map<number, string>>

const title = rowTitleMap.get(2)?.get(4) // potential output is a string or undefined

Answer 7

Answer №4

When it comes to Typescript compatibility and potential drawbacks, I am uncertain. However, I find this method quite straightforward and effective for maintaining keys as tuples:

const stringifyTuple = (tuple) => JSON.stringify(tuple);

const retainTupleKeys = (mapForKeying = new Map()) => {
  let keyMap = new Map();
  [...mapForKeying.keys()].forEach((key) => keyMap.set(stringifyTuple(key), key));

  return (tuple) => {
    const result = keyMap.get(stringifyTuple(tuple));
    if(result) return result;

    keyMap.set(stringifyTuple(tuple), tuple);
    return tuple;
  };
};

const runTest = () => {
  let aMap = new Map([
    [[1, 2], 'value1'],
    [[3, 4], 'value2']
  ]);
  
  const getKey = retainTupleKeys(aMap);
  
  console.log(aMap.get( getKey([1, 2]) ) === 'value1');
  
  aMap.set(getKey([5, 6]), 'value3');
  
  console.log(aMap.get( getKey([5, 6]) ) === 'value3');
  
  aMap.set(getKey([3, 4]), 'value4');
  
  console.log(JSON.stringify([...aMap]));
};

runTest();

Answer 8

When it comes to Typescript compatibility and potential drawbacks, I am uncertain. However, I find this method quite straightforward and effective for maintaining keys as tuples:

const stringifyTuple = (tuple) => JSON.stringify(tuple);

const retainTupleKeys = (mapForKeying = new Map()) => {
  let keyMap = new Map();
  [...mapForKeying.keys()].forEach((key) => keyMap.set(stringifyTuple(key), key));

  return (tuple) => {
    const result = keyMap.get(stringifyTuple(tuple));
    if(result) return result;

    keyMap.set(stringifyTuple(tuple), tuple);
    return tuple;
  };
};

const runTest = () => {
  let aMap = new Map([
    [[1, 2], 'value1'],
    [[3, 4], 'value2']
  ]);
  
  const getKey = retainTupleKeys(aMap);
  
  console.log(aMap.get( getKey([1, 2]) ) === 'value1');
  
  aMap.set(getKey([5, 6]), 'value3');
  
  console.log(aMap.get( getKey([5, 6]) ) === 'value3');
  
  aMap.set(getKey([3, 4]), 'value4');
  
  console.log(JSON.stringify([...aMap]));
};

runTest();

Answer 9

Answer №5

One key reason for this behavior is that when comparing two different array instances with the same values, they are not considered equal because they are compared by reference:

const array1 = [0, 0]
const array2 = [0, 0]
console.log(array1 === array2)
//=> false

Map also follows this equality notion when associating keys with values:

const array1 = [0, 0]
const array2 = [0, 0]

const map = new Map([[array1, 48]])

console.log(map.get(array1))
//=> 48

console.log(map.get(array2))
//=> undefined

To address this issue, you can utilize the keyalesce function, which ensures the same key for identical value sequences:

const array1 = [0, 0]
const array2 = [0, 0]

const map = new Map([[keyalesce(array1), 48]])

console.log(map.get(keyalesce(array1)))
//=> 48

console.log(map.get(keyalesce(array2)))
//=> 48

For a deeper look at how keyalesce operates internally, check out this informative post.

Answer 10

One key reason for this behavior is that when comparing two different array instances with the same values, they are not considered equal because they are compared by reference:

const array1 = [0, 0]
const array2 = [0, 0]
console.log(array1 === array2)
//=> false

Map also follows this equality notion when associating keys with values:

const array1 = [0, 0]
const array2 = [0, 0]

const map = new Map([[array1, 48]])

console.log(map.get(array1))
//=> 48

console.log(map.get(array2))
//=> undefined

To address this issue, you can utilize the keyalesce function, which ensures the same key for identical value sequences:

const array1 = [0, 0]
const array2 = [0, 0]

const map = new Map([[keyalesce(array1), 48]])

console.log(map.get(keyalesce(array1)))
//=> 48

console.log(map.get(keyalesce(array2)))
//=> 48

For a deeper look at how keyalesce operates internally, check out this informative post.

Using a tuple as a key in a Map in Typescript/Javascript can be a powerful

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

After refreshing the page in Next JS, there is a delay in loading the Swiper Js styles. The Swiper slides appear stretched while waiting for Next JS to load the styles. Any suggestions

How can I use AJAX to update a DIV when an image is swapped out?

React's router activeClassName feature fails to apply the active class to child routes

Modify path and refresh display upon ajax call to node server

selecting a radio button and saving its value into a JavaScript variable

Can Google Maps be initialized asynchronously without the need for a global callback function?

replace the standard arrow key scrolling with a new custom event

Activate scroll event when image src changes in Angular using jQuery

Event delegation will be ineffective when the target element is nested within another element

Creating a Vue.js project with Viddler's top-notch video player for seamless playback and dynamic

Output the JSON string retrieved from a specified URL

Managing user input in Node.js

Prevent users from copying and pasting text or right-clicking on the website

The SonarQube code coverage differs from that of Jest coverage

SwipeJS is not compatible with a JQuery-Mobile web application

When all y values are zero, Highcharts.js will shift the line to the bottom of the chart

Tips for managing mouse over events in legends on highcharts

What are the steps to ensure availability validation with jQuery validation?

Dropzone JavaScript returns an 'undefined' error when attempting to add an 'error event'

Implementing setState callback in TypeScript with React Hooks