JavaScript Array Methods with Practical Examples
Tags: javascript, programming, react, webdev
Published: 2024-07-05 16:11:11

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!