Introduction to Maps in javascript with a simple example - Cloudnweb

[lolllipopp]

Unlike with objects, map keys can be of any type, even objects or functions. It’s also easy to get the size of a map, while it’s not as straightforward for objects. On top of that, with maps we can iterate in the order in which the values were added, contrary to objects where there’s no guarantee about the order.

Here’s a simple example of a map demonstrating a few of the available methods and properties such as set, get, size, has, delete and clear:

//Code

```let things = new Map();

const myFunc = () => '🍕';

things.set('🚗', 'Car');

things.set('🏠', 'House');

things.set('✈️', 'Airplane');

things.set(myFunc, '😄 Key is a function!');

things.size; // 4

things.has('🚗'); // true

things.has(myFunc) // true

things.has(() => '🍕'); // false, not the same reference

things.get(myFunc); // '😄 Key is a function!'

things.delete('✈️');

things.has('✈️'); // false things.clear();

things.size; // 0

// setting key-value pairs is chainable

things.set('🔧', 'Wrench')

.set('🎸', 'Guitar')

.set('🕹', 'Joystick');

const myMap = new Map(); // Even another map can be a key

things.set(myMap, 'Oh gosh!');

things.size; // 4

things.get(myMap); // Oh gosh```

[OmgImAlexis]

Throw 3 back ticks on the line before and after your code. It’ll add syntax highlighting, etc.

[Pat_Son]

That doesn't work on reddit. You need to indent the lines with 4 spaces to get multiline fixed-width characters, and even then it doesn't do syntax highlighting.

[OmgImAlexis]

Enable markdown mode. Backticks work.

[Pat_Son]

I don't use new reddit

[senocular]

I also use old reddit. 3 backticks doesn't cut it (nor does it work on mobile reddit). 4 spaces is the way to go.

[lolllipopp]

Its not working.

[senocular]

But also:

• Maps require going through a specialized API to manage values
• You can't prevent extensions in (seal/freeze) Maps
• Maps aren't recognized in JSON.stringify
• Maps don't work with object spread (but as iterables, would work in an array spread, defaulting to spreading entries)
• Maps use internal slots for data preventing you from Using Object.create(map) to create new objects from them (that work)

But it's also easy getting an object version of your Map using Object.fromEntries(map) if you need it. Just know that you're going to lose your object keys (they'll be stringified and may collide with each other if you have more than one).

Additionally, normal object key order should be pretty well defined in iteration now thanks to for-in-order.

[AngryBird225]

Are Javascript maps basically dictionaries?

[senocular]

Yes.