JavaScript Array Methods

In JavaScript, Array is a built-in global object that allows you to store multiple elements at once.

The strength of JavaScript arrays lies in the array methods. Array methods are functions built-in to JavaScript that we can apply to our arrays. Each method has a unique function that performs a change or calculation to our array and saves us from writing common functions from scratch.

1. map( )

This method returns array by mapping elements using given function

const array = [1, 2, 3, 4, 5]
const mappedArray = array.map(element => element + 30)
console.log(mappedArray);  // [ 31, 32, 33, 34, 35 ]

2. filter( )

This method returns array by filtering elements on given test

const array = [1, 2, 3, 4, 5]
const filteredArray = array.filter(element => element > 3)
console.log(filteredArray);  // [ 4, 5 ]

3. sort( )

This method sorts the elements of an array in specific order

const array = [1, 2, 3, 4, 5]
const alphabets = ['h', 'z', 'a', 'j', 'd']

// sort in descending order
const sortedArray = array.sort((a, b) => b - a)
console.log(sortedArray);  // [ 5, 4, 3, 2, 1 ]

// sort in ascending order
const sortedAlbhabets = alphabets.sort((a, b) => a > b ? 1 : -1)
console.log(sortedAlbhabets);  // [ 'a', 'd', 'h', 'j', 'z' ]

4. forEach( )

This method executes the given function on array elements

const array = [1, 2, 3, 4, 5]

array.forEach((element) => {
       console.log(element + 2)
});

// 3
// 4
// 5
// 6
// 7

5. concat( )

This method returns array by merging given value and/or arrays

const arrayOne = ['a', 'b', 'c']
const arrayTwo = ['d', 'e', 'f']

console.log(arrayOne.concat(arrayTwo))  // [ 'a', 'b', 'c', 'd', 'e', 'f' ]
console.log(arrayOne)  // [ 'a', 'b', 'c' ]
console.log(arrayTwo)  // [ 'd', 'e', 'f' ]

6. every( )

This method tests if all elements pass the given test function

const array = [1, 2, 3, 4, 5];

// all elements are greater than 2
const greaterThanTwo = array.every(num => num > 2)
console.log(greaterThanTwo)  // False

// all elements are less than 7
const lessThanSeven = array.every(num => num < 7)
console.log(lessThanSeven)  // True

7. some( )

This method tests if any element passes given test function

const array = [1, 2, 3, 4, 5];

// at least one element is greater than 3?
const greaterThanThree = array.some(num => num > 3)
console.log(greaterThanThree);  // True

// at least one element is less than on equal to 0?
const lessThanOrEqualToZero = array.some(num => num <= 0)
console.log(lessThanOrEqualToZero);  // False

8. includes( )

This method checks if a value exists in an array

const array = [1, 2, 3, 4, 5];

console.log(array.includes(2));  // True
console.log(array.includes(6));  // False

9. join( )

This method concatenates the array elements to a string

const array = ['A', 'r', 'r', 'a', 'y'];

console.log(array.join(''));  // Array

10. reduce( )

This method reduces array to single value from left to right

const array = [1, 2, 3, 4, 5];

const reducedArray = array.reduce((acc, curr) => acc + curr)
console.log(reducedArray);  // 15

11. find( )

This method returns first element that satisfies a condition

const array = [1, 2, 3, 4, 5];

const found = array.find(element => element > 3)
console.log(found);  // 4

12. findIndex( )

This method returns index of element that satisfies condition

const array = ["Banglore", "Pune", "Mumbai", "Delhi"];

const foundIndex = array.findIndex(element => element === "Pune")
console.log(foundIndex);  // 1

13. indexOf( )

This method returns the first index of occurrence of element

const array = ["Banglore", "Pune", "Mumbai", "Delhi"];

const indexFinder = array.indexOf('Mumbai')
console.log(indexFinder);  // 2

14. fill( )

This method returns array by filling elements with given value

const array = new Array(5);

console.log(array);  // [ empty, empty, empty, empty, empty ]
console.log(array.fill(1));  // [ 1, 1, 1, 1, 1 ]

15. slice( )

This method returns a shallow copy of a portion of an array

const array = ['a', 'b', 'c', 'd', 'e'];

const slicedArray = array.slice(2, 4)
console.log(slicedArray);  // [ 'c', 'd' ]
console.log(array);  // [ 'a', 'b', 'c', 'd', 'e' ]

16. reverse( )

This method returns the array in reverse order

const array = [ 1, 2, 3, 4, 5 ];

array.reverse( )
console.log(array);  // [ 5, 4, 3, 2, 1 ]

17. push( )

This method adds elements to end of array & returns its length

const array = ['Pune', 'Mumbai'];

console.log(array.push('Banglore'));  // 3
console.log(array);  // [ 'Pune', 'Mumbai', 'Banglore' ]

18. pop( )

This method removes and returns the last array element

const array = ['Pune', 'Mumbai', 'Banglore'];

console.log(array.pop( ));  // Banglore
console.log(array);  // [ 'Pune', 'Mumbai' ]

19. shift( )

This method removes and returns the first array element

const array = ['Pune', 'Mumbai', 'Banglore'];

console.log(array.shift( ));  // Pune
console.log(array);  // [ 'Mumbai', 'Banglore' ]

20. unshift( )

This method adds elements to start of array and returns length

const array = ['Pune', 'Banglore'];

console.log(array.unshift("Mumbai"));  // 3
console.log(array);   // [ 'Mumbai', 'Pune',  'Banglore' ]

21. length

This method returns the number of elements in an array

const array = [1, 2, 3, 4, 5];

console.log(array.length);  // 5

22. toString( )

This method returns the string representation of an array

const array = [1, 2, 3, 4, 5];

console.log(array.toString( ));  // 1,2,3,4,5

23. splice( )

This method returns an array by changing its elements in place

const array = ["Jan", "March", "April", "June"];

// splice(start, deleteCount, item1)
array.splice(1, 0, "Feb");

console.log(array);  // [ "Jan", "Feb", "March", "April", "June" ]

24. lastIndexOf( )

This method returns the last index of occurrence of an element

const string =
  "The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?";

const searchTerm = "dog";

console.log(
  `The index of the first "${searchTerm}" from the end is ${string.lastIndexOf(searchTerm)}`);  
// The index of the first dog from the end is 52

25. flat( )

This method flattens the nested array to given depth

const numbers = [1, 2, [3, 4, [5, 6, [7, 8]]]];

const flattenArray = numbers.flat(2);
console.log(flattenArray);  // [ 1, 2, 3, 4, 5, 6, [7, 8] ]

Conclusion

To make JavaScript array manipulation easier, we should use array methods to make our work easier and the code cleaner.

It is also necessary to know what the output of method will be and what will be the effect of that method on the array.

Thank you for reading.