Everything You Need to Know About Array Methods in JavaScript

JavaScript arrays are powerful data structures that hold a collection of elements. To manipulate these elements effectively, JavaScript provides several built-in methods. In this article, we will explore various array methods, their purposes, and how to use them with examples.

Array Creation

Creating an Array

You can create an array using two methods:

// Using Array Constructor
let array1 = new Array(1, 2, 3)

// Using Array Literal
let array2 = [1, 2, 3]

Adding and Removing Elements

push()

The push() method adds one or more elements to the end of an array and returns the new length of the array.

let fruits = ['apple', 'banana']
fruits.push('orange') // ['apple', 'banana', 'orange']

pop()

The pop() method removes the last element from an array and returns that element.

let fruits = ['apple', 'banana', 'orange']
let lastFruit = fruits.pop() // 'orange'

unshift()

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

let fruits = ['banana', 'orange']
fruits.unshift('apple') // ['apple', 'banana', 'orange']

shift()

The shift() method removes the first element from an array and returns that element.

let fruits = ['apple', 'banana', 'orange']
let firstFruit = fruits.shift() // 'apple'

Finding Elements

indexOf()

The indexOf() method returns the first index at which a given element can be found, or -1 if it is not present.

let fruits = ['apple', 'banana', 'orange']
let index = fruits.indexOf('banana') // 1

includes()

The includes() method determines whether an array includes a certain value among its entries, returning true or false.

let fruits = ['apple', 'banana', 'orange']
let hasBanana = fruits.includes('banana') // true

findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. If no elements satisfy the testing function, it returns -1.

let numbers = [4, 5, 2, 10]
let index = numbers.findIndex(num => num > 5) // 1 (index of 5)

Iterating Over Elements

forEach()

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

let fruits = ['apple', 'banana', 'orange']
fruits.forEach(fruit => console.log(fruit))
// Output: apple
//         banana
//         orange

Transforming Arrays

map()

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

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

filter()

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

let numbers = [1, 2, 3, 4]
let evenNumbers = numbers.filter(num => num % 2 === 0) // [2, 4]

Reducing Arrays

reduce()

The reduce() method executes a reducer function on each element of the array, resulting in a single output value.

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

Joining and Sorting

join()

The join() method joins all elements of an array into a string, separated by a specified separator.

let fruits = ['apple', 'banana', 'orange']
let fruitString = fruits.join(', ') // 'apple, banana, orange'

sort()

The sort() method sorts the elements of an array in place and returns the sorted array.

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

reverse()

The reverse() method reverses the elements of an array in place.

let numbers = [1, 2, 3, 4]
numbers.reverse() // [4, 3, 2, 1]

Combining and Slicing

concat()

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

let array1 = [1, 2, 3]
let array2 = [4, 5, 6]
let combined = array1.concat(array2) // [1, 2, 3, 4, 5, 6]

slice()

The slice() method returns a shallow copy of a portion of an array into a new array object.

let numbers = [1, 2, 3, 4, 5]
let sliced = numbers.slice(1, 4) // [2, 3, 4]

Spreading Arrays

spread operator

The spread operator (...) allows you to expand an iterable (like an array) into a list of arguments.

let numbers = [1, 2, 3]
let newNumbers = [...numbers, 4, 5] // [1, 2, 3, 4, 5]