Handy JavaScript Array Tips

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

Even more articles at http://thewebdev.info/

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:

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:

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:

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:

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:

[  
  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:

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 :

[  
  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:

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 :

[  
  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:

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

Then we get:

[  
  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:

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:

[  
  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:

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 :

[  
  "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.

Comments

[S3RG1096]

Okay, so i have a task to find the sum of the members of even numbers in an array that are >0 . How can I form the code in js?

[John Au-Yeung]

You can use the filter method.

This means you write something like:

arr.filter(x => x % 2 === 0).reduce((a, b) => a + b, 0)

where arr is your array of numbers.