Level Up Your JS: Array Methods You Actually Need to Know

Hey everyone! I’m currently diving deep into the Web Dev Cohort 2026, and today I’m tackling one of the most powerful parts of JavaScript: Array Methods.

If you’ve been using for loops for everything, prepare to have your mind blown. These methods make your code cleaner, shorter, and way more readable. Let’s dive in!

---

1. The Basics: Adding & Removing Elements

Before we get into the "fancy" stuff, let’s look at how we move items in and out of an array.

push() and pop() (The Tail End)

• push(): Adds an item to the end.

• pop(): Removes the last item.

JavaScript

let snacks = ['🍕', '🍔'];
snacks.push('🍎'); // State: ['🍕', '🍔', '🍎']
snacks.pop();      // State: ['🍕', '🍔']

shift() and unshift() (The Front End)

• unshift(): Adds an item to the beginning.

• shift(): Removes the first item.

JavaScript

let queue = ['Alice', 'Bob'];
queue.unshift('Charlie'); // State: ['Charlie', 'Alice', 'Bob']
queue.shift();            // State: ['Alice', 'Bob']

---

2. The Big Three: Map, Filter, and Reduce

This is where the magic happens.

map() - The Transformer

Use map() when you want to do something to every item in an array and get a new array back.

Traditional for loop vs map():

JavaScript

// Traditional Way
let numbers = [1, 2, 3];
let doubled = [];
for(let i=0; i < numbers.length; i++) {
    doubled.push(numbers[i] * 2);
}

// The Map Way (Clean!)
const doubledMap = numbers.map(num => num * 2); 
// Result: [2, 4, 6]

filter() - The Gatekeeper

filter() checks every item against a condition. If the item passes, it stays; otherwise, it’s out!

JavaScript

let ages = [12, 18, 25, 10];
let adults = ages.filter(age => age >= 18);
// Result: [18, 25]

reduce() - The Accumulator

reduce() takes a whole array and "squashes" it into a single value (like a total sum). Think of it like a snowball rolling down a hill, picking up snow as it goes.

JavaScript

let prices = [10, 20, 30];
let total = prices.reduce((accumulator, current) => {
    return accumulator + current;
}, 0); 
// Result: 60

---

3. forEach() - The Helper

forEach() is like a for loop but easier to read. It just performs an action for every item. Note: Unlike map, it doesn't return a new array.

JavaScript

let birds = ['🦜', '🦅'];
birds.forEach(bird => console.log("Look, a " + bird));

---

🛠️ Assignment Challenge

Try this in your browser console right now!

JavaScript

// 1. Create an array
const myNums = [5, 10, 15, 20];

// 2. Map to double them
const doubled = myNums.map(n => n * 2); // [10, 20, 30, 40]

// 3. Filter numbers > 10
const bigNums = doubled.filter(n => n > 10); // [20, 30, 40]

// 4. Reduce to get the sum
const finalSum = bigNums.reduce((acc, curr) => acc + curr, 0); // 90

console.log(finalSum);