JavaScript Array Methods Explained Simply with Practical Examples

INTRODUCTION

Say you want to store the marks of subject of Science of 7 different students ,you can do it by defining 7 different variables and assigning the values it would be inefficient but in JavaScript we have array by using that we can store all the marks which is more efficient than the previous approach . Array methods matter a lot because they provide you with different tools that can help you manipulate values contained in an array .Understanding them gives more control over the values contained in array

This article covers some of the methods of array like push, pop, shift ,unshift ,map ,filter ,reduce , forEach etc.

Before we dive right in...

Every value in array is indexed it starts from 0 for 1st value and goes till how much values there are

To understand indexing have a look at this example

Also there is an important property .length which tells how many values are contained in an array. Have a look at code snippet below

Push() and Pop()

Push()

what push() does:
it adds a given value at the end of array and also returns the new length of array .ie the variable holding push contains the length of new array .

OUTPUT

notice that push returns new length of array not the updated array

Pop()

what pop() does:
it deletes the last value from array and returns the deleted element

OUTPUT

SHIFT() AND UNSHIFT()

Shift()

what Shift() does:
it removes first value from the array and returns removed element like pop but it removes the first value not the last one

OUTPUT

Unshift()

what Unshift() does:

this method adds the given values at the start of array and returns new length of array .

This method can add multiple values also at once

OUTPUT

MAP()

what map() does;

This method returns a new array which is filled with values obtained after passing the values of original values through the function

OUTPUT

SImple diagram to show working

FILTER()

what filter() does:

it returns an array which contains values that specify a certain condition which is specified by us

OUTPUT

SImple diagram to show working

REDUCE()

what reduce() does:

it is a bit advanced method but you can think of it like it helps us to calculate a single value from values of array like calculating sum or average of marks from array

OUTPUT

SImple diagram to show working

ForEach()

what ForEach() does;

for every value it executes function for that value

OUTPUT

COMPARISON TABLE

Method	Returns New Array?	Modifies Original?	Use Case
push	No	Yes	Add at end
pop	No	Yes	Remove last
shift	No	Yes	Remove first
unshift	No	Yes	Add at start
map	Yes	No	Transform
filter	Yes	No	Select
reduce	No	No	Single result
forEach	No	No	Loop

Questions to practice

Q1 take an array [2,4,7,9,78] and make it [2,4,10,7,9] using push and pop only

Q2 take an array [12,45,78,15,60] and make it [55,76,78,15,60] using shift and unshift only

Q3 take an array [1,4,8,3,7,0,2] and make it [1,16,64,9,49,0,4] using map only

Q4 take an array [1,4,8,9,7,0,12] and make it [8,9,7,12] using filter only

Q5 take an array [1,2,3,4,5,6] and calculate product of all elements

Q6 take an array ["hi","This","is","A"] and print all of its elements using forEach