JavaScript Best Practices — Arrays
Tags: javascript, codenewbie, codequality, webdev
Published: 2020-07-18 21:10:01

---
title: JavaScript Best Practices — Arrays
published: true
date: 2020-07-18 20:12:43 UTC
tags: javascript,codenewbie,codequality,webdev
canonical_url: https://thewebdev.info/2020/07/18/javascript-best-practices%e2%80%8a-%e2%80%8aarrays/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-best-practices%25e2%2580%258a-%25e2%2580%258aarrays
---

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](https://thewebdev.info/2020/07/18/javascript-best-practices%e2%80%8a-%e2%80%8aarrays/) appeared first on [The Web Dev](https://thewebdev.info).