ES2015 - Sets, Maps and Array Questions

Question

I'm just looking into ES2015, and coming up to Maps, Sets and Arrays.

Question 1

Firstly I'm interested in why they all use a different method to add items to it.

• Set.add("item");
• Map.set("item");
• Array.push("item");

is there method to the madness rather than keeping them all as .push?

Question 2

size vs length.

Why have Map and Set got .size but Array has .length why not use the same?

Question 3

When would you use Map over Array? can anybody give a real world example for this, I understand you can do things like use objects as keys in Maps, but why would you do that in the first place.

---

Hopefully somebody can clear this up to help inform other new starters to ES2015, thanks.

Answer 1

If you want to have a good understanding of the answers for your questions, read this. Yes, it is long, but it worth it if you want to truly understand when to use Maps and Arrays and their methods, such that it helps you design your own objects and structures, and generally what naming practices/guidelines to use. There is an important note at the end, that is especially crucial for understanding Arrays and Maps, relating to your third question.

Question 1:

For Set, they don't use .push like Array because .add is not like pushing an Array. Set.prototype.add() and Array.prototype.push() have different capabilities and parameter intakes. Array's push method can accept several values, unlike Set. But, Set's add method can do chaining (mySet.add(12).add(13)), which Array's push cannot. So, basically, their methods are named differently because they ultimately do slightly different things.

Map has a totally differenty story. Map.prototype.set does not merely add a value to the map. This method accepts two parameters, key and value, because a map is not like an array or set. It corresponds keys to a certain value that you would like to access given the key. Here is some sources to that: https://www.geeksforgeeks.org/javascript-map-set-method/

So, Map.set() does not add a value to it, because Map is not a collection of just values. You can think of it as a bank full of bank lockers, where you can get the items in any of the lockers if you can provide the key, with each key being mapped to its corresponding value. Map.set(key, value) basically updates the Map's collection of keys and values. If your key is an existing key in the map, your value mapped to that key is changed to your given parameter value. If that key does not exist in the map, the bank gets a new bank locker with a brand new key. **Remember, if the key is mapped to a different value, it basically means the locker key is corresponded to a different bank locker and can be used for only that. Remember this as well: you cannot walk into the bank and say that you know the contents of a bank locker so that you should be able to have both the key and the contents, if you get my analogy. Keys can get you values, but values themselves cannot get you keys.

Question 2: .length is for objects that are ordered by an index, meanwhile .size is for objects that are just not. Other than that, .size and .length actually do different things to return the value. Arrays use a simple pointer arithmetic to point the index to its value, which is why it is an efficient search: because it doesn't do a search! On the other hand .size is used for objects that actually use an iterator to find the elemental magnititude of the object. So, obviously something that uses .length is faster than .size. So, different processes is why the use different method names.

Question 3: Well, the answer to your question is, when would you use a closet over a cardboard box. Like I said, maps have different purposes from arrays. Yes, I know, they all ultimately just store bytes, but please don't see them just in that way. Maps have a different purpose than Array, just like a clock has a different purpose than the number 3. Maps can be thought of as that bank with lockers, whereas arrays can be thought of a basket full of your items, which given a position in the basket. So, when would you want that bank over the baskets? Well, take a simple problem where you want to convert a Roman Numeral to a decimal integer. Almost all solutions use some type of a Map, because they want to map the roman numeral characters to our decimal digits, hence the name Map. They want an efficient table of values where you say... "Okay, I want to get the value 1 when 'I' is detected in my roman string. " Arrays are for collecting only values, while Maps collect pairs of keys and values.

**IMPORTANT: a common misconception that many believe is that arrays are just maps in disguise, because it looks like that. Allow me to explain. Arrays have indices that point to their values, but this looks like arrays are maps where the keys are the indices and the values are the values. THIS IS NOT TRUE. They are not maps, because they do not map the indices to the values. They indices are used to point to their corresponding values, for getting this value when the index is put in the square brackets. This topic is heavily related to pointers, which does not really come much into JavaScript, but here is some info. Hope I clarified all your question well.

Answer 2

Sets, Maps and Arrays use different methods, because these methods do different things. Array.prototype.push() adds one or more elements to the end of the array. Set.prototype.add() works similarly, but it only accepts one argument. If it was named push(), some people would think that it works the same as the array method, and they'd try doing set.push(1, 2, 3) and they'd be confused why it adds only the first element.

Map.prototype.set() is a completely different thing. From MDN:

The set() method adds or updates an element with a specified key and value to a Map object.

If an element with a specified key already exists, this method doesn't add any element to the Map, but only updates the value of that element.

You second question was answered on this blog:

length is for sequences, data structures that are indexable – like arrays. size is for collections that are primarily unordered – like maps and sets.

I don't really understand your third question. Maps and Arrays are completely different data structures. Maps are similar to objects, see Maps vs Objects in ES6, When to use?