Arrays are one of the most used data structures in JavaScript. In this article, we explore built-in array methods in JavaScript.
filter
The filter() method creates a new array with all elements that satisfies a given condition. The filter() does not change the original array.
const numbers = [8, 5, 11,16];
const filteredNumbers = numbers.filter(number => number > 10) // [11,16]
map
The map() method creates new array by calling a function on every element of original array. It changes the original array.
const numbers = [1,4,16,25,49]
const squaredNumbers = numbers.map((number) => Math.sqrt(number)) // [1,2,4,5,7]
reduce
The reduce() reduces original array to a single value by calling a reducer function. It does not change the original array.
const numbers = [0, 1, 3, 5, 8, 14];
const sum = numbers.reduce((accumulator, item) => accumulator + item); //31
find
The find() methods returns the first element in an array that satisfy the given condition. If no value satisfy the provided condition, undefined will be returned. The find() method does not change the original array.
const numbers = [8, 5, 11,16];
const result = numbers.filter(number => number > 10) // "11"
pop
The pop() method removes the last element of a given array and returns the element. The pop() method changes the original array.
const numbers = [2,3,7,8,9,11,12]
const removedNumber = numbers.pop(); //12
shift
The shift() method removes the first element of an array and returns the removed element. It changes the original array.
const numbers = [2,3,7,8,9,11,12]
const firstElement = numbers.shift() // 2
push
The push() method add one or more elements to the end of an array and returns the new length of the array. It changes the original array.
const numbers = [2,3,7,8,9,11,12]
const numbersLength = numbers.push(17,22)
console.log(numbersLength) // Prints "9"
unshift
The unshift() method adds one or more element to the beginning of an array and return the new length of the array.
const numbers = [2,3,7,8,9,11,12]
const numbersLength = numbers.unshift(17,22)
console.log(numbersLength) // Prints "9"
includes
The includes() method checks if a certain value is among array elements and returns false or true. When comparing strings and characters, includes() is case-sensitive.
[0, 1, 2, 5, 8, 10].includes(2) // true
If provided with a specific index, it searches from that index and ignores previous indexes.
[0, 1, 2, 5, 8, 10].includes(2, 3) // false
forEach
The forEach() methods execute a function on every element of an array.
const numbers = [3,7,6]
number.forEach((number,index) => {
console.log(number, index) // Prints "0" "3" "1" "7" "2" "6"
})
slice
The slice() method return a new array from the original array from start to end (end is not included), where start and end are index of items in that array. The original array will not be modified.
Syntax
slice(start, end)
start and end are both optional. If start is omitted or undefined, slice starts from index 0. If end is omitted or undefined, slice extracts through the end of the array.
const numbers = [2,3,7,8,9,11,12]
const slicedNumbers = numbers.slice(2,5) // slicedNumbers [7,8,9]
splice
The splice() method has three applications:
- Deleting elements from an array
- Adding elements to an array
- Replacing elements in an array
The splice() method changes the original array.
const numbers = [2,3,7,8,9,11,12]
const deletedNumbers = numbers.splice(0,2)
// numbers [7,8,9,11,12]
// deletedNumbers [2,3]
const numbers = [2,3,7,8,9,11,12]
const addedNumber = numbers.splice(2,0,25)
// numbers [2,3,25,7,8,9,11,12]
const numbers = [2,3,7,8,9,11,12]
const addedNumber = numbers.splice(2,1,25)
// numbers [2,3,25,8,9,11,12]
indexOf
The indexOf() method searches for an element and returns its position. If not found. it returns -1. The indexOf() method uses strict equality to compare given value to elements of array.
const numbers = [2,3,7,8,9,11,12]
numbers.indexOf(8) // 3
numbers.indexOf(17) // -1
concat
The concat() method merges two or more arrays and returns a new array. The concat() method does not change original arrays.
const array1 = [0,1,2]
const array2 = [3,4,5]
const numbers = array1.concat(array2)
console.log(numbers) // Output [0,1,2,3,4,5]
sort
The sort() methods sorts elements of an array. It changes the original array. The default sort order is ascending.
const numbers = [3,1,2,0]
numbers.sort() // numbers [0,1,2,3]
reverse
The reverse() method reverses the order of elements in an array. It changes the original array.
const numbers = [0,1,2,3]
const reversedNumber = numbers.reverse()
//reversedNumbers [3,1,2,0]
join
The join() method creates a new string by concatenating all elements of an array and returns that string. The default separator is comma (,), but it can be anything. If the given array has only one element, that element will be returned without any separators.
const numbers = [1,2,3,4]
numbers.join() // '1,2,3,4'
numbers.join(", ") // '1, 2, 3, 4'
numbers.join("") // '1234'
toString
The toString() methods converts an array to string and returns the result. It does not change the original array.
const numbers = [2,3,7,8,9,11,12]
const result = numbers.toString()
//result "2,3,7,8,9,11,12"
some
The some() method checks whether at least one element of array passes provided test and returns true. If nothing found, it returns false. It does not change original array.
[2,3,7,8,9,11,12].some((x) => x > 30) // false
[2,3,7,8,9,11,12].some((x) => x > 10) //true
every
The every() method tests whether all elements of an array pass the provided test. It does not modify the original array.
[7,7,7].every(num => num === 5) //true
fill
The fill() method converts all elements of an array to a static value. You can define start and end for the part of array you want to change. It modifies the original array.
[1,2,3,4].fill(7) // [7,7,7,7]
[1,2,3,4].fill(7, 1) // [1,7,7,7]
findIndex
The findIndex() method returns the index of the first element in an array that satisfy the provided criteria. If nothing found, -1 will be returned.
const numbers = [2,3,7,8,9,11,12]
const result = numbers.findIndex(8)
// result "3"