Handy JavaScript Array Tips
Tags: webdev, javascript, tutorial, beginners
Published: 2020-01-21 00:43:13

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

JavaScript, like any other programming language, has many handy tricks that let us write our programs more easily. In this article, we will look at how to do different things that involve arrays, like checking if an object is an array and combining arrays.

Check if an object is an Array
==============================

There are multiple ways to check if a JavaScript object or primitive value is an array. The newest way to check is to use the `Array.isArray` method. It takes one argument, which is any object or primitive value that we want to check if it’s an array. It returns `true` if it’s an array and `false` otherwise. However, for `TypedArray` objects like `Int8Array`, `Uint8Array`, `Uint8ClampedArray`, `Int16Array`, `Uint16Array`, `Int32Array`, `Uint32Array`, `Float32Array`, `Float64Array`, `BigInt64Array`, and `BigUint64Array` . It always returns `false` . For example, if we write the following code:

```javascript
console.log(Array.isArray([1, 2, 3]));
console.log(Array.isArray(0));
console.log(Array.isArray(null));
console.log(Array.isArray({
  a: 1
}));
console.log(Array.isArray(undefined));
console.log(Array.isArray(Infinity));
console.log(Array.isArray(new Uint8Array()));
```

We get the following output from the `console.log` statements:

```
true  
false  
false  
false  
false  
false  
false
```

It’s a very handy method for determining if an object is an array. An alternative way to check if an object is an array is to use the `instanceof` operator. It works by checking if `Array.prototype` is on an object’s prototype chain. The only situation that it fails but works when using `Array.isArray` is that `instanceof` will fail when checking objects across frames wince the object instance will likely be different from the one that’s used for the array test with the `instanceof` operator. We can use it as in the following code:

```javascript
console.log([1, 2, 3] instanceof Array);
console.log(0 instanceof Array);
console.log(null instanceof Array);
console.log({
    a: 1
  }
  instanceof Array);
console.log(undefined instanceof Array);
console.log(Infinity instanceof Array);
console.log(new Uint8Array() instanceof Array);
```

The `console.log` output should be exactly the same as the ones before since we didn’t put any objects inside a frame. `Array.isArray` is the simplest and most robust solution since most modern browsers have this method built-in, and that it works across frames.


Combining Arrays
================

With modern JavaScript, combining arrays into one is easier than ever. Array objects have the `concat` method which is called on an array, and takes in one or more arguments, which one or more arrays or objects that we want to combine into the array which it’s being called on. Note that it can also take in other non-array values that we want to pass in to be added into the array that it’s being called on. It returns a new array instance with the new array values so that we chain a series of calls to the `concat` method to combine more arrays into one. For example, we can write the following code for the most basic use case:

```javascript
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const combinedArr = arr1.concat(arr2);
console.log(combinedArr);
```

Then we get that the value of `combinedArr` will be `[1, 2, 3, “a”, “b”, “c”]` . We can also pass in more than one argument each of which are arrays into the `concat` method like in the following code:

```javascript
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = ['1', '2', '3'];
const arr4 = ['d', 'e', 'f'];
const arr5 = ['g', 'h', 'i'];
const arr6 = [null, Infinity, NaN];
const arr7 = [10, 11, 12];
const arr8 = [{}, {
  a: 1
}, {
  b: 2
}];
const combinedArr = arr1.concat(arr2, arr3, arr4, arr5, arr6, arr7, arr8);
console.log(combinedArr);
```

Then we get the following output from the `console.log` output:

```javascript
[
  1,
  2,
  3,
  "a",
  "b",
  "c",
  "1",
  "2",
  "3",
  "d",
  "e",
  "f",
  "g",
  "h",
  "i",
  null,
  null,
  null,
  10,
  11,
  12,
  {},
  {
    "a": 1
  },
  {
    "b": 2
  }
]
```

As we can see, the `concat` method is smart enough to combine multiple arrays into the first array, and that we have all the entries from all the arrays in one new array. The array returned from the `concat` method does not reference the original arrays. Also, it works with multiple types of data. It doesn’t matter what we pass in it, should still work. For example, if we have the following code:

```javascript
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = ['1', '2', '3'];
const arr4 = ['d', 'e', 'f'];
const arr5 = ['g', 'h', 'i'];
const arr6 = [null, Infinity, NaN];
const arr7 = [10, 11, 12];
const arr8 = [{}, {
  a: 1
}, {
  b: 2
}];
const combinedArr = arr1.concat(arr2, arr3, arr4, arr5, arr6, arr7, arr8, 1, 'a', {
  c: 3
});
```

Then we get the following output if we run `console.log` on `combinedArr` :

```javascript
[  
  1,  
  2,  
  3,  
  "a",  
  "b",  
  "c",  
  "1",  
  "2",  
  "3",  
  "d",  
  "e",  
  "f",  
  "g",  
  "h",  
  "i",  
  null,  
  null,  
  null,  
  10,  
  11,  
  12,  
  {},  
  {  
    "a": 1  
  },  
  {  
    "b": 2  
  },  
  1,  
  "a",  
  {  
    "c": 3  
  }  
]
```

This is very useful since don’t have to worry about the data types of the objects that we pass in or how many arguments we passed into the `concat` method. It takes as many arguments as we pass in. Since the `concat` method returns a new array with the values combined into one array, we can also chain the calls of the `concat` method to combine multiple things into a single array-like in the following code:

```javascript
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = ['1', '2', '3'];
const arr4 = ['d', 'e', 'f'];
const arr5 = ['g', 'h', 'i'];
const arr6 = [null, Infinity, NaN];
const arr7 = [10, 11, 12];
const arr8 = [{}, {
  a: 1
}, {
  b: 2
}];
const combinedArr = arr1
  .concat(arr2)
  .concat(arr3)
  .concat(arr4)
  .concat(arr5)
  .concat(arr6)
  .concat(arr7)
  .concat(arr8)
  .concat(1)
  .concat('a', {
    c: 3
  });
```

Then we should get the following out when we run `console.log` on `combinedArr`:

```javascript
[  
  1,  
  2,  
  3,  
  "a",  
  "b",  
  "c",  
  "1",  
  "2",  
  "3",  
  "d",  
  "e",  
  "f",  
  "g",  
  "h",  
  "i",  
  null,  
  null,  
  null,  
  10,  
  11,  
  12,  
  {},  
  {  
    "a": 1  
  },  
  {  
    "b": 2  
  },  
  1,  
  "a",  
  {  
    "c": 3  
  }  
]
```

With ES6, we have the spread operator, which we can use to combine arrays into one by spreading the values of the array into another array, and we can do that for all the arrays in one array separated by a comma after each array is spread. The spread also works with all array-like objects like `arguments`, Sets, Maps, or any object that has a `Symbol.iterator` method, which return a generator so that we can iterate through the items in the object with the `for...of` loop. To combine arrays and objects together into one array with the spread operator, we can write something like the following code:

```javascript
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = ['1', '2', '3'];
const combinedArr = [...arr1, ...arr2, ...arr3];
```

Then we get:

```javascript
[
  1,
  2,
  3,
  "a",
  "b",
  "c",
  "1",
  "2",
  "3"
]
```

when we run `console.log` on `combinedArr` . It also works with overlapping values across different arrays like the `concat` method does. For example, we can write the following code:

```javascript
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = [1, '2', '3'];
const combinedArr = [...arr1, ...arr2, ...arr3];
```

and get that the value of `combinedArr` would be:

```javascript
[  
  1,  
  2,  
  3,  
  "a",  
  "b",  
  "c",  
  1,  
  "2",  
  "3"  
]
```

As we can see, we have the value `1` in both `arr1` and `arr3` , but they both made it into `combinedArr` , which is good. We can also put objects into our new array that before, after or between the spread operations like in the following code:

```javascript
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = [1, '2', '3'];
const combinedArr = ['c', ...arr1, 'c', ...arr2, 'c', ...arr3];
```

Then we get the following value for `combinedArr` :

```javascript
[  
  "c",  
  1,  
  2,  
  3,  
  "c",  
  "a",  
  "b",  
  "c",  
  "c",  
  1,  
  "2",  
  "3"  
]
```

This means that the feature of the `concat` method can easily be replicated by the spread operator, and we don’t have to pass in a long list of arguments or chain multiple calls of the `concat` method together to combine arrays and other types of objects into one array.

There are multiple ways to check if a JavaScript object or primitive value is an array. The newest way to check is to use the `Array.isArray` method, but we can also use the old `instanceof` operator to check if an object is an array. `Array.isArray` works across frames so it’s more robust than the `instanceof` operator. With modern JavaScript, combining arrays into one is easier than ever. Array objects have the `concat` method which is called on an array and takes in one or more arguments, which one or more arrays or objects that we want to combine into the array which it’s being called on. Note that it can also take in other non-array values that we want to pass in to be added into the array that it’s being called on. It returns a new array instance with all the combined values included in the new array.