# 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
```javascript
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]`
```javascript
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
```javascript
let arr = [10, 20, 30];
arr.shift();
console.log(arr);
```
**Before:** `[10, 20, 30]`
**After:** `[20, 30]`
```javascript
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
```javascript
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:*
```javascript
let result = [];
for (let i = 0; i < numbers.length; i++) {
result.push(numbers[i] * 2);
}
```
### Using map:
```javascript
let result = numbers.map(function(num) {
return num * 2;
});
```
`map()` clearly communicates intent:
> “Transform each element.”
This improves maintainability and readability.
### Mental Model -
![](https://cdn.hashnode.com/uploads/covers/69517129b3f42beb72514f64/fcca7221-5737-4e39-bafd-710f59dd37da.png align="center")
## 4\. `filter()`
### What It Does
Returns a **new array** containing only elements that satisfy a condition.
⚠️ Does NOT mutate the original array.
### Example
```javascript
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()`
```javascript
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 -
![](https://cdn.hashnode.com/uploads/covers/69517129b3f42beb72514f64/ff26afbc-ed00-4787-acd5-e411f01c1304.png align="center")
## 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
```javascript
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:
```javascript
0 + 1 = 1
```
Iteration 2:
```javascript
1 + 2 = 3
```
Iteration 3:
```javascript
3 + 3 = 6
```
Iteration 4:
```javascript
6 + 4 = 10
```
Final Result → `10`
### Mental Model -
![](https://cdn.hashnode.com/uploads/covers/69517129b3f42beb72514f64/56ed7d57-e7df-4e47-8ea5-d6cca29d9c8b.png align="center")
## 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
```javascript
let numbers = [1, 2, 3];
numbers.forEach(function(num) {
console.log(num * 2);
});
```
Output:
```javascript
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:
```javascript
arr.reduce((a, b) => a + b);
```
Better:
```javascript
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.