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!