The Complete Guide to Using Arrays in JavaScript
By: John Au-Yeung
Tags: Array Methods, Arrays, JavaScript, Programming, Loop

Array Properties

Since an array is a JavaScript object. It is its own properties. Like any object in JavaScript, it has the prototype property which lets developers add methods and properties of an array object. The constructor property is the reference to the function that’s created by the array object’s prototype. The length returns the size of the array.

Array Methods

To make manipulating arrays easy, the JavaScript’s standard library contains lots of array methods that make manipulating arrays easy. There are methods to find and filter items, and add and remove items in an array for example. There are also functions to combine multiple arrays into one.

These are some common array methods that you can use to do common operations with arrays.

Array.forEach

forEach will iterate through every entry of the array. You cannot break out of it or return a value from it. It takes a callback function where you can execute code.

Example:

const array = [1,2,3];

array.forEach(a =>{ console.log(a);

})

In the above example, all the numbers in the array will be logged.

Array.find

Array.find will return the element in the array with the given condition. For example, if you want to get certain numbers from the array, you do this:

const array = [1,2,3];

const num = array.find(a => a == 2); // returns 2

find returns a single result.

Array.findIndex

Array.findIndex will return the index of the element in the array with the given condition. It takes a callback function that returns a given condition. For example, if you want to get the index of a certain number from the array, you do this:

const array = [1,2,3];

const num = array.findIndex(a => a == 2); // returns 1

Array.filter

Array.filter will return an array of items that meet the given condition. It takes a callback function that returns a given condition. filter returns a new array.

For example, if you want to get the index of a certain number from the array, you do:

const array = [1,2,3];

const numArray = array.filter(a => a == 2); // returns [2]

Array.includes

Array.includes checks if an item exists in an array. It takes a number or string which the function can compare.

const array = [1,2,3];

const includesTwo = array.includes(2); // returns true

Array.some

Array.some checks if some items meet the condition given. It takes a callback function which returns a boolean for the condition.

const array = [1,2,3];

const includesTwo = array.some(a => a == 2); // returns true

const includesFive = array.some(a => a == 5); // returns false

Array.every

Array.every checks if every item meets the condition given. It takes a callback function which returns a boolean for the condition.

const array = [1,2,3];

const everyElementIsTwo = array.every(a => a == 2); // returns false

const everyElementIsNumber = array.every(a => typeof a == 'number'); // returns true since every item in the array is a number

Array.isArray

Array.isArray checks if an object given is an array. It is a convenient way to check if an element is an array.

const array = [1,2,3];const notArray = {};

let objIsArray = Array.isArray(array); // true

objIsArray = Array.isArray(notArray); // false

Array.from(new Set(array))

Set is an object that cannot have duplicate entries. You can create a new Set from an array then convert it back to an array.

const array = [1,2,2,3];

const arrayWithDups = Array.from(new Set(array)); //returns new array without duplicates, [1,2,3]

Array.slice(startIndex, endIndex)

Returns a new array from startIndex to endIndex — 1 .

Example:

const arr = [1,2,3,4,5];

const newArr = arr.slice(0,2);

console.log(newArr); // returns [1,2]

Array.splice(index, numberOfItems)

Remove array item in place with the given index , and then numberOfItems after it.

For example:

const arr = [1,2,3,4,5];

arr.splice(0,2);

console.log(arr); // returns [3, 4, 5] since we specified that we remove item located at index 0 and 2 items after that.

Array.sort(sortFunction)

Array.sort sorts array in place according to the condition you return in sortFunction .

The sortFunction should be in this format:

const sortFunction = (a, b) {

if (a < b) {

return -1;

}

if (a > b) {

return 1;

}

// a must be equal to b

return 0;

}

By default, if no sortFunction is specified, then the array items will be converted to a string and will be sorted according to the Unicode value of the string.

Array.fill(newElement, startIndex, endIndex)

Array.fill will add or replace the element with the element specified from startIndex to endIndex . If no startIndex is defined then it will start from 0. If no endIndex is defined, then it will change values up to the end of the array.

For example:

let array = [1, 2, 3, 4, 5];console.log(array.fill(0, 2, 4));

// array is now [1, 2, 0, 0, 0]console.log(array.fill(5, 1));

// array is now [1, 5, 5, 5, 5]console.log(array.fill(6));

// array is now [6, 6, 6, 6, 6]

Recursively Flatten Array

Array.flat function does not do a good job of recursively flatten arrays. The depth is limited and it does not flatten all kinds of nested array structures. The better way to do it is to write a recursive function to do it.

let arr1 = [1, 2, [3, 4], 5];

let arr2 = [1, 2, [3, 4], [5, [6,[7,]]]];const flatten = (items) => {

const flat = []; items.forEach(item => {

if (Array.isArray(item)) {

flat.push(...flatten(item));

} else {

flat.push(item);

}

}); return flat;

}console.log(flatten(arr1));

console.log(flatten(arr2));

Array.join(separator)

Array.join will return a string by concatenating the entries after they are converted to string with separator between each entry. Works best with string and number arrays.

Example:

const arr = [1,2,3];

console.log(arr.join(',')) // get '1,2,3'const arr = ['1',2,3];

console.log(arr.join(',')) // get '1,2,3'

Array.indexOf(elementToFind)

Array.indexOf will return the first index of the elementToFind in the array. Works best with string and number arrays. If you want to find a non-string or number object, use Array.findIndex . Returns -1 is element is not found.

Example:

const arr = [1,2,3];

console.log(arr.indexOf(1)); // returns 0const arr2 = [1,1,2,3];

console.log(arr2.indexOf(1)) // still 0

Array.lastIndexOf()

Array.lastIndexOf will return the last index of the elementToFind in the array. Works best with string and number arrays. Returns -1 is element is not found. The function also takes a starting index to start searching backward as a second parameter

Example:

const arr = [1,2,3];

console.log(arr.indexOf(1)); // returns 0const arr2 = [1,1,2,3];

console.log(arr2.indexOf(1)) // returns 1const arr3 = [3,1,2,3]

console.log(arr3.lastIndexOf(3, 2)) // returns 0, start searching backwards from index 2

Array.push(newElement)

Array.push adds a new element to an array.

Example:

let arr = [1,2,3];

arr.push(4);

console.log(arr) // [1,2,3,4]

Array.pop()

Array.pop removes the last element of the array.

Example:

let arr = [1,2,3,4];

arr.pop();

console.log(arr) // [1,2,3]

Array.map(mapFunction)

Array.map returns a new array which transforms the existing array’s element by calling the mapFunction . mapFunction takes one argument, which is the array element.

Example:

let arr = [1,2,3,4];

const newArr = arr.map(a=>a*2)

console.log(newArr) // [2,4,6,8]

Array.reduce(reduceFunction)

Array.reduce combines elements of an array to return a value by calling the reduceFunction on all the elements to combine them. reduceFunction takes two arguments, which is the current and next element in the array.

Example:

const arr = [1,2,3,4];

const sum = arr.reduce((a,b)=>a+b);

console.log(sum); // returns 10

Array.reverse()

Array.reverse returns a new array with the existing array’s elements in reverse order.

Example:

const arr = [1,2,3,4];

console.log(arr.reverse()) // [4,3,2,1]

Now that we learned about arrays, we can do a lot more in our JavaScript programs. There’s a big world ahead of us!