Arrays in JavaScript and the methods you should know

In JavaScript Arrays are non primitive data type used for storing different types of data in one variable. The elements/data stored in arrays are accessed using their indexes (numeric positions starting from 0). In this blog you will get to know about different methods used for manipulating arrays and use them according to the purpose.

.push() and .pop()

These two functions are the most basic methods of an array.

.push()

• Syntax: array.push(element)

• This method adds the element to the last position of the array

• Eg:

const array = ["Hello", "World"]
console.log(array) // Output: ["Hello", "World"]

array.push(2026)

console.log(array) // Output: ["Hello", "World", 2026]

.pop()

• Syntax: array.pop()

• This method removes the last element from the array and returns it.

• Eg:

const array = ["Hello", "World", 2026]
console.log(array) // Output: ["Hello", "World", 2026]

const lastItem = array.pop()

console.log(array) // Output: ["Hello", "World"]
console.log(lastItem) // Output: 2026

.shift() and .unshift()

.shift()

• Syntax: array.shift(element)

• This method removes the first item of array and also returns it.

• Eg:

const array = ["Hello", "World", 2026]
console.log(array) // Output: ["Hello", "World", 2026]

const lastItem = array.shift()

console.log(array) // Output: ["World", 2026]
console.log(lastItem) // Output: Hello

.unshift()

• Syntax: array.unshift(element)

• This method adds the element in the beginning of the array. Its the opposite of what push does.

• Eg:

const array = ["Hello", "World"]
console.log(array) // Output: ["Hello", "World"]

array.unshift(2026)

console.log(array) // Output: [2026, "Hello", "World"]

.map()

This method creates a new array by performing the callback function to every single item in the array. For example if we have an array containing numbers and we want a new array containing the squares of each element, we can use this method to do so.

const numbers = [1,2,3,4,5,6,7,8,9]

const squares = numbers.map((number) => number**2)

console.log(squares) // Output: [1, 4, 9, 16, 25, 36, 49, 64, 81]

Now, you might ask why do we need this function if we can simply loop over the array and create the same array.

• When using loops we have to write a lot of lines of code while we can simply perform operation on each iteration with a single line.

• This makes the code much readable too.

• .map() returns a new array and thus reduces the probability of mutating the original array.

• .map() is declarative, it means that here we just have to define what operation is to be performed rather than writing the whole iteration mechanism.

.filter()

This method creates a new array containing the elements that pass the test written in the callback function. For example, we have an array containing multiple types of data and we want a new array that contains just the numbers from it.

const data = ["JavaScript", "NodeJS", {name: "Shreyash", year: 2026}, 100, 200, 300, 1000, ["Hello", "Hi"]]

const numbers = data.filter((item) => typeof item === "number")

console.log(numbers) // Output: [100, 200, 300, 1000]

Now again the same question why use filter if we have loops.

• It improves readability of the code.

• It creates a new array hence avoiding the probability of the original array being mutated

• It also boosts the performance of the code.

.reduce()

This method takes an entire array and converts it into a single value and returns it. For example, if you have an array which contains all your expenditures we can use reduce method to calculate the total expenditure.

const expenditures = [100, 200, 300, 1000]

const total = expenditures.reduce((sum, expenditure) => sum += expenditure, 0)

console.log(total) // Output: 1600

.forEach()

This method is similar to traditional loops, it also takes a callback function and performs it on each element of an array. We prefer it over loops because it makes the code readable and maintainable.

Does not mutate the original array but it can mutate the elements it iterates.

This method also returns undefined rather than returning a new array. So, it cannot be chained too.

const array = ["Hello", "World"]

array.forEach((item) => console.log(item))

// Output: Hello
//         World

Thank You

With this, the blog comes to an end. I hope this blog was helpful to make you understand the array methods.