As a JavaScript developer, you are likely to work with arrays quite often. JavaScript arrays are a versatile data structure that allows you to store and manipulate collections of data. With the help of various array methods, you can easily perform common operations such as adding or removing elements, sorting arrays, and more.
In this post, we will cover all the JavaScript array methods that you need to know. We will provide a brief description of each method along with some code examples to help you better understand their usage.
For a more interactive example with video tutorials try this out
Here are 20 JavaScript Array Methods that you need to know.
push() method
The push() method adds one or more elements to the end of an array and returns the new length of the array.
const arr = ['apple', 'banana', 'orange'];
arr.push('grape');
console.log(arr); // ['apple', 'banana', 'orange', 'grape']
pop()
The pop() method removes the last element from an array and returns that element.
const arr = ['apple', 'banana', 'orange'];
const lastElement = arr.pop();
console.log(lastElement); // 'orange'
console.log(arr); // ['apple', 'banana']
shift()
The shift() method removes the first element from an array and returns that element. This also changes the length of the array.
const arr = ['apple', 'banana', 'orange'];
const firstElement = arr.shift();
console.log(firstElement); // 'apple'
console.log(arr); // ['banana', 'orange']
unshift()
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
const arr = ['apple', 'banana', 'orange'];
arr.unshift('grape', 'peach');
console.log(arr); // ['grape', 'peach', 'apple', 'banana', 'orange']
concat()
The concat() method combines two or more arrays and returns a new array.
const arr1 = ['apple', 'banana'];
const arr2 = ['orange', 'grape'];
const arr3 = arr1.concat(arr2);
console.log(arr3); // ['apple', 'banana', 'orange', 'grape']
slice()
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).
const arr = ['apple', 'banana', 'orange', 'grape'];
const slicedArr = arr.slice(1, 3);
console.log(slicedArr); // ['banana', 'orange']
splice()
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
const arr = ['apple', 'banana', 'orange', 'grape'];
arr.splice(2, 1, 'pear');
console.log(arr); // ['apple', 'banana', 'pear', 'grape']
indexOf()
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
const arr = ['apple', 'banana', 'orange'];
const index = arr.indexOf('banana');
console.log(index); // 1
lastIndexOf()
The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present.
const arr = ['apple', 'banana', 'orange', 'banana'];
const index = arr.lastIndexOf('banana');
console.log(index); // 3
forEach()
The forEach() method executes a provided function once for each array element.
const numbers = [1, 2, 3];
numbers.forEach((number) => console.log(number));
// 1
// 2
// 3
every()
The every() method tests whether all elements in the array pass the test implemented by the provided function.
const numbers = [2, 4, 6, 8, 10];
const areAllEven = numbers.every((number) => number % 2 === 0);
console.log(areAllEven); // true
some()
The some() method tests whether at least one element in the array passes the test implemented by the provided function.
const numbers = [1, 3, 5, 7, 8];
const hasAnEven = numbers.some((number) => number % 2 === 0);
console.log(hasAnEven); // true
filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // [2, 4]
map()
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
reduce()
The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15
find()
The find() method returns the value of the first element in the array that satisfies the provided testing function.
const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find((number) => number % 2 === 0);
console.log(firstEvenNumber); // 2
includes()
The includes() method determines whether an array includes a certain element, returning true or false as appropriate.
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // true
console.log(numbers.includes(10)); // false
Want to become a web developer ?
Get complete web development courses on HTML, CSS , JavaScript, Bootstrap, Visual Studio Code, Responsive design and much more…