Master Array Methods in JavaScript

Stop writing clunky for loops for everything. Learn the 6 array methods that every JavaScript developer reaches for, explained simply with real examples.

push() and pop()

Think of an array like a stack of books. push() places a new book on top of the pile.

const fruits = ['apple', 'banana'];

fruits.push('mango');

console.log(fruits); // ['apple', 'banana', 'mango']

// You can push multiple items at once
fruits.push('grapes', 'cherry');
console.log(fruits); // ['apple', 'banana', 'mango', 'grapes', 'cherry']

💡 Tip

push() also returns the new length of the array. So let len = fruits.push('mango') gives you len = 3.

pop() is the opposite of push — it removes the last book from the pile and hands it back to you.

const fruits = ['apple', 'banana', 'mango'];

const removed = fruits.pop();

console.log(removed); // 'mango'  ← the removed item
console.log(fruits);  // ['apple', 'banana']

shift() and unshift()

🔄 Same idea, opposite end

push/pop work on the

end

of an array. shift/unshift work on the

beginning

.Think of a queue at a movie theater — new people join the back, the person at the front gets in first.

unshift()

Adds one or more items to the BEGINNING of an array

const queue = ['Bob', 'Charlie'];

queue.unshift('Alice'); // Alice jumps to the front

console.log(queue); // ['Alice', 'Bob', 'Charlie']

shift()

Removes and returns the FIRST item from an array

const queue = ['Alice', 'Bob', 'Charlie'];

const first = queue.shift(); // Alice goes in first

console.log(first); // 'Alice'
console.log(queue); // ['Bob', 'Charlie']

map()

Transforms every item in an array — returns a NEW array of the same length

Imagine you have a list of prices in dollars and you want to convert them all to rupees. map() goes through each item, applies your function, and gives back a brand new array with the results.

Here's why map() is so much cleaner than a for loop:

nst numbers = [1, 2, 3, 4, 5];

// Double each number
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// Convert to strings
const asStrings = numbers.map(num => `Item #${num}`);
console.log(asStrings); // ['Item #1', 'Item #2', ...]

// Original is untouched!
console.log(numbers); // [1, 2, 3, 4, 5]

filter()

Keeps only the items that pass a test — returns a NEW (possibly shorter) array.

Like a bouncer at a club — filter() checks every item against your condition. Items that return true get in; items that return false stay out.

const numbers = [3, 7, 12, 5, 18, 2];

// Get numbers greater than 10
const bigNumbers = numbers.filter(num => num > 10);
console.log(bigNumbers); // [12, 18]

// Get only even numbers
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [12, 18, 2]

// Works with objects too!
const users = [
  { name: 'Alice', age: 17 },
  { name: 'Bob',   age: 22 },
  { name: 'Carol', age: 19 },
];

const adults = users.filter(user => user.age >= 18);
console.log(adults);
// [{name:'Bob', age:22}, {name:'Carol', age:19}]

reduce()

Collapses an entire array down to a single value by accumulating(return single value ).

Think of reduce() like a running total on a calculator. You start with 0, then add each number one by one. At the end, you have the sum. That "running total" is called the accumulator.

const numbers = [10, 20, 30];

// reduce(callback, initialValue)
// acc = accumulator (running total)
// num = current item being processed
const total = numbers.reduce((acc, num) => {
  return acc + num;
}, 0); // ← 0 is the starting value

console.log(total); // 60

// Step by step what happens:
// acc=0,  num=10  → return 10
// acc=10, num=20  → return 30
// acc=30, num=30  → return 60 ✓

💡 Think of it simplyIf map() is "transform every item" and filter() is "keep some items", then reduce() is "squash everything into one thing". Most commonly used for calculating totals.

forEach()

Runs a function on each item — but returns nothing (undefined)
Use forEach() when you want to do something with each item — like log it, update the DOM, or send a request — but you don't need a new array back.

const students = ['Riya', 'Arjun', 'Priya'];

students.forEach((student, index) => {
  console.log(`\({index + 1}. Hello, \){student}!`);
});
// 1. Hello, Riya!
// 2. Hello, Arjun!
// 3. Hello, Priya!

// forEach returns nothing — don't try to capture it!
const result = students.forEach(s => s);
console.log(result); // undefined

forEach vs map — which to use?

Need a new transformed array? --->Use map()

Just doing side effects (log, DOM update)? ---> Use forEach()

Want a single accumulated value? ---> Use reduce()

🛒 Putting it all together

const numbers = [4, 12, 7, 18, 3, 25];

// Step 1: Double each number with map()
const doubled = numbers.map(n => n * 2);
console.log('Doubled:', doubled);
// [8, 24, 14, 36, 6, 50]

// Step 2: Keep only numbers greater than 10
const filtered = doubled.filter(n => n > 10);
console.log('Filtered (> 10):', filtered);
// [24, 14, 36, 50]

// Step 3: Calculate total sum with reduce()
const total = filtered.reduce((acc, n) => acc + n, 0);
console.log('Total sum:', total);
// 124

// Bonus: log each with forEach()
filtered.forEach((n, i) => {
  console.log(`Item \({i+1}: \){n}`);
});
// Item 1: 24
// Item 2: 14
// Item 3: 36
// Item 4: 50

Open your browser console and try all of these right now. Learning by typing beats reading every time.

happy coding and see you in next blog.