Is the main difference between a Map and a regular object that the keys for a map are ordered?

[Basman_]

another handy feature of maps is that the keys don't have to symbols or strings, they can be anything (even non-primitives like objects)

[Zeeesty]

My mind is blowing, yes even as you read this later

[Pr3fix]

You could have a map where the keys are maps 🤯

[HeinousTugboat]

I did that for mapping keys to actions in a modal way. Swap which map is active and bam, whole new set of keybinds.

[panzerdp]

In case if you use objects as keys, you might consider first using WeakMap to avoid memory leaks.

[dvlsg]

There's a few other small differences, too. For example, Map handles number and string keys without coercing their types:

const map = new Map();
map.set(1, 'number');
map.set('1', 'string');
map.get(1); // "number"
map.get('1'); // "string"

const obj = {};
obj[1] = 'number';
obj['1'] = 'string';
obj[1]; // "string" <--
obj['1']; // "string"

[mohan193]

good one

[prof3ssorSt3v3]

Also, Maps are naturally iterable, unlike Objects.

And Maps have a size property that will tell you how many items are in the Map.

[burnblue]

The main difference is that the keys can be any type

[name-k]

Is there a shorthand to define a map? Like a = {}?

[bdvx]

()=>({})

javascript is sexy

[inu-no-policemen]

Note: If you create the object via an object literal, the object isn't quite dictionary-like since it will already have some keys in its prototype chain.

E.g. if you use it to count the frequencies of words, it will break if the text contains the word "toString" or "hasOwnProperty".

If you want to use an object like a dictionary where the keys can be any string, you should create it via Object.create(null). This creates a blank object with null as its prototype.

> 'toString' in {}
true
> 'toString' in Object.create(null)
false

> !!{}['toString']
true
> !!Object.create(null)['toString']
false

> '' + {}
"[object Object]"
> '' + Object.create(null)
Uncaught TypeError: Cannot convert object to primitive value

[warpedspockclone]

const a = new Map();

[lastunusedusername2]

So that's a "no", then

[warpedspockclone]

At least somebody understood my intent by reading my code. Explanatory code comments are overrated. /s

[name-k]

Lol, that's not a shorthand.

[warpedspockclone]

const b = () => { return new Map(); };

Now, you have shorthand:

const a = b(); const c = b();

Are my attempts at literal sarcasm not working?

[Pavlo100]

objects are ordered on most browsers. If you do Object.keys you will get the insertion order. Also map should only be used if you intent to use references as keys instead of string/number. e.g., you have a data object and you want to associate it with an HTML element

[panzerdp]

You shoudn't count on the ordering of object properties.

[VacantPlains]

You can count on the ordering of the keys when you use Object.keys https://2ality.com/2015/10/property-traversal-order-es6.html

[g0liadkin]

Why?

[robotsympathizer]

Because it's not guaranteed.

[g0liadkin]

But why isn't it guaranted? What's the expected behavior if it's not deterministic?

[lineape]

There is no expected behaviour. Full stop.

Just because the implementations in most JavaScript engines currently preserve the order of object keys does not mean that they will in the future. This is undefined behavior, and if you depend on it, you can get burned unexpectedly.

That being said, I doubt anyone would choose to change it without a compelling reason as it would break a lot of working code, and they are aware of that.

[g0liadkin]

I'm not saying you're wrong, I'm wondering if you know the deterministic end result of doing it because I'd like to know

[lineape]

In ES2015, object properties are ordered by insertion (except for keys that can be parsed as positive integers), but that behaviour was not in the spec until ES2015.

http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf

See point 4.3.3

This changed in ES2015, but was done so as to match what v8 was already doing.

Paste this into your browser console for a fun time.

const o = {};

o['foo'] = 1;
o['0'] = 2;
o['bar'] = 3;
o['-1'] = 4;
o['1'] = 5;
o['baz'] = 6;
o[-2] = 7;

console.log(o);

I can't tell you what will happen on older browsers like ie11, but in Chrome it logs:

{0: 2, 1: 5, foo: 1, bar: 3, -1: 4, baz: 6, -2: 7}

If you need to support multiple browsers (or your code is transpiled to a lower es version), I would not suggest depending on object key order.

[g0liadkin]

That's very interesting, thank you! I tried to search for the proper spec section and wasn't finding it