18 JavaScript Array Methods You Should Know

Arrays are an essential part of JavaScript programming, providing a powerful way to store and manipulate collections of data. In this article, we’ll explore eighteen fundamental array methods every JavaScript programmer should know to write more efficient, cleaner code.

1. Push

The arr.push(..element) method adds a new element to the end of an array and returns the new length of the array. This method mutates the original array.

Syntax:

arr.push(element1, element2, …)

Example:

let arr = [1, 2, 3];
arr.push(4); // arr is now [1, 2, 3, 4]

2. Pop

The arr.pop() method removes the last element of an array and returns the removed element. This method also mutates the original array and its length.

Syntax:

arr.pop()

Example:

let arr = [1, 2, 3, 4];
arr.pop(); // arr is now [1, 2, 3]

3. Shift

The arr.shift() method removes the first element of an array and returns the removed element. This method also changes the length of the original array.

Syntax:

arr.shift()

Example:

let arr = [1, 2, 3, 4];
arr.shift(); // arr is now [2, 3, 4]

4. Unshift

The arr.unshift(elements) method adds one or more elements to the beginning of an array and returns the new length of the array.

Syntax:

arr.unshift(item1, item2, …)

Example:

let arr = [2, 3, 4];
arr.unshift(1); // arr is now [1, 2, 3, 4]

5. Splice

The arr.splice() method mutates the original array by removing, replacing, or adding elements.

Syntax:

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

Example:

let arr = [1, 2, 3, 4];
arr.splice(1, 1); // arr is now [1, 3, 4]

6. Slice

The arr.slice() method selects a portion of an array and returns a new array with the items copied from the start index to the end. The original array isn’t modified.

Syntax:

arr.slice(start, end)

Example:

let arr = [1, 2, 3, 4];
let newArr = arr.slice(1, 3); // newArr is [2, 3]

7. Includes

The arr.includes(item, index) method checks whether the item is present in the array starting from the given index, returning true if found, and false otherwise.

Syntax:

arr.includes(item, index)

Example:

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

8. forEach

The arr.forEach() method executes a provided function once for each array element.

Syntax:

arr.forEach(callback)

Example:

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

9. Join

The arr.join(separator) method creates a string with all the elements of an array concatenated, separated by a specific delimiter.

Syntax:

arr.join(separator)

Example:

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

10. toString

The arr.toString() method converts an array into a string and returns the result.

Syntax:

arr.toString()

Example:

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

11. Map

The map() method calls a callback function on every element of the original array and returns a new array with the results. This is a non-mutating method.

Syntax:

  arr.map(function callback(currentValue, index, array) {
    // Returns a new value
  })

Example:

let arr = [1, 2, 3, 4];
let doubled = arr.map(num => num * 2); // [2, 4, 6, 8]

12. Reduce

The reduce() method applies a function to an accumulator and each element of the array (from left to right) to reduce it to a single value.

Syntax:

arr.reduce(function callback(accumulator, currentValue, index, array) {
  // Returns the accumulated value
}, initialValue)

Example:

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, num) => acc + num, 0); // 10

13. Filter

The filter() method creates a new array with all the elements that pass the test implemented by the provided function.

Syntax:

arr.filter(function callback(element, index, array) {
  // Return true to keep the element
})

Example:

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

14. Sort

The sort() method sorts the elements of an array in ascending order, or according to the provided comparison function.

Syntax:

arr.sort([compareFunction])

Example:

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

15. Find

The find() method returns the first element in the array that satisfies the provided testing function.

Syntax:

arr.find(function callback(element, index, array) {
  // Return true to find the element
})

Example:

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

16. IndexOf

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it isn’t present.

Syntax:

arr.indexOf(searchElement, fromIndex)

Example:

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

17. Some

The some() method tests whether at least one element in the array passes the implemented testing function.

Syntax:

arr.some(function callback(element, index, array) {
  // Returns true if at least one element passes the test
})

Example:

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

18. Concat

The concat() method is used to merge two or more arrays.

Syntax:

arr.concat(array2, array3, ..., arrayN)

Example:

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2); // [1, 2, 3, 4]

These methods are fundamental for working with arrays in JavaScript. Mastering them will let you manipulate data more efficiently and write cleaner, more readable code. Happy coding!