To publish the article on Hashnode (or a similar platform), cover the following:

Topics to Cover

1. push() and pop()

2. shift() and unshift()

3. map()

4. filter()

5. reduce() (basic explanation only)

6. forEach()

Suggestions

1. Explain each method with a simple practical example

2. Show before and after array state

3. Compare traditional for loop vs map/filter

4. Keep reduce explanation beginner-friendly

5. Avoid chaining methods initially

6. Encourage students to try examples in console

Assignment Idea

1. Create an array of numbers

2. Use map() to double each number

3. Use filter() to get numbers greater than 10

4. Use reduce() to calculate total sum

Diagram Ideas

1. Flowchart showing how map works

2. Flowchart showing how filter works

3. Simple visual for reduce accumulating values

JavaScript Array Methods Every Beginner Should Know (With Real Examples)

If you've been writing JavaScript for a little while, you've probably worked with arrays.

You've probably also written a for loop to go through each item.

Nothing wrong with that but JavaScript gives you some really powerful built-in methods that can make your code cleaner, more readable.

In this blog, we're going to walk through 6 essential array methods:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce()

• forEach()

We'll take it one step at a time. Try each example in your browser console, open DevTools right now (F12) and follow along.

That hands-on practice is where things actually click.

---

1. push() and pop()

These two are a classic pair. Think of your array like a stack of plates.

push() adds an item to the end of the array. pop() removes the item from the end of the array.

push() Example

let fruits = ["apple", "banana"];
console.log(fruits); // Before: ["apple", "banana"]

fruits.push("mango");
console.log(fruits); // After: ["apple", "banana", "mango"]

Before: ["apple", "banana"] After: ["apple", "banana", "mango"]

pop() Example

let fruits = ["apple", "banana", "mango"];
console.log(fruits); // Before: ["apple", "banana", "mango"]

fruits.pop();
console.log(fruits); // After: ["apple", "banana"]

Before: ["apple", "banana", "mango"] After: ["apple", "banana"]

pop() also returns the removed element, so you can capture it:

let removed = fruits.pop();
console.log(removed); // "mango"

Open your console and create any array, then call .push("something") and .pop(). Watch how the array changes.

---

2. shift() and unshift()

These work exactly like push() and pop(), but instead of working from the end, they work from the beginning.

unshift() adds an item to the start. shift() removes an item from the start.

unshift() Example

let colors = ["blue", "green"];
console.log(colors); // Before: ["blue", "green"]

colors.unshift("red");
console.log(colors); // After: ["red", "blue", "green"]

Before: ["blue", "green"] After: ["red", "blue", "green"]

shift() Example

let colors = ["red", "blue", "green"];
console.log(colors); // Before: ["red", "blue", "green"]

colors.shift();
console.log(colors); // After: ["blue", "green"]

Before: ["red", "blue", "green"] After: ["blue", "green"]

Create a queue simulation. Use push() to add people to a waiting list, and shift() to serve the person at the front.

---

3. map()

Now we're getting into the really good stuff.

map() creates a new array by running a function on every single element of the original array. The original array stays untouched.

The Traditional Way (for loop)

Let's say you have an array of prices and you want to apply a 10% tax to each one.

let prices = [10, 20, 30, 40];
let withTax = [];

for (let i = 0; i < prices.length; i++) {
  withTax.push(prices[i] * 1.1);
}

console.log(withTax); // [11, 22, 33, 44]

This works, but it's a bit verbose. You have to manually manage the loop and push into a new array.

The map() Way

let prices = [10, 20, 30, 40];
let withTax = prices.map(function(price) {
  return price * 1.1;
});

console.log(withTax); // [11, 22, 33, 44]
console.log(prices);  // [10, 20, 30, 40] — original unchanged!

Before (prices): [10, 20, 30, 40] After (withTax): [11, 22, 33, 44]

map() automatically collects the returned values into a new array for you. Much cleaner.

---

---

Take an array of names like ["alice", "bob", "carol"] and use map() to capitalize them.

---

4. filter()

filter() creates a new array containing only the elements that pass a certain condition (a test you define). Elements that don't pass the test are simply left out.

The Traditional Way (for loop)

Say you have a list of ages and only want the adults (18 and over):

let ages = [12, 25, 17, 30, 14, 22];
let adults = [];

for (let i = 0; i < ages.length; i++) {
  if (ages[i] >= 18) {
    adults.push(ages[i]);
  }
}

console.log(adults); // [25, 30, 22]

The filter() Way

let ages = [12, 25, 17, 30, 14, 22];
let adults = ages.filter(function(age) {
  return age >= 18;
});

console.log(adults); // [25, 30, 22]
console.log(ages);   // [12, 25, 17, 30, 14, 22] — original unchanged!

Before (ages): [12, 25, 17, 30, 14, 22] After (adults): [25, 30, 22]

The function inside filter() returns true or false. If it returns true, the element is included. If it returns false, it's skipped.

---

---

Create an array of product names and use filter() to return only the ones with more than 5 characters.

---

5. reduce()

Okay, reduce() trips a lot of beginners, so we're going to keep this simple and focused.

The idea of reduce() is to take an entire array and reduce it down to a single value. That single value could be a sum, a product, a string anything.

The most common use case? Adding up all the numbers in an array.

let numbers = [10, 20, 30, 40];

let total = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(total); // 100

Here's what's happening step by step:

• We start with an accumulator value of 0 (that 0 at the end is the starting point)

• For each number in the array, we add it to the accumulator

• After going through all elements, reduce() gives us back the final accumulated value

Understand accumulator like a running total. Each time we process a new number, we add it to whatever total we already have.

Before: [10, 20, 30, 40] After reduce(): 100

---

---

Create an array of your monthly expenses and use reduce() to calculate your total spending.

Don't worry if reduce() doesn't fully click right away it takes a bit more time than the others.

Come back to it after you're comfortable with map() and filter().

---

6. forEach()

forEach() is the simplest of the bunch. It just runs a function once for every element in the array. That's it.

Unlike map(), it doesn't return a new array. Unlike filter(), it doesn't pick and choose. It just loops through and lets you do something with each item.

let students = ["Alice", "Bob", "Carol", "David"];

students.forEach(function(student) {
  console.log("Welcome, " + student + "!");
});

// Output:
// Welcome, Alice!
// Welcome, Bob!
// Welcome, Carol!
// Welcome, David!

It's basically a cleaner way to write a for loop when all you want to do is perform an action with each element.

Comparing forEach to a for loop

// Traditional for loop
for (let i = 0; i < students.length; i++) {
  console.log("Hello, " + students[i]);
}

// forEach version — same result, less clutter
students.forEach(function(student) {
  console.log("Hello, " + student);
});

Both do the same thing, but forEach() is easier to read because you don't have to think about the index or the length.

Use forEach() to loop through a shopping list and print each item with a checkbox emoji in front: ☐ Milk, ☐ Eggs, etc.

---

Putting It All Together

1. Start with an array of numbers

2. Use map() to double each number

3. Use filter() to keep only numbers greater than 10

4. Use reduce() to calculate the total sum of what's left

Solution:

// Step 1: Start with an array
let numbers = [1, 3, 5, 7, 9, 11];

// Step 2: Double each number using map()
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log("Doubled:", doubled);
// Doubled: [2, 6, 10, 14, 18, 22]

// Step 3: Keep only numbers greater than 10 using filter()
let filtered = doubled.filter(function(num) {
  return num > 10;
});
console.log("Filtered:", filtered);
// Filtered: [14, 18, 22]

// Step 4: Calculate the total sum using reduce()
let total = filtered.reduce(function(acc, num) {
  return acc + num;
}, 0);
console.log("Total:", total);
// Total: 54

Notice how we did each step separately?

That makes it much easier to understand what's happening at each stage. Once you're comfortable, you can start connecting these step.

---

Final Thoughts

These 6 methods are ones you'll use constantly as a JavaScript developer.

If you're just starting out, don't try to memorize them all at once. Pick one, play with it in your console for a day or two, then move to the next.

The for loop is never wrong but once map() and filter() start feeling easy and natural then you undertand importance of these methods.