Today I spent a few time investigating on arrays, and I found some interesting points, more specifically on which is the best way to get an item by its unique key.

Mocking up some data

To begin, I wrote some utility functions. The first was used to generate an array of N objects having only two properties, id and content. I wanted to have something like this:

[

{

id: "key0",

content: "I ate pizza 0 times"

},

{

id: "key1",

content: "I ate pizza 1 times"

},

{

id: "key2",

content: "I ate pizza 2 times"

},

...

]

Then I needed another array, this time containing N random ids of objects to find, to use as test cases. So, the second utility function was used to return something similar to this:

["key284", "key958", "key23", "key625", "key83", "key9", ... ]

Once got the source array and the random keys of items to get, let’s see who is involved in this game, analyzing different approaches.

Many ways for doing the same thing

Each one of the functions we’ll see ran with 10,000 iterations (10,000 random keys to find in an array of 10,000 objects).

To simplify, I didn’t perform any null check to see whether an object with a specific id does not exist. In this case, since we crafted our mock-up data using the utility functions, each id in the random list of keys will always match an object in the source array.

I ran the functions in a node environment (also I did it in Chrome, getting more or less the same result). To measure the time taken by each block, I used performance.now() and registered t1 and t2, respectively before and after running the function. Total time taken in milliseconds would be given by t2 — t1 .

Native for loop

Old but gold. This approach consists in looping our array and checking, for each element, whether its id corresponds with the one we’re looking for.

Native while loop

Same logic used before, but this time inside a while loop.

Link to snippet

for…in

Even though it’s considered bad to use this syntax to iterate arrays, I wanted to involve it anyway, I think it has curious points to discuss.

Link to snippet

for…of

This simply iterates over array elements. Moreover, its syntax is clean and straightforward. Personally, I really like it.

Link to snippet

.forEach()

Also here we check, forEach element, if it has the id we’re looking for. When it does, we assign it to a variable that we return in the end.

Note: see why we don’t early return the item once found as we do in the for loop.

Link to snippet

.map() and .indexOf()

With .map() we first transform the source array into an array of string ids, then we use .indexOf() to find the index of the id we’re looking for. Since items in the source array and the ids in the transformed one have the same order, we can just use that index to access our item.

Link to snippet

.filter() and get first

Here we use .filter() to have an array containing only items matching the condition item.id === id . Then, we just return the first matching element, accessing it using 0 as the index.

Link to snippet

.find()

This method takes a function as input where we can set a condition, like as we do with .filter(), and it returns the first element which matches it. This is the shortest syntax we can use to achieve our purpose.

Link to snippet

.findIndex()

Pretty similar to the one above, but it returns the index of the matching element. Then we can use that index to access our item.