JS Performance: Perhaps We Shouldn't Always Use Arrays

I love maps! I have often found myself getting pushed to use arrays despite my preferences by frameworks/libraries I am using or the simple convenience of being able to use .forEach(), .map(), etc.

At least In ES6-land we also finally have an actual Map object which gives us the ability to iterate over entries, easy size determination, using things other than strings as keys... probably other goodies.

const catsMap = new Map([
  ['Aeris', { name: 'Aeris', isFavourite: true }],
  ['Juri', { name: 'Juri' }],
  ['Dante', { name: 'Dante' }],
  ['Frankenstein', { name: 'Frankenstein' }],
  ['Aeris', { name: 'Aeris' }],
])

const findMyCat =
    requestedCat => catsMap.get(requestedCat)

console.log(findMyCat('Dante'))
console.log(findMyCat('Marmalade'))

If you love exploring the new data structures in Javascript, there is a less talked version called WeakMap (also WeakSet). I recently wrote an article on their practical usage dev.to/kepta/javascript-underdogs-...

Thanks for this nice-to-read article and +1 for adding 100% accurate cat samples! There is just one performance problem: If your cats look too similar, you might have to look at more than one (which goes for cats in the house as well as in maps)

In most languages, I'd argue that you should only use a map if you're looking up many times using the same map object, since you have to pay the upfront cost of hashing the keys. But, in JavaScript, arrays are just hash tables with a length attribute; the indices are converted to strings and hashed anyway. So, in JS, there's little reason not to use maps all the time when you have unique string keys.

There is often a case where I have multiple indexes, so I end up doing something like this:

const cats = [
  { name: "Aeris", id: 0x00, isFavourite: true },
  { name: "Juri", id: 0x01 },
  { name: "Dante", id: 0x03 },
  { name: "Frankenstein", id: 0xff }
]
const byName = new Map()
const byId = new Map()
for (const cat of cats) {
  byName.set(cat.name, cat)
  byId.set(cat.id, cat)
}

If this wasn't as common, I'd probably investigate making a function that takes a predicate and an array and makes an iterator of entries that new Map() can consume.
But like this, I only iterate once to populate multiple Maps.

Plus there's the cases where I receive an object (including from JSON), so normal iteration wouldn't work:

const cats = {
  Aeris: { id: 0x00, isFavourite: true },
  Juri: { id: 0x01 },
  Dante: { id: 0x03 },
  Frankenstein: { id: 0xff }
}
const byName = new Map()
const byId = new Map()
for (const name of Object.keys(cats)) {
  const cat = { name, ...cats[name] }
  byName.set(name, cat)
  byId.set(cat.id, cat)
}

Most of the times choosing the right data structure is crucial to ones application. Maps and Arrays both have places where one is favoured over the other.

For Map

• I choose map when I want to iterate over a collection and also want to look up directly using a unique ID. It sorta works like a regular object, with added powers of being able to iterate efficiently and keys can be of any data type.
• Maps are much more efficient when you have to do a lot of read and writes. Last I read, an array with holes (deleting values in between) gets deoptimized into an object.

For Array

• Maps even though good at iteration, can never be faster than a plain array when it comes to iteration.
• Arrays are great when you want a data structure which has a continuous range of number indices. For eg array[4]; or array[10000].
• With arrays you get loads of functional helper methods (.map, .reduce, .every, .some, .reduce, etc), but with Map you do not! If you find yourself implementing them, you should rethink about using Map in the first place.
• Arrays are great when you have a one to many data structure. In your example what if there are 2 or more Aeries?
• Maps and other complex data structure are hard to JSON.stringify (serialise). To serialise them, you end up converting them into an array of tuples. If you frequently have to serialise your data structure, you should be careful before using Maps.
• Maps do not play well when you want to enforce immutability as the native API is not really written keeping immutability in mind. But with Arrays you can use Object.freeze or use .concat. If you want your data structure to be a Map (dictionary), Immutable.js is a good place to look at.

thepracticaldev.s3.amazonaws.com/i...
Just to underline your point with some fancy numbers. I wrote this jsperf test on my way to work on my phone. 😅

This is great, I'm always reaching for arrays because they are easy and my datasets are typically pretty small, but I have been wanting to get better at utilizing maps, especially with the ES6 update.

You could also try Sets for this example 😁