JavaScript Best Practices — Arrays

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we’ll look at the best ways to work with JavaScript arrays

Don’t Use the Array Constructor Most of The Time

If we’re just defining an array with some entries in it, then we shouldn’t use the Array constructor to do it.

Using the Array constructor is longer, and there are also 2 versions of the constructor.

If we call the Array constructor with one argument, then it’ll create an array with the number of empty slots that are given by the number that we passed in.

If we call it with multiple arguments, then we get an array that has the entries that we passed into the arguments with it.

Also, it can be called with or without the new operator.

Therefore, we should just use an array literal to define an array whenever possible.

For instance, instead of writing:

const arr = new Array(1, 2, 3);

We should write:

const arr = [1, 2, 3];

As we can see, the 2nd example is much shorter and does the same thing.

The only exception for using the Array constructor is to fill an array with the same entries.

We can do that with the Array constructor as follows:

const arr = Array(5).fill(1);

Array(5) returns an array with 5 empty slots, and fill(1) fill those slots with 1’s.

Use Array.prototype.push Instead of Direct Assignment to Add Items to An Array

The array’s push instance method always adds an item to the end of the array.

This is much shorter than assigning the item to the last entry of the array with the bracket notation.

Therefore, instead of writing:

const arr = [1, 2];
arr[arr.length] = 3;

We should write:

const arr = [1, 2];
arr.push(3);

As we can see, it’s shorter and easier to use than using the bracket notation since we don’t have to think about array indexes at all when we call push .

Use the Spread Operator to Copy Arrays

The spread operator lets us copy arrays without using loops. It’s good for making a shallow copy of an array.

For instance, instead of using a loop to copy the array’s entries into a new one as follows:

const arr = [1, 2, 3];
const copy = [];
for (const a of arr) {
  copy.push(a);
}

We can write that all in one line as follows:

const arr = [1, 2, 3];
const copy = [...arr]

As we can see, we didn’t need a loop to make a shallow copy of an array. All we have to do is to use the spread operator.

Rather than using a loop to make a copy, we just use the ... operator to do the same thing in a much shorter way.

Use the Spread Operator to Convert Iterable Objects to Arrays Instead of Calling Array.from

The Array.from is good for converting iterable objects into an array. For instance, we can write the following code to convert a NodeList into an iterable object with it:

const ps = document.querySelectorAll('p');
const arr = Array.from(ps);

In the code above, we get all the p elements on a page with the querySelectorAll method and then convert the returned NodeList object to an array with Array.from .

However, we can do that in a shorter way with the spread operator. We can rewrite our code as follows:

const ps = document.querySelectorAll('p');
const arr = [...ps];

It does the same thing, just we type less to do it.

The only case that Array.from is good for is converting non-iterable array-like objects, which are objects with numerical keys and the length property with an integer as its value.

For instance, we can convert them to an array by calling Array.from as follows:

const obj = {
  0: 'a',
  1: 'b',
  length: 2
}
const arr = Array.from(obj);

In the code above, we passed in the obj object with the keys 0 and 1 and the length property with the value 2. Then when we pass it into Array.from , we have the following array returned:

["a", "b"]

Conclusion

We should use array literals to define arrays instead of using the Array constructor to define arrays most of the time.

The spread operator is useful for copying arrays and converting iterable objects to arrays.

The post JavaScript Best Practices — Arrays appeared first on The Web Dev.