Array Methods in Javascript

Arrays in Javascript has a lot of useful built-in methods.

In this article, we will learn about different types of built-in methods of array.

Array Methods

push()

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

const cities = ["Dhaka", "Cumilla"]
const newLength = cities.push("Sylhet", "Barisal")

console.log(newLength) // 4
console.log(cities) // ["Dhaka", "Cumilla", "Sylhet", "Barisal"]

unshift()

The unshift() method adds one or more elements to the end the original array and returns the new length of the array. It mutates the original arrays.

const cities = ["Dhaka", "Cumilla"]
const newLength = cities.unshift("Sylhet", "Barisal")

console.log(newLength) // 4
console.log(cities) // ["Sylhet", "Barisal", "Dhaka", "Cumilla"]

pop()

The pop() method removes the last element from the original array. It mutates the original arrays.

const cities = ["Dhaka", "Cumilla", "Barisal"]
const removedItem = cities.pop()

console.log(removedItem) // "Barisal"
console.log(cities) // ["Dhaka", "Cumilla"]

shift()

The shift() method removes the first element from the original array. It mutates the original arrays.

const cities = ["Dhaka", "Cumilla", "Barisal"]
const removedItem = cities.shift()

console.log(removedItem) // "Dhaka"
console.log(cities) // ["Cumilla", "Barisal"]

concat()

The concat() method merges two or more arrays together and return a new array. It does not mutate or affect the original arrays.

const cities1 = ["Dhaka", "Cumilla"]
const cities2 = ["Sylhet", "Barisal"]

// concatenate the two arrays together into cities variable
const cities = cities1.concat(cities2) // ["Dhaka", "Cumilla", "Sylhet", "Barisal"]

join()

The join() method converts all the elements of an array into a new string.

const fruits = ["banana", "mango", "apple"]
let fruitsString = fish.join() // "banana,mango,apple"
fruitsString = fish.join(", ") // "banana, mango, apple"

slice()

The slice() method copies a portion of an array to a new array.

const fruits = ["banana", "mango", "apple", "papaya"]

// slice a new array from 1 to 3 (excluding last index 3)
let slicedFruits = fruits.slice(1, 3) // ["banana", "mango"]

// slice a new array from 1 to the end of the array
slicedFruits = fruits.slice(1) // ["banana", "mango", "papaya"]

splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

const months = ["Jan", "March", "April", "June"]
months.splice(1, 0, "Feb") // inserts at index 1
console.log(months) // ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, "May") // replaces 1 element at index 4
console.log(months) // ["Jan", "Feb", "March", "April", "May"]

indexOf()

The indexOf() method returns the index number of the first instance of an element.

const fruits = ["banana", "mango", "apple", "papaya", "apple"]
let index = fruits.indexOf("apple") // 2

// if element does not exists returns -1
index = fruits.indexOf("blackberries") // -1

lastIndexOf()

The indexOf() method returns the index number of the last instance of an element.

const fruits = ["banana", "mango", "apple", "papaya", "apple"]
let index = fruits.indexOf("apple") // 4

// if element does not exists returns -1
index = fruits.indexOf("blackberries") // -1