Array Methods You Must Know
Array is important & widely used data structure to store the data, so we need the technique to perform operation or technique to manupulate those array , in previous article we cover details about array Click to visit in this article we learn about most important and widely used or day to day as a developer used methode.
push()
push methode used to add element into last of the array and return a new length, and this methode also change the original array.
Example -
let Items = ["Monitor", "Keyboard", "Mouse", "Speaker"]
console.log(Items.length)
// print 4
// now push printer into Items
let newIdx = Items.push("Printer");
console.log(newIdx);
// print 5
pop()
pop is opposite of push and it remove the items from last of array and return those element, and it also change the original array.
Example -
let Items = ["Monitor", "Keyboard", "Mouse", "Speaker"]
console.log(Items.length)
// print 4
// now we want to remove Speaker
let removeElement = Items.pop();
console.log(removeElement);
// print "Speaker"
shift()
shift methode is similer to pop methode but it remove element of first index and return those element, it also change the original array.
if array is empty or 0 length then it will return undefined.
Example -
let stationary = ["Book", "Pen", "Notebook", "Pencil"]
console.log(stationary.length) // print 4
// remove element from starting
const element = stationary.shift();
console.log(element) // print "Book"
console.log(stationary.length) // print 3
// let's assign to empty array
stationary = []
console.log(stationary.shift()) // print undefined
unshift()
unshift is similer to push operation that used to add element at starting index and rest element is shift to one index, and return new length of array.
it will also mutate or change original array.
Example -
let stationary = ["Book", "Pen", "Notebook", "Pencil"]
0 1 2 3 // index of element
console.log(stationary.length) // print 4
// remove element from starting
const elementCount = stationary.unshift("Diary");
console.log(elementCount) // print 5
console.log(stationary);
["Diary", "Book", "Pen", "Notebook", "Pencil"]
0 1 2 3 4 // index of element
forEach()
forEach methode is used to perform operation on each element of array from starting to end.
forEach methode take two parameter first is callback* and another is optional thisArg , callback give us three argument suppose a, b, c. a repersent current item, b repersent current elemet index and c repersent array.
we can't apply break keyword inside forEach methode callback.
Syntax -
array.forEach(callBack, thisArgument)
callback = (a, b, c) => {
// body of methode
}
a = current element
b = current index
c = complete array
thisArgument = repersent this based on current context
Example -
let fruits = ["Apple", "Banana", "Pineapple", "Orange"];
fruits.forEach((element, idx) => {
console.log(`Element \({element} is at \){idx}`);
});
// Output
Element Apple is at 0
Element Banana is at 1
Element Pineapple is at 2
Element Orange is at 3
map()
map methode first create a equal size of new array , traverse each itam one by one perform operation on current element and store result at current index and at last return array.
map methode can't change the original array.
Syntax -
array.forEach(callBack, thisArgument)
using {} we have to return result
callback = (a, b, c) => {
// body of methode
}
don't require return keyword
callback = (a, b, c) => ( body of methode )
a = current element
b = current index
c = complete array
thisArgument = repersent this based on current context
Example -
let fruits = ["Apple", "Banana", "Pineapple", "Orange"];
const result = fruits.map((element, idx) => {
return `Fruits[\({idx}] = \){element}`
});
console.log(result)
// output -
["Fruits[0] = Apple", "Fruits[1] = Banana", "Fruits[2] = Pineapple", "Fruits[3] = Orange"]
filter()
filter methode as name filter used to filter the items from array based on condition and return the array if true.
if no one element pass the condition return the [] empty array. it does't change the original array.
Syntax -
array.forEach(callBack, thisArgument)
callback = (a, b, c) => ( condition )
a = current element
b = current index
c = complete array
thisArgument = repersent this based on current context
Example -
suppose a teacher have some list of marks of students and he want to filter the student marks that pass the examination or student whose marks is more than 40.
let marks = [70, 46, 23, 83, 98, 29, 39, 55, 18]
let filterMarks = marks.filter((mark) => marks >= 40);
// it filter all the marks whose value is greater than 40
console.log(filterMarks)
//output
[70, 46, 83, 98, 55]
reduce()
reduce methode as name it's reduce the array or evaluate the array by perform operation on each element and at end return result.
Syntax -
Array.reduce(callback, intialValue)
callback - any function either arrow or function expression / named function
intialValue - given some initial value
let callBack = (accumulator, item, itemIndex, array) => {
// expression to evalute
}
accumulator - simple use to assign the result
item - current item of array
itemIdx - current index of Item
array - complete array
Example -
suppose we have different pockets and keep some cash in each packet, and i want to calculate the total amount we have.
const money = [100, 200, 50, 150];
const totalCash = money.reduce((result, item) => (result + item), 0);
console.log("Total cash in pocket : "totalCash);
// output
"Total cash in pocket : " 500
includes()
includes is simple methode that return either true or false based on item availbility, if exist it return true otherwise false.
const contacts = ["Rahul", "Amit", "Neha", "Priya"];
console.log(contacts.includes("Rahul")); // print true
Conclusion
These array methods—push, pop, shift, unshift, and forEach—cover the basic, day-to-day operations you’ll use to add, remove, and iterate over elements. Key points to remember: push/unshift add elements and return the new length; pop/shift remove elements and return the removed value (or undefined if the array is empty); most of these methods mutate the original array; and forEach runs a callback for each element (callback signature: currentValue, index, array) and does not produce a new array.
Practice these with small examples to internalize their behavior, especially their mutation and return-value semantics. When you need non-mutating alternatives or to transform/filter data, explore map, filter, and reduce next—they’re essential for writing clearer, more functional-style JavaScript.
