I loved JavaScript even when the world hated it. But I’ve always had a hard time justifying the collection. Object is a kind of key-value store, but not really. And they were terrible if you needed to sort or loop. Arrays were easy to loop through, but clunky if you needed to extract a specific value without an index.

The sad truth is that most of the time developers grab whatever they archive in their heads first. Then torture him with proselytism to get what he wants.

it was painful.

Things are different now. There are more collection types. There are other ways. There are better techniques and even one-line expressions for switching between collection types. Then why does it seem that we are still guessing when we choose a collection type?

I speak regularly about JavaScript and code quality. I’ve written books about the new syntax. But I think most developers, even experienced ones, don’t put much thought into their collection choice.

It’s time to end it. Not only do we have Arrays and Objects. We also have Maps, Sets, WeakMaps and WeakSets.

So which should you choose? Every collection has its ups and downs. But in general, there are three big factors influencing your choice:

Iterable: Can you loop over the collection directly and access each member in one go?

Keyed: Can you get a value using a particular key without worrying about other collection members?

Destructive: Can you quickly and easily pull pieces of a collection into variables?

Each collection type is strong in some areas and weak in others. There are other advantages and disadvantages, but these are the big three for most code.

arrays

Arrays are probably the most flexible collection. This makes them a great point to start exploring the collection.

Here is a list of my grad school teachers (names changed to protect the innocent).

The arrays preserve the order which is great because it’s the correct order of my first, second and third grade teachers. Since the order is meaningful and I know its meaning, I can use destructuring to pull the objects into variables.

Destructuring is a quick way to pull information from a collection into separate variables. It can also form subsets of information. The variableFirstGrade contains the value of Cooper.

The next variable is the second grade Sims. The last variable is a bit different, using three pointers… we’re saving the rest of the variable, in this case one, as a separate array. This means that other is also an array: [‘butler’]. In this case, … is a rest pattern. We are saving all the rest values.

Back to my teachers collection. Assuming you don’t care about the order they taught me, you’re more interested in an alphabetical list. Now, before sorting the array, remember, sorting is a mutable function, so the action will change the original array. And since order matters, you don’t want to make permanent changes. Fortunately, this isn’t a big problem because you can create a new array with the spread operator: […myTeachers] .

The reason we use the spread operator is because arrays have a built-in iterator that allows you to operate on a collection at a time. In other words, arrays are iterable. The spread operator takes those items and creates a new list one at a time. Enclosing the whole thing in square brackets creates a new array.

The iterable property is also what lets you do cool stuff using a loop for…of or run a function on each item of the array as you would with the .map and .reduce methods.

Back to sorting. Now that you can create a new array, you don’t have to worry about mutations. The sort function is a one-liner.

Since arrays are destructible and iterable, you can easily extract information or access each item one at a time. Looks great, doesn’t it? Of course, arrays are not perfect. Let’s say you didn’t know the order of the array, but you wanted my second grade teacher.

Now you have a problem. Since arrays don’t have keys, you can’t just extract the information you need. The best you can do is to create a complex array of pairs – an array containing two items – with an array method to find what you want.

Leave a Reply

Your email address will not be published. Required fields are marked *