Introduction

Today’s JavaScript offers a host of methods for working with arrays, both on the prototype and static utility functions. In this article, we will look at the usage of both.

Static Methods

Let’s look at static methods first, which are utility functions on the Array object.

Array.isArray()

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

Array.isArray() determines whether a passed value is an array, returning a boolean value. Pretty straightforward:

Examples:

Array.isArray(['Great', 'Awesome']) // true
Array.isArray('not an array') // false

Array.from()

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from() creates a new, shallow-copied instance from an “array-like” or iterable object.

“Array-like” means objects with a length property and indexed elements. Iterable objects are objects such as Map and Set.

Examples:

Array.from('hasLength'); // ['h','a','s','L','e','n','g','t','h']
Array.from(new Set('foo', 'bar')) // ['foo', 'bar']

Array.from() also provides an optional mapping parameter:

Array.from([1, 2, 3], x => x + x); // [2, 4, 6]

Array.of()

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of

Array.of() creates a new Array instance from a variable number of arguments, regardless of type.

Examples:

Array.of(42) // [42]
Array.of('This', 'really', 'works') // ['This','really','works']

Prototype Methods

When you create an array, you get back an object that inherits from Array. As a result, the array has helpful methods. These are the Array.prototype methods.

Array.prototype.forEach()

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

The forEach() method executes the callback function provided one time for each array element.

Example:

const elements = [1, 2, 3];
elements.forEach(element => console.log(element));

// 1
// 2
// 3

It is important to note that forEach() expects a synchronous function, and will not wait for promises. for..of statements can be used asychronously.

Array.prototype.map()

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

The map() method creates a new array with the results of calling a callback function provided on every element of the array.

Example:

const items = [1, 2, 3, 4];
const mapped = items.map(x => x + 1);

console.log(mapped) // [2, 3, 4, 5]

It should be noted explicitly that map() creates a new array.

Array.prototype.filter()

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

The filter() method creates a new array with all elements that pass the test implemented by the callback function.

Example:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = numbers.filter(number => number > 5);

console.log(result);
// [6, 7, 8, 9, 10]

As you can see above, a new array is created with the elements that pass the test. If no elements pass the test, an empty array will be returned.

Array.prototype.find()

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

The find() returns the first element of the provided array that matches the condition of the callback function. If no elements are found, undefined is returned.

Example:

const people = ['Erik', 'Nancy', 'Analisa', 'Charlotte'];
const found = people.find(person => person === 'Analisa');

console.log(found);
// Analisa

Array.prototype.findIndex()

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

Related to the find(), instead findIndex() returns the index of the first element of the provided array. If no elements are found, it returns -1.

Example:

const numbers = [2, 12, 13, 23, 45, 96];
const found = numbers.findIndex(number => number > 12);

console.log(found);
console.log(numbers[2]);
// 2
// 13

Array.prototype.includes()

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

The includes() method determines whether a certain value is included in the given array, and returns true or false as appropriate.

Example:

const numbers = [1, 3, 5, 8, 13];
console.log(numbers.includes(3));
// true

const names = ['Mike', 'Brad', 'George'];
console.log(names.includes('Mike'));
// true

It should be noted that includes() is case-sensitive when comparing strings.

Array.prototype.reduce()

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

The reduce() method reduces a given array to a single value using a user-supplied “reducer” callback function on each element of the array. An initial value can be supplied. Otherwise, the first element is used as the initial value.

Example:

const numbers = [1, 2, 3, 4];
const initial = 10;
const reducer = (previous, current) => previous + current;

// 10 + 1 + 2 + 3 + 4
console.log(numbers.reduce(reducer, initial));

// 20

Array.prototype.concat()

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

Returning a new array, the concat() method merges two or more arrays.

Example:

const abc = ['a', 'b', 'c'];
const def = ['d', 'e', 'f'];
const ghi = ['g', 'h', 'i'];

const concatted = abc.concat(def, ghi);
console.log(concatted);

// ["a", "b", "c", "d", "e", "f", "g", "h", "i"]