Array Methods You Must Know

Tags: JavaScript, Fundamentals, Execution Model

The Problem:

Most developers learn JavaScript array methods by memorizing map, filter, and reduce, using for loops everywhere, forgetting which methods mutate, and neglecting performance considerations. This results in accidental state mutation, hard-to-read code, poor interview performance, and a weak understanding of fundamentals.

Why This Matters:

Array methods embody functional programming patterns, declarative thinking, immutable transformations, and clean state updates, especially in React. Proper understanding leads to more readable code, more predictable systems, and less buggy logic. Let’s break them down properly -->

1. push() and pop()

What They Do

These operate on the end of the array.

• push() → Adds element to the end

• pop() → Removes element from the end

⚠️ Both methods mutate the original array.

Example

let arr = [1, 2, 3];
console.log(arr); // [1,2,3]
arr.push(4);
console.log(arr); //[1,2,3,4]

Before: [1, 2, 3]

After: [1, 2, 3, 4]

arr.pop(); // pop removes the last elem from Array and returns it,
console.log(arr); // [1, 2, 3]

After pop: [1, 2, 3]

Engineering Insight

• These are O(1) operations.

• JavaScript arrays are optimised for operations at the end.

• Very efficient for stack-like behaviour.

2. shift() and unshift()

What They Do

These operate on the beginning of the array.

• shift() → Removes first element

• unshift() → Adds element to beginning

⚠️ These methods mutate the array.

Example

let arr = [10, 20, 30];
arr.shift();
console.log(arr);

Before: [10, 20, 30]

After: [20, 30]

arr.unshift(5);
console.log(arr);

After: [5, 20, 30]

Engineering Insight

These are O(n) operations. Why?

Because every element must be reindexed. If you're dealing with large arrays or performance-sensitive systems, this matters.

3. map()

What It Does

map() creates a new array by transforming each element.

⚠️ It does NOT mutate the original array.

Example

let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);

Original: [1, 2, 3]

New Array: [2, 4, 6]

Traditional Loop vs map()

Using a loop:

let result = [];
for (let i = 0; i < numbers.length; i++) {
  result.push(numbers[i] * 2);
}

Using map:

let result = numbers.map(function(num) {
  return num * 2;
});

map() clearly communicates intent:

“Transform each element.”

This improves maintainability and readability.

Mental Model -

4. filter()

What It Does

Returns a new array containing only elements that satisfy a condition.

⚠️ Does NOT mutate the original array.

Example

let nums = [5, 12, 8, 20];
let greaterThan10 = nums.filter(function(n) {
  return n > 10;
});
console.log(greaterThan10);

Original: [5, 12, 8, 20]

Filtered Result: [12, 20]

Traditional Loop vs filter()

let result = [];
for (let i = 0; i < nums.length; i++) {
  if (nums[i] > 10) {
    result.push(nums[i]);
  }
}

filter() expresses:

“Select elements matching a condition.”

Much cleaner.

Mental Model -

5. reduce() (Beginner-Friendly Explanation)

My Pain-point😅

What It Does

It reduces the entire array into a single value.

That value could be:

• A number

• An object

• Another array

• Anything

Example: Sum of Numbers

let nums = [1, 2, 3, 4];
let total = nums.reduce(function(accumulator, current) {
  return accumulator + current;
}, 0);
console.log(total);

Result: 10

How It Works Internally

Iteration 1:

0 + 1 = 1

Iteration 2:

1 + 2 = 3

Iteration 3:

3 + 3 = 6

Iteration 4:

6 + 4 = 10

Final Result → 10

Mental Model -

6. forEach()

What It Does

Executes a function for each element.

⚠️ It does NOT return a new array.

It is used when you want side effects.

Example

let numbers = [1, 2, 3];

numbers.forEach(function(num) {
  console.log(num * 2);
});

Output:

2
4
6

Important Difference

• map() → Returns new array

• forEach() → Returns undefined

Use forEach() when you're not transforming data.

Common Mistakes & Edge Cases

Forgetting mutation

push, pop, shift, unshift mutate.

map, filter, reduce do not.

Using map() when you don’t use the returned array

That’s incorrect usage.
Use forEach() instead.

Forgetting initial value in reduce

Always provide it.

Bad:

arr.reduce((a, b) => a + b);

Better:

arr.reduce((a, b) => a + b, 0);

Key Takeaways

• Understand mutation vs non-mutation.

• Prefer declarative methods over manual loops.

• Think in transformations.

• Performance matters (shift is O(n), push is O(1)).

• reduce() is just accumulation.