JavaScript Array Methods You Must Know before jumping into coding

Overview

Arrays are one of the most critical concepts in JavaScript. In almost every project, we use arrays to store and manage data.

In this article, we will discuss the most frequently used JavaScript array methods that every developer should know before starting serious coding. These methods will help you write cleaner, shorter, and more efficient code instead of using long and complex loops.

Commonly used array methods

Method 1: Push()

push() is an array method used to add one or more elements to the end of an array. Need to know that this actually modifies the array. push() Returns the length of the newly made array, not the array itself.

The flow is like first it goes to the last index, then it inserts the new value there at the length position, after increasing the array length. Finally, it returns the updated length.

Basic Syntax

arr1.push(element1, element2, ..., elementN);

const numbers = [1, 2, 3];

const newLength = numbers.push(4);

console.log(numbers);    // [1, 2, 3, 4]
console.log(newLength);  // 4

Method 2: Pop()

pop() is an array method used to remove the last element from an array. It also modifies the original array. pop() Returns the removed element. If the array is empty, it returns undefined.

The flow is like this - JavaScript finds the last index. It stores that value. It reduces the array. It returns the removed value.

Basic Syntax

array.pop()

const numbers = [1, 2, 3];

const removed = numbers.pop();

console.log(numbers); // [1, 2]
console.log(removed); // 3
/*
Here:
3 is removed from the end
The original array changes
The return value is the removed element
*/

Method 3: Shift()

shift() is an array method used to remove the first element from an array. It modifies the original array and returns the removed element.
If the array is empty, it returns undefined.

The flow of shifts is like - JavaScript stores the value at the index 0 Then it shifts all remaining elements one position to the left. It decreases the array length by 1. It returns the removed value.

Basic Syntax

array.shift()

Example

const numbers = [10, 20, 30];

const removed = numbers.shift();

console.log(numbers); // [20, 30]
console.log(removed); // 10
// Here:
// 10 is removed from the beginning.
// The original array changes.
// The return value is the removed element.

Method 5: Unshift()

unshift() is an array method used to add one or more elements to the beginning of an array. It modifies the original array and returns the new length of the array.

Step-by-step:

• JavaScript shifts all existing elements one position to the right.

• It inserts the new value(s) at the index 0.

• It increases the array length.

• It returns the updated length.

Basic Syntax

array.unshift(element1, element2, ..., elementN)

Example

const numbers = [20, 30];

const newLength = numbers.unshift(10);

console.log(numbers);   // [10, 20, 30]
console.log(newLength); // 3

// Here:
// 10 is added at the beginning.
// The original array changes.
// The return value is the new length.

Method 6: Filter()

filter() is an array method used to select specific elements from an array based on a condition. It runs a function on every element and returns a new array containing only the elements that pass the test.

Note: filter() does NOT modify the original array.

Step-by-step:

• JavaScript loops through each element.

• It runs the callback function.

• If the function returns true, the element is added to a new array.

• If it returns false, the element is skipped.

• Finally, it returns the new filtered array.

Basic Syntax

array.filter(callback(currentValue, index, array), thisArg)

Example 1

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

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6]
console.log(numbers);     // [1, 2, 3, 4, 5, 6] (unchanged)
// Here:
// The condition checks if a number is even.
// Only numbers that return true are included.
// The original array stays the same

What Arguments Does filter() Take?

The callback receives 3 arguments:

• currentValue → current element

• index → current index

• array → full array

const nums = [10, 20, 30];

nums.filter(function(value, index, array) {
  console.log(value, index, array);
  return value > 15;
});

// Output:
// 10 0 [10, 20, 30]
// 20 1 [10, 20, 30]
// 30 2 [10, 20, 30]

Example 2: Filter an Array of Objects

const users = [
  { name: "Pallab", age: 22 },
  { name: "Rahul", age: 25 },
  { name: "Amit", age: 18 }
];

const adults = users.filter(user => user.age >= 21);

console.log(adults);
// [
//   { name: "Pallab", age: 22 },
//   { name: "Rahul", age: 25 }
// ]

Method 1: Map()

map() is an array method in JavaScript. Takes an array, runs a function on each element, and returns a new array with modified values

Note: It does NOT change the original array.

Sample Code

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

const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled); // [2, 4, 6, 8]
// For better understading always run the code in console

What Arguments Does map() Take?

Syntax:

array.map(callback(currentValue, index, array), thisArg)

callback

This callback means a function that runs for every element.

It receives 3 arguments:

1. currentValue: means for that iteration, what is the array element.

2. index: this is the currentValue index.

3. array: it is the whole array.

const nums = [10, 20, 30];

nums.map(function(value, index, array) {
  console.log(value, index, array);
});

// Output 
// 10 0 [10, 20, 30]
// 20 1 [10, 20, 30]
// 30 2 [10, 20, 30]

thisArg

It is used to set this value on the callback.

const obj = {
  multiplier: 3
};

const nums = [1, 2, 3];

const result = nums.map(function(num) {
  return num * this.multiplier;
}, obj);

console.log(result); // [3, 6, 9]

You can Map() array of objects

const users = [
  { name: "Pallab", age: 22 },
  { name: "Rahul", age: 25 }
];

const names = users.map(user => user.name);
// ["Pallab", "Rahul"]

Method 7: reduce()

reduce() is an array method used to combine all elements into a single value.

That single value can be:

• A number (sum, total)

• A string

• An object

• Another array

It does not modify the original array.

Basic Syntax

array.reduce(callback(accumulator, currentValue), initialValue)

Important Terms

• accumulator → stores the running result

• currentValue → current element in the loop

• initialValue → starting value (recommended to always provide)

Example 1: Sum of Numbers

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

const total = numbers.reduce(function(acc, num) {
  return acc + num;
}, 0);

console.log(total); // 10

Step idea:

• 0 + 1 = 1

• 1 + 2 = 3

• 3 + 3 = 6

• 6 + 4 = 10

Final result → 10

When Do We Use reduce()?

• Total price calculation

• Counting items

• Grouping data

• Flattening arrays

Think of reduce() as:

"Take everything and turn it into one final value."

Method 8: forEach()

forEach() is an array method used to loop through each element of an array.

It runs a function for every element.

Important:

• It does not return anything (returns undefined)

• It does not create a new array

It is mainly used for:

• Printing values

• Updating something

• Running side effects

Basic Syntax

array.forEach(callback(currentValue, index, array))

Example

const numbers = [10, 20, 30];

numbers.forEach(function(num, index) {
  console.log("Index:", index, "Value:", num);
});

Output:

Index: 0 Value: 10
Index: 1 Value: 20
Index: 2 Value: 30

Now The question is, if we have a for loop, then why Map() and Filter()?

forEach()

forEach() is used to loop through every element of an array and perform an action.

• It does not return a new array

• It is used when you just want to do something with each item

• It cannot break or stop early (unlike a normal for loop)

Important Difference

• for → full control (break, continue, manual index)

• map → transform and return a new array

• filter → select some elements

• forEach → just run code for each element (no return)

Conclution

Array methods help you write clean, efficient, and professional JavaScript.
Use the right method for the right task, and your code becomes simpler, more readable, and easier to maintain.