JavaScript Array Methods with Practical Examples

In JavaScript, an array is a data structure that stores multiple values in a single variable. The power of JavaScript arrays comes from their built-in methods. These methods are functions that perform various operations on arrays, saving us from writing common functions from scratch. Each method has a unique purpose, such as transforming, searching, or sorting the array.

1. concat()
Combines two or more arrays.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4, 5, 6]

2. every()
Tests whether all elements pass the provided function.

let arr = [1, 2, 3, 4, 5];
let allPositive = arr.every(num => num > 0);
console.log(allPositive); // true

3. filter()
Creates a new array with all elements that pass the provided function.

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

4. find()
Returns the first element that satisfies the provided function.

let arr = [1, 2, 3, 4, 5];
let found = arr.find(num => num > 3);
console.log(found); // 4

5. findIndex()
Returns the index of the first element that satisfies the provided function.

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(num => num > 3);
console.log(index); // 3

6. forEach()
Executes a provided function once for each array element.

let arr = [1, 2, 3, 4, 5];
arr.forEach(num => console.log(num)); // 1 2 3 4 5

7. includes()
Determines if an array contains a certain element.

let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // true

8. indexOf()
Returns the first index at which a given element can be found.

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // 2

9. join()
Joins all elements into a string.

let arr = [1, 2, 3, 4, 5];
let str = arr.join('-');
console.log(str); // "1-2-3-4-5"

10. map()
Creates a new array with the results of calling a provided function on every element.

let arr = [1, 2, 3, 4, 5];
let squared = arr.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

11. pop()
Removes the last element and returns it.

let arr = [1, 2, 3, 4, 5];
let last = arr.pop();
console.log(last); // 5
console.log(arr); // [1, 2, 3, 4]

12. push()
Adds one or more elements to the end and returns the new length.

let arr = [1, 2, 3, 4];
arr.push(5);
console.log(arr); // [1, 2, 3, 4, 5]

13. reduce()
Executes a reducer function on each element, resulting in a single output value.

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

14. reverse()
Reverses the array in place.

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

15. shift()
Removes the first element and returns it.

let arr = [1, 2, 3, 4, 5];
let first = arr.shift();
console.log(first); // 1
console.log(arr); // [2, 3, 4, 5]

16. slice()
Returns a shallow copy of a portion of an array into a new array.

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // [2, 3]

17. some()
Tests whether at least one element passes the provided function.

let arr = [1, 2, 3, 4, 5];
let hasEven = arr.some(num => num % 2 === 0);
console.log(hasEven); // true

18. sort()
Sorts the elements in place.

let arr = [5, 2, 1, 4, 3];
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5]

19. splice()
Changes the contents by removing or replacing existing elements and/or adding new elements.

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 'a', 'b');
console.log(arr); // [1, 2, 'a', 'b', 4, 5]

20. toString()
Returns a string representing the array.

let arr = [1, 2, 3, 4, 5];
let str = arr.toString();
console.log(str); // "1,2,3,4,5"

21. unshift()
Adds one or more elements to the beginning and returns the new length.

let arr = [2, 3, 4, 5];
arr.unshift(1);
console.log(arr); // [1, 2, 3, 4, 5]

22. flat()
Creates a new array with all sub-array elements concatenated into it.

let arr = [1, 2, [3, 4], [5, 6]];
let flattened = arr.flat();
console.log(flattened); // [1, 2, 3, 4, 5, 6]

23. flatMap()
First maps each element using a mapping function, then flattens the result into a new array.

let arr = [1, 2, 3];
let mapped = arr.flatMap(num => [num, num * 2]);
console.log(mapped); // [1, 2, 2, 4, 3, 6]

24. from()
Checks if the passed value is an array.

let str = 'hello';
let arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

25. isArray(
Checks if the passed value is an array.

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('hello')); // false

26. of()
Creates a new array instance with a variable number of arguments.

let arr = Array.of(1, 2, 3);
console.log(arr); // [1, 2, 3]

If you need more detailed explanations or additional methods, feel free to ask!

Blog

JavaScript Array Methods with Practical Examples

Sudhanshu Gaikwad

Join Our Newsletter. No Spam, Only the good stuff.

Related