Javascript Array Methods

Javascript Array Methods

20 Javascript Array Methods

Table of contents

No heading

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.