Array prototype methods

In this post, you will find useful JavaScript array methods and some examples on how to use them. In the title I mention array prototype methods instead of array methods; let me explain a bit where this comes from.

You can create an array with the bracket syntax: const arr = [1, 2, 3] or with the Array constructor: const arr = new Array(1, 2, 3). No matter what method you choose, you will get back an object that inherits from the Array. As a result, this object (or this array) will have some handy methods you can use to change the contents of the array or get back an answer. Those are the Array.prototype methods.

The goal of this post is to list as many methods as possible, in the least possible space. It’s not meant to be an extensive reference. If you want to learn more about a method, check the links to the MDN documentation.

Methods that modify the array

Use these on the arguments of a function if you want to trigger people that like functional programming.

1. fill()

arr.fill(value, start = 0, end = arr.length)

Fills the array with the given value from start to end index (end not included). Array.prototype.fill().

// .fill(value, start, end)
[1, 2, 3].fill(0); // [0, 0, 0]
new Array(5).fill(1); // [1, 1, 1, 1, 1]
[1, 2, 3].fill(5, 1); // [1, 5, 5]
[1, 2, 3, 4].fill(5, 1, 3); // [1, 5, 5, 4]Copy

2. reverse()

arr.reverse()

Reverses the array. Array.prototype.reverse().

[1, 2, 3].reverse(); // [3, 2, 1]Copy

3. pop()

arr.pop()

Removes the last element. Array.prototype.pop()

[1, 2, 3].pop(); // [1, 2], returns the removed element: 3Copy

4. shift()

arr.shift()

Removes the first element. Array.prototype.shift()

[1, 2, 3].shift(); // [2, 3], returns 1Copy

5. push()

arr.push(elementN)

Adds the given elements at end of the array. Array.prototype.push()

// .push(element1, ...)
[1, 2, 3].push(4, 5); // [1, 2, 3, 4, 5], returns the new length: 5
[1, 2, 3].push(4); // [1, 2, 3, 4], returns 4Copy

6. unshift()

arr.unshift(elementN)

Adds the given elements at start of the array. Array.prototype.unshift()

// .unshift(element1, ...)
[1, 2, 3].unshift(4, 5); // [4, 5, 1, 2, 3], returns 5 (new length)
[1, 2, 3].unshift(4); // [4, 1, 2, 3], returns 4Copy

7. sort()

arr.sort(compareFunction)

Sorts the array. TODO. Array.prototype.sort()

8. splice()

arr.splice(start, deleteCount = all from start, elementNToAdd)

Can delete and add elements in the array at the same time. Returns the deleted items. Array.prototype.splice()

// .splice(start, deleteCount, element1, ...)
[1, 2, 3].splice(1); // only delete: [1], returns [2, 3]
[1, 2, 3].splice(0, 2); // only delete: [3], returns [1, 2]
[1, 2, 3].splice(2, 0, 4, 5); // only add: [1, 2, 4, 5, 3], returns []
[1, 2, 3].splice(3, 0, 4, 5); // only add: [1, 2, 3, 4, 5], returns []
[1, 2, 3].splice(1, 2, "two", "three"); // delete and add: [1, "two", "three"], returns [2, 3]
[1, 2, 3].splice(1, 99, "two", "three"); // delete and add: [1, "two", "three"], returns [2, 3]Copy

All the mutator methods.

Methods that do not modify the array

These methods return a new array/result without modifying the initial array.

1. concat()

arr.concat(valueN)

Merge two or more arrays into a new array. Array.prototype.concat()

[1, 2].concat([3, 4]); // [1, 2, 3, 4]
[1, 2].concat(3, 4); // [1, 2, 3, 4]
[1, 2].concat(3); // [1, 2, 3]
[1, 2].concat([3, 4], [5, 6]); // [1, 2, 3, 4, 5, 6]Copy

2. join()

.join(separator)

Join array items into a string. Array.prototype.join()

[1, 2, 3].join(); // "1,2,3"
[1, 2, 3].join(""); // "123"
[1, 2, 3].join(" - "); // "1 - 2 - 3"Copy

3. slice()

slice(start = 0, end = array.length)

Return a portion of the array from start to end index (end not included). Array.prototype.slice()

[1, 2, 3, 4, 5].slice(2); // [3, 4, 5]
[1, 2, 3, 4, 5].slice(2, 4); // [3, 4]
[1, 2, 3, 4, 5].slice(2, 5); // [3, 4, 5]Copy

4. includes()

arr.includes(element, fromIndex = 0)

See if the array contains the given value. Array.Prototype.includes.

// .includes(value, index)
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3, 4, 5].includes(1, 1); // falseCopy

5. indexOf()

arr.indexOf(element, fromIndex = 0)

Returns the first index of the given element in the array or -1 if it doesn’t exist. Array.prototype.indexOf(). To get the last index of the element, use Array.prototype.lastIndexOf().

[1, 2, 3].indexOf(2); // 1
[1, 2, 3].indexOf(4); // -1
[2, 2, 2].indexOf(2); // 0
[1, 2, 3, 4, 5].indexOf(2, 3); // -1Copy

All the accessor methods

Methods that iterate the array

Methods that iterate the array and call the given function for every element. None of these methods modifies the initial array. The function you pass as a parameter has the following signature: function(element, index, array), although most of the times, you’ll use only the first parameter: function(element). The only exception is the function for the reduce method which has the following signature: function(accumulator, element, index, array).

1. map()

arr.map(callback)

Returns a new array of equal length that contains the transformed elements. Array.Prototype.map()

[1, 2, 3].map((element) => element * 2); // [2, 4, 6]
[1, 2, 3].map((element) => element.toString()); // ["1", "2", "3"]Copy

2. forEach()

arr.forEach(callback)

Iterates an array and calls the given function; it returns undefined. Array.Prototype.forEach()

// 0: 1
// 1: 2
// 2: 3
[1, 2, 3].forEach((element, index) => {
  console.log(`${index}: ${element}`);
});Copy

3. reduce()

arr.reduce(callback, initialValue)

Iterates the array and returns anything you like; a value, a smaller array, or an equal-length array. Use it when no other method in this section can give what you want. Array.Prototype.reduce()

// .reduce(callback, initialValue)
[1, 2, 3].reduce((acc, element) => element + acc, 0); // 6, the sum of the elements
[1, 2, 3].reduce((acc, element) => {
  if (element % 2 === 0) return acc;
  return acc.concat(element);
}, []); // [1, 3], an array with only the even numbers. Although filter is a better fit here.Copy

4. filter()

arr.filter(callback)

Returns a new array that contains the filtered elements. Array.Prototype.filter()

[1, 2, 3].filter((element) => element > 2); // [3]
[1, 2, 3].filter((element) => element % 2 === 0); // [2], 2 is the only even number.
[1, 2, 3].filter((element) => element < 0); // []Copy

5. find()

arr.find(callback)

Returns the first element it finds, or undefined if it doesn’t find anything. Array.Prototype.find()

[1, 2, 3].find((element) => element > 2); // 3
[1, 2, 3].find((element) => element % 2 === 0); // 2, The number 2 is even
[1, 2, 3].find((element) => element % 2 !== 0); // 1, 1 is the first odd number.
[1, 2, 3].find((element) => element < 0); // undefinedCopy

6. every()

arr.every(callback)

Returns true if every element in the array satisfies the check, otherwise, it returns false. Array.Prototype.every()

[1, 2, 3].every((element) => element % 2 !== 0); // false, The array has even numbers too.
[1, 3, 5].every((element) => element % 2 !== 0); // true, The array has only odd numbers.Copy

7. some()

arr.some(callback)

Returns true if it finds at least one element or false otherwise. Array.Prototype.some()

[1, 2, 3].some((element) => element % 2 === 0); // true, Has at least one even number.
[1, 3, 5].some((element) => element % 2 === 0); // false, The array has no even numbers.Copy

All the iteration methods

TODO: Array.prototype.flat(), Array.prototype.flatMap()

Links

• MDN: Array.prototype
• MDN: Array