Table of contents
No headings in the article.
JavaScript provides a variety of built-in array methods that allow you to manipulate arrays efficiently. Here are some of the most commonly used JavaScript array methods:
1. push(): Adds one or more elements to the end of an array and returns the new length of the array.
const fruits = ['apple', 'banana'];
fruits.push('cherry');
// fruits is now ['apple', 'banana', 'cherry']
2. pop(): Removes the last element from an array and returns that element.
const fruits = ['apple', 'banana', 'cherry'];
const lastFruit = fruits.pop(); // lastFruit is 'cherry', fruits is now ['apple', 'banana']
3. shift(): Removes the first element from an array and returns that element.
const fruits = ['apple', 'banana', 'cherry'];
const firstFruit = fruits.shift(); // firstFruit is 'apple', fruits is now ['banana', 'cherry']
4. unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.
const fruits = ['banana', 'cherry'];
fruits.unshift('apple');
// fruits is now ['apple', 'banana', 'cherry']
5. concat(): Combines two or more arrays and returns a new array without modifying the original arrays.
const fruits = ['apple', 'banana'];
const moreFruits = ['cherry', 'orange'];
const allFruits = fruits.concat(moreFruits);
// allFruits is ['apple', 'banana', 'cherry', 'orange']
6. slice(): Returns a portion of an array into a new array. It takes two optional arguments for the start and end positions.
const fruits = ['apple', 'banana', 'cherry', 'orange'];
const selectedFruits = fruits.slice(1, 3); // selectedFruits is ['banana', 'cherry']
7. splice(): Changes the contents of an array by removing, replacing, or adding elements.
const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1, 'orange'); // replaces 'banana' with 'orange'
// fruits is now ['apple', 'orange', 'cherry']
8. forEach(): Executes a provided function once for each array element.
const numbers = [1, 2, 3, 4];
numbers.forEach((number) => {
console.log(number); // Logs each number to the console
});
9. map(): Creates a new array with the results of calling a provided function on each element in the array.
const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((number) => number * number);
// squaredNumbers is [1, 4, 9, 16]
10. filter(): 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);
// evenNumbers is [2, 4]
11. find(): Returns the first element in an array that satisfies a provided testing function. It stops once the element is found.
const numbers = [10, 20, 30, 40, 50];
const found = numbers.find((number) => number > 25); // found is 30
12. findIndex(): Returns the index of the first element in an array that satisfies a provided testing function.
const numbers = [10, 20, 30, 40, 50];
const index = numbers.findIndex((number) => number > 25); // index is 2
13. every(): Tests whether all elements in an array pass a provided function. Returns true
if all elements pass; otherwise, returns false
.
const numbers = [10, 20, 30, 40, 50];
const allGreaterThanFive = numbers.every((number) => number > 5); // true
14. some(): Tests whether at least one element in an array passes a provided function. Returns true
if at least one element passes; otherwise, returns false
.
const numbers = [10, 20, 30, 40, 50];
const someGreaterThanFifty = numbers.some((number) => number > 50); // false
15. reduce(): Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, number) => accumulator + number, 0); // sum is 15
16. reduceRight(): Similar toreduce()
, but process the array from right to left.
const numbers = [1, 2, 3, 4, 5];
const reversedSum = numbers.reduceRight((accumulator, number) => accumulator + number, 0); // reversedSum is 15
17. includes(): Checks if an array contains a specific element and returns true
or false
accordingly.
const numbers = [1, 2, 3, 4, 5];
const hasThree = numbers.includes(3); // true
18. indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not found.
const fruits = ['apple', 'banana', 'cherry', 'banana'];
const indexOfBanana = fruits.indexOf('banana'); // indexOfBanana is 1
19. lastIndexOf(): Similar to indexOf()
, but returns the last index where the given element is found in the array.
const fruits = ['apple', 'banana', 'cherry', 'banana'];
const lastIndexOfBanana = fruits.lastIndexOf('banana'); // lastIndexOfBanana is 3
20. reverse(): Reverses the order of elements in an array in place.
const numbers = [1, 2, 3, 4, 5];
numbers.reverse(); // numbers is now [5, 4, 3, 2, 1]
These array methods offer a wide range of functionality for working with arrays in JavaScript, from searching and filtering to reducing and modifying array elements.