JavaScript Built-In Array Methods
Table Of Contents
In the previous article, we had a brief introduction to arrays in JavaScript. Today we are going to explore all built-in array methods that are available for use by default. We'll start with the most used ones.
Important note: all examples will contain fat arrow functions instead of function declarations or function expressions:
// Function expression
const multiply = function(x, y) {
return x * y;
};
// Function declaration
function multiply(x, y) {
return x * y;
};
// Fat arrow function
const multiply = (x, y) => {
return x * y;
}
// Shorthand
const multiply = (x, y) => x * y;Methods List
Let's list all built-in methods:
filter
does not change the original array
Creates a new array with all elements that satisfies given condition:
const numbers = [0, 1, 2, 5, 8, 10];
// Return numbers greater than 5
const filteredNumbers = numbers.filter(number => number > 5);
console.log(filteredNumbers); // Prints "[8, 10]"map
does not change the original array
Creates a new array with the result of calling function for each element:
const numbers = [0, 1, 2, 5, 8, 10];
// Multiply each number by 2
const mappedNumbers = numbers.map(number => number * 2);
console.log(mappedNumbers); // Prints [0, 2, 4, 10, 16, 20]find
does not change the original array
Returns the value of the first element in an array that meets the given condition:
const numbers = [0, 1, 2, 5, 8, 10];
// Find the first number smaller than 5
const result = numbers.find(number => number < 5);
console.log(result); // Prints "0"Important note: remember, that find returns the first found element, in order to return all elements that meet the criteria, use filter method.
reduce
does not change the original array
Reduces an array to a single value(going left-to-right):
const numbers = [0, 1, 2, 5, 8, 10];
// Find the sum of numbers array
const sum = numbers.reduce((accumulator, item) => accumulator + item);
console.log(sum); // Prints "26"Important note: in order to reduce an array to a single value going from right-to-left you can use reduceRight function.
push
changes the original array
Adds new elements to the end of an array and returns the new length of an array:
const numbers = [0, 1, 2, 5, 8, 10];
const newLength = numbers.push(20);
console.log(newLength); // Prints "7"
console.log(numbers); // Prints "[0, 1, 2, 5, 8, 10, 20]"pop
changes the original array
Removes the last element of an array and returns it:
const numbers = [0, 1, 2, 5, 8, 10];
const removedNumber = numbers.pop();
console.log(removedNumber); // Prints "10"
console.log(numbers); // Prints "[ 0, 1, 2, 5, 8 ]"unshift
changes the original array
Adds an element to the beginning of an array and returns the new length:
const numbers = [0, 1, 2, 5, 8, 10];
const newLength = numbers.unshift(20);
console.log(newLength); // Prints "7"
console.log(numbers); // Prints "[20, 0, 1, 2, 5, 8, 10]"shift
changes the original array
Removes the first element of an array and returns that element:
const numbers = [0, 1, 2, 5, 8, 10];
const removedNumber = numbers.shift();
console.log(removedNumber); // Prints "0"
console.log(numbers); // Prints "[1, 2, 5, 8, 10]"includes
does not change the original array
Checks if an array contains a specified element:
const numbers = [0, 1, 2, 5, 8, 10];
const result = numbers.includes(10);
console.log(result); // Prints "true"splice
changes the original array
Removes elements from an array and returns deleted elements:
const numbers = [0, 1, 2, 5, 8, 10];
// Remove 2 elemnts, starting from index 0
const deletedElements = numbers.splice(0, 2);
console.log(deletedElements); // Prints "[0, 1]"
console.log(numbers); // Prints "[2, 5, 8, 10]"Adds elements to an array and returns deleted elements(if some were deleted) or an empty array(if no elements were deleted):
const numbers = [0, 1, 2, 5, 8, 10];
// Add 2 elements starting from index 0, do not delete anything
const deletedElements = numbers.splice(0, 0, 60, 80);
console.log(deletedElements); // Prints "[]" as no elements were deleted
console.log(numbers); // Prints "[60, 80, 0, 1, 2, 5, 8, 10]"const numbers = [0, 1, 2, 5, 8, 10];
// Add 2 elements starting from index 0, delete 6 items
const deletedElements = numbers.splice(0, 6, 60, 80);
console.log(deletedElements); // Prins "[0, 1, 2, 5, 8, 10]" as those were deleted
console.log(numbers); // Prints "[60, 80, 0, 1, 2, 5, 8, 10]"forEach
does not change the original array
Calls a function for each element of an array:
const numbers = [10, 20, 30];
numbers.forEach((number, index) => {
console.log(index, number); // Prints "0" "10", "1" "20", "2" "30"
})indexOf
does not change the original array
Searches for an element and returns its position or -1 if not found(goes from left-to-right):
const numbers = [0, 1, 2, 5, 8, 10];
// Search for "5"
const index = numbers.indexOf(5);
console.log(index); // Prints "3"const numbers = [0, 1, 2, 5, 8, 10];
// Search for "100"
const index = numbers.indexOf(100);
console.log(index); // Prints "-1"Important note: in order search for an element going from right-to-left you can use lastIndexOf function.
concat
does not change the original array
Joins two or more arrays and returns a copy of them:
const smallNumbers = [0, 1, 2];
const mediumNumbers = [10, 20, 30];
const bigNumbers = [100, 200, 300];
const result = smallNumbers.concat(mediumNumbers, bigNumbers);
console.log(result); // Prints "[0, 1, 2, 10, 20, 30, 100, 200, 300]"sort
changes the original array
Sorts elements of an array:
const numbers = [2, 0, 1];
// By default sorts numbers in ascending order
numbers.sort();
console.log(numbers); // Prints "[0, 1, 2]"const chars = ["b", "w", "a"];
chars.sort();
console.log(chars); // Prints ["a", "b", "w"]Important note: The sort order can be either alphabetic or numeric, and either ascending (up) or descending (down). By default, sort method sorts the values as strings in alphabetical and ascending order. You can provide compare function to change sort order:
const numbers = [40, 100, 1, 5, 25, 10];
// Sort in descending order
numbers.sort((a, b) => b - a);
console.log(numbers); // Prints "[100, 40, 25, 10, 5, 1]"reverse
changes the original array
Reverses the order of elements in an array:
const numbers = [0, 1, 2, 3, 5];
numbers.reverse();
console.log(numbers); // Prints "[5, 3, 2, 1, 0]"slice
does not change the original array
Returns new array as a part of the original one, sliced using given condition:
const numbers = [0, 1, 2, 3, 5];
// Slice 2 elemnts, starting from index 0
const result = numbers.slice(0, 2);
console.log(result); // Prints "[0, 1]"join
does not change the original array
Joins all array elements into a string:
const numbers = [0, 1, 2, 5, 8, 10];
const result = numbers.join();
console.log(result); // Prints "0,1,2,5,8,10"Important note: you can pass the separator as the only argument of join function and the elements will be separated by it. The default separator is a comma ,.
keys
does not change the original array
Returns Array iterator object, containing keys of the original array:
const numbers = [0, 1, 2, 5, 8, 10];
const keys = numbers.keys();
console.log(keys); // Prints "Object [Array Iterator] {}"Important note: to access each key, just iterate through returned value:
const numbers = [0, 1, 2, 5, 8, 10];
const keys = numbers.keys();
for (const key of keys) {
console.log(key); // Prints "0", "1", "2", "3", "4", "5"
}toString
does not change the original array
Converts an array to string and returns the result:
const numbers = [0, 1, 2, 5, 8, 10];
const result = numbers.toString();
console.log(result); // Prints "0,1,2,5,8,10"isArray
does not change the original array
Checks if an object is an array. Returns true if array, false if not:
const numbers = [0, 1, 2, 5, 8, 10];
console.log(Array.isArray(numbers)); // Prints "true"some
does not change the original array
Checks if any of the array elements meet the specified criteria. Returns true if finds at least one match, otherwise returns false:
const numbers = [0, 1, 2, 5, 8, 10];
// Check if at least one array element equals 5
const result = numbers.some(number => number === 5);
console.log(result); // Prints "true"every
does not change the original array
Checks if every element in an array meets the specified criteria:
const numbers = [5, 5, 5];
// Check if every item in array is equal to 5
const result = numbers.every(number => number === 5);
console.log(result); // Prints "true"entries
does not change the original array
Returns key/value pair Array Iteration Object:
const array = ["John", "Andrew", "Mike"];
const entries = array.entries();
for(const entry of entries) {
console.log(entry); // Prints [0, "John"], [1, "Andrew"], [2, "Mike"]
}fill
changes the original array
Fills elements in an array with a static value:
const numbers = [0, 1, 2];
numbers.fill(10);
console.log(numbers); // Prints "[10, 10, 10]"Important note: you can specify the start and end position of elements that should be filled. If not specified, all elements will be filled:
const numbers = [0, 1, 2, 3, 5, 8];
// Start from 2-nd and fill till the 6-th element
numbers.fill(10, 2, 6);
console.log(numbers); // Prints "[0, 1, 10, 10, 10, 10]"from
Creates an array from any object with a length property or an iterable object:
const letters = Array.from("abcd");
console.log(letters); // Prints ["a", "b", "c", "d"]valueOf
does not change the original array
It is a default method of the Array that returns all the items in the same array:
const numbers = [0, 1, 2, 3, 5, 8]
const result = numbers.valueOf();
console.log(result); // Prints "[0, 1, 2, 3, 5, 8]"findIndex
does not change the original array
Returns the index of the first element in an array that meets the specified criteria or -1:
const numbers = [0, 1, 2, 3, 5, 8]
const result = numbers.findIndex(item => item === 5);
console.log(result); // Prints "4"copyWithin
changes the original array
Copies array elements within the array, to and from specified positions:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
// (insert position, start position, end position)
numbers.copyWithin(3, 1, 3);
console.log(numbers); // Prints "[1, 2, 3, 2, 3, 6, 7, 8]"Summary
We have just covered basic built-in array methods, so you should understand how they work and how to use them.
It's not necessary to learn them by heart, you can always refer to documentation in order to find some implementation details.