Skip to main content

Command Palette

Search for a command to run...

Array Methods You Must Know

Updated
•4 min read•View as Markdown
Array Methods You Must Know

JavaScript provides built-in methods that make working with arrays easier. In this blog, we’ll understand some of the most important ones:

  • push() and pop()

  • shift() and unshift()

  • map()

  • filter()

  • reduce()

  • forEach()

1. push() and pop()

These methods work on the end of an array.

push()

push() adds an element to the end of an array.

let fruits = ["apple", "banana"];

fruits.push("mango");

console.log(fruits);

["apple", "banana", "mango"]

pop()

pop() removes the last element from an array.

let fruits = ["apple", "banana", "mango"];

fruits.pop();

console.log(fruits);

["apple", "banana"]

It also returns the removed element.

let removed = fruits.pop();
console.log(removed);

mango
mango

2. shift() and unshift()

These methods work on the start of an array.

shift()

shift() removes the first element from an array.

let fruits = ["apple", "banana", "mango"];

fruits.shift();

console.log(fruits);
["banana", "mango"]

unshift()

unshift() adds an element to the beginning of an array.

let fruits = ["banana", "mango"];

fruits.unshift("apple");

console.log(fruits);

["apple", "banana", "mango"]

3. map()

map() is used to transform each element of an array and returns a new array.

Example:

let numbers = [1, 2, 3, 4];

let doubled = numbers.map(num => num * 2);

console.log(doubled);
[2, 4, 6, 8]

Important:

  • map() does not change the original array

  • It returns a new array

Think of map() like applying a rule to every item in a list.


4. filter()

filter() is used to select elements that satisfy a condition.

Example: Get even numbers only.

let numbers = [1, 2, 3, 4, 5, 6];

let evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers);
[2, 4, 6]

Important:

  • It returns a new array

  • Elements are pushed only if the condition is true


5. reduce()

reduce() is used to combine all array values into a single value.

Example: Sum of numbers.

let numbers = [1, 2, 3, 4];

let sum = numbers.reduce((total, num) => {
  return total + num;
}, 0);

console.log(sum);
10

Explanation:

  • total → accumulator that stores running result

  • num → current element

  • 0 → initial value(initial value is not necessary to be a number, it can be any thing like array , array of object etc)

Think reduce() as taking multiple values and reducing them into one result.


6. forEach()

forEach() runs a function for every element in the array.

Example:

let fruits = ["apple", "banana", "mango"];

fruits.forEach(function(fruit) {
  console.log(fruit);
});
apple
banana
mango

Important:

forEach() does not return a new array. It is used for performing actions, like printing values or updating something.

I hope this blog provide you some value in your knowledge, to master these methods i am providing you some questions below try to solve it by your self. mastering array methods gives you confidence on array.

  1. Create an array of your 5 favorite movies.

    Tasks:

    • Add one more movie using push()

    • Remove the last movie using pop()

    • Print the final array

  2. Imagine people standing in a queue.

    Tasks:

    • Create an array with 3 names

    • Add a new person at the beginning using unshift()

    • Remove the first person using shift()

    • Print the updated queue

  3. You have a list of prices.

    Tasks:

    • Create an array of product prices

    • Use map() to convert each price into a formatted string like:

    "Price: Rs.500"
    
  4. You have a list of numbers.

    Tasks:

    • Create an array of numbers from 1 to 10

    • Use filter() to extract only odd numbers

  5. Imagine you are calculating the total price of items in a cart.

    Tasks:

    • Create an array of prices

    • Use reduce() to calculate the total sum