# JavaScript Array Methods for Beginners

Arrays are one of the most important parts of JavaScript.

They help us store multiple values in a single variable, and once you start working with arrays, you quickly realize that you need easy ways to add items, remove items, loop through them, transform them, and calculate results from them.

That is where JavaScript array methods become very useful.

In this blog, we will understand these beginner-friendly array methods:

*   `push()` and `pop()`
    
*   `shift()` and `unshift()`
    
*   `map()`
    
*   `filter()`
    
*   `reduce()`
    
*   `forEach()`
    

We will keep the examples simple, practical, and beginner-friendly.

We will also see:

*   before and after array state
    
*   traditional `for` loop vs `map()`
    
*   traditional `for` loop vs `filter()`
    
*   a very basic explanation of `reduce()`
    
*   small text-based diagrams using plain Markdown
    
*   a practice assignment at the end
    

Let’s begin.

## Why learn array methods?

Imagine you have an array of:

*   marks
    
*   product prices
    
*   student names
    
*   tasks
    
*   cart items
    

You may want to:

*   add a new value
    
*   remove a value
    
*   print each value
    
*   create a modified version of the array
    
*   select only certain values
    
*   calculate the total sum
    

Array methods help us do all of this in a cleaner and easier way.

* * *

## `push()` — Add an element to the end

The `push()` method adds one or more elements to the end of an array.

### Example

```js
let fruits = ["apple", "banana"];

console.log("Before:", fruits);

fruits.push("mango");

console.log("After:", fruits);
```

### Output

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

### Before and after

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

### Practical example

Suppose you are building a to-do list app. When a user adds a new task, you can use `push()`.

```js
let tasks = ["Study JavaScript", "Practice coding"];
tasks.push("Revise arrays");

console.log(tasks);
```

### Output

```js
["Study JavaScript", "Practice coding", "Revise arrays"]
```

* * *

## `pop()` — Remove an element from the end

The `pop()` method removes the last element from an array.

### Example

```js
let fruits = ["apple", "banana", "mango"];

console.log("Before:", fruits);

fruits.pop();

console.log("After:", fruits);
```

### Output

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

### Before and after

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

### Practical example

You can think of `pop()` like removing the most recent item from a list.

* * *

## `unshift()` — Add an element to the beginning

The `unshift()` method adds one or more elements to the beginning of an array.

### Example

```js
let colors = ["blue", "green"];

console.log("Before:", colors);

colors.unshift("red");

console.log("After:", colors);
```

### Output

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

### Before and after

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

### Practical example

This is useful when you want to add the newest item at the top, like a latest notification.

* * *

## `shift()` — Remove an element from the beginning

The `shift()` method removes the first element from an array.

### Example

```js
let colors = ["red", "blue", "green"];

console.log("Before:", colors);

colors.shift();

console.log("After:", colors);
```

### Output

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

### Before and after

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

### Practical example

This is useful in queue-like situations where the first item should be removed first.

* * *

## `forEach()` — Do something for every element

The `forEach()` method runs a function once for every element in the array.

It is useful when you want to perform an action like printing values.

### Example

```js
let numbers = [10, 20, 30];

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

### Output

```js
10
20
30
```

### Practical example

Suppose you want to greet every student in an array.

```js
let students = ["Aman", "Riya", "Kunal"];

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

### Output

```js
Welcome Aman
Welcome Riya
Welcome Kunal
```

### Important point

`forEach()` is used when you want to do something with each item.

It does **not** create a new array like `map()`.

* * *

## `map()` — Create a new array by changing each element

The `map()` method creates a **new array** by applying a function to every element of the original array.

This is very useful when you want to transform data.

### Example

```js
let numbers = [1, 2, 3, 4];

console.log("Original:", numbers);

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

console.log("New array:", doubled);
console.log("Original after map:", numbers);
```

### Output

```js
Original: [1, 2, 3, 4]
New array: [2, 4, 6, 8]
Original after map: [1, 2, 3, 4]
```

### What to notice?

*   `map()` does not change the original array
    
*   it returns a new array
    
*   every item gets transformed
    

### Before and after

```text
Original array: [1, 2, 3, 4]
New array:      [2, 4, 6, 8]
```

### Practical example

Suppose you want to increase every product price by 10.

```js
let prices = [100, 200, 300];

let updatedPrices = prices.map(function(price) {
  return price + 10;
});

console.log(updatedPrices);
```

### Output

```js
[110, 210, 310]
```

### Visualizing `map()`

`map()` takes every value, transforms it, and puts the result into a new array.

```text
Original array: [1, 2, 3]

1  ──> 2
2  ──> 4
3  ──> 6

New array: [2, 4, 6]
```

### Another simple view

```text
[1, 2, 3]
    ↓
Pick 1 → transform it → add to new array
Pick 2 → transform it → add to new array
Pick 3 → transform it → add to new array
    ↓
[2, 4, 6]
```

* * *

## Traditional `for` loop vs `map()`

Let us compare both approaches.

### Using a traditional `for` loop

```js
let numbers = [1, 2, 3, 4];
let doubled = [];

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

console.log(doubled);
```

### Using `map()`

```js
let numbers = [1, 2, 3, 4];

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

console.log(doubled);
```

### Why `map()` feels cleaner

With `map()`:

*   the code is shorter
    
*   the purpose is easier to read
    
*   it clearly shows that we are transforming data
    

If your goal is to create a changed version of every element, `map()` is usually a great choice.

* * *

## `filter()` — Create a new array with selected elements

The `filter()` method creates a new array containing only the elements that match a condition.

### Example

```js
let numbers = [5, 12, 8, 20, 3];

console.log("Original:", numbers);

let greaterThanTen = numbers.filter(function(num) {
  return num > 10;
});

console.log("Filtered:", greaterThanTen);
console.log("Original after filter:", numbers);
```

### Output

```js
Original: [5, 12, 8, 20, 3]
Filtered: [12, 20]
Original after filter: [5, 12, 8, 20, 3]
```

### What to notice?

*   `filter()` does not change the original array
    
*   it creates a new array
    
*   only matching values stay in the new array
    

### Before and after

```text
Original array: [5, 12, 8, 20, 3]
New array:      [12, 20]
```

### Practical example

Suppose you want only the students who passed.

```js
let marks = [35, 80, 25, 90, 40];

let passed = marks.filter(function(mark) {
  return mark >= 40;
});

console.log(passed);
```

### Output

```js
[80, 90, 40]
```

### Visualizing `filter()`

`filter()` checks every value and only keeps the ones that match the condition.

```text
Original array: [5, 12, 8, 20]
Condition: value > 10

5   ──> skip
12  ──> keep
8   ──> skip
20  ──> keep

New array: [12, 20]
```

### Another simple view

```text
[5, 12, 8, 20]
      ↓
Check 5   → does not match
Check 12  → matches
Check 8   → does not match
Check 20  → matches
      ↓
[12, 20]
```

* * *

## Traditional `for` loop vs `filter()`

### Using a traditional `for` loop

```js
let numbers = [5, 12, 8, 20, 3];
let result = [];

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

console.log(result);
```

### Using `filter()`

```js
let numbers = [5, 12, 8, 20, 3];

let result = numbers.filter(function(num) {
  return num > 10;
});

console.log(result);
```

### Why `filter()` is better here

With `filter()`, the purpose becomes very clear:

we are selecting only the values that match a condition.

* * *

## `reduce()` — Turn the whole array into one final value

The `reduce()` method takes all elements of an array and combines them into a single result.

That final result can be:

*   a total sum
    
*   a total price
    
*   a count
    
*   one final value
    

For beginners, the easiest use case is finding the total sum.

### Example

```js
let numbers = [10, 20, 30];

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

console.log(total);
```

### Output

```js
60
```

### Beginner-friendly explanation

Inside `reduce()`:

*   `accumulator` stores the running result
    
*   `currentValue` is the current array element
    
*   `0` is the starting value
    

So the calculation happens like this:

```text
Start with accumulator = 0

0 + 10 = 10
10 + 20 = 30
30 + 30 = 60
```

Final result: `60`

### Practical example

Suppose you want to calculate the total bill of products in a cart.

```js
let cartPrices = [199, 299, 499];

let totalBill = cartPrices.reduce(function(total, price) {
  return total + price;
}, 0);

console.log(totalBill);
```

### Output

```js
997
```

### Visualizing `reduce()`

`reduce()` combines all values into one final result.

```text
Array: [10, 20, 30]

acc = 0
acc + 10 = 10
acc + 20 = 30
acc + 30 = 60

Final result = 60
```

### Another simple view

```text
[10, 20, 30]
    ↓
acc = 0
acc = acc + 10  → 10
acc = acc + 20  → 30
acc = acc + 30  → 60
    ↓
Final result = 60
```

### Keep this in mind

At first, `reduce()` may feel a little confusing.

That is normal.

Start by practicing only sum-related examples. Once that becomes easy, you can explore more advanced cases later.

* * *

## Quick summary of before and after array states

### `push()`

```text
Before: ["a", "b"]
After:  ["a", "b", "c"]
```

### `pop()`

```text
Before: ["a", "b", "c"]
After:  ["a", "b"]
```

### `unshift()`

```text
Before: ["b", "c"]
After:  ["a", "b", "c"]
```

### `shift()`

```text
Before: ["a", "b", "c"]
After:  ["b", "c"]
```

### `map()`

```text
Original: [1, 2, 3]
New:      [2, 4, 6]
```

### `filter()`

```text
Original: [5, 12, 8, 20]
New:      [12, 20]
```

### `reduce()`

```text
Original: [10, 20, 30]
Result:   60
```

### `forEach()`

```text
Original: [1, 2, 3]
Action: prints each value one by one
```

* * *

## When should you use which method?

Use:

*   `push()` when you want to add an item at the end
    
*   `pop()` when you want to remove an item from the end
    
*   `unshift()` when you want to add an item at the beginning
    
*   `shift()` when you want to remove an item from the beginning
    
*   `forEach()` when you want to perform an action on every item
    
*   `map()` when you want to transform every item into a new array
    
*   `filter()` when you want only the items that match a condition
    
*   `reduce()` when you want one final value from the whole array
    

* * *

## Try these examples in the browser console

One of the best ways to learn JavaScript is by running examples yourself.

Open your browser console and try this:

```js
let nums = [2, 4, 6, 8];

nums.push(10);
console.log(nums);

let doubled = nums.map(function(n) {
  return n * 2;
});
console.log(doubled);

let bigNums = nums.filter(function(n) {
  return n > 5;
});
console.log(bigNums);
```

When you try code on your own, the concepts become much easier to remember.

* * *

## Mini assignment

Now it is your turn.

### Step 1: Create an array of numbers

```js
let numbers = [4, 7, 12, 15, 3];
```

### Step 2: Use `map()` to double each number

Expected result:

```js
[8, 14, 24, 30, 6]
```

### Step 3: Use `filter()` to get numbers greater than 10

Expected result:

```js
[12, 15]
```

### Step 4: Use `reduce()` to calculate the total sum

Expected result:

```js
41
```

### Full practice solution

```js
let numbers = [4, 7, 12, 15, 3];

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

let greaterThanTen = numbers.filter(function(num) {
  return num > 10;
});

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

console.log("Original:", numbers);
console.log("Doubled:", doubled);
console.log("Greater than 10:", greaterThanTen);
console.log("Total sum:", total);
```

* * *

## Final thoughts

JavaScript array methods make your code cleaner, shorter, and easier to understand.

If you are just starting out, focus on understanding these three things for each method:

*   what it does
    
*   whether it changes the original array or creates a new one
    
*   when to use it in a real problem
    

A good order for beginners is:

1.  `push()` and `pop()`
    
2.  `shift()` and `unshift()`
    
3.  `forEach()`
    
4.  `map()`
    
5.  `filter()`
    
6.  `reduce()`
    

Also, avoid method chaining in the beginning.

First become comfortable using one method at a time.

Once the basics are clear, you will find arrays much easier to work with in JavaScript.

* * *

## Quick challenge

Take this array:

```js
let nums = [1, 5, 10, 20];
```

Try to do these on your own:

*   add `50` at the end
    
*   remove the first element
    
*   create a new array with all values tripled
    
*   create another array with only values greater than `10`
    
*   find the total sum
    

Try them in your console before looking at any answer.

* * *

## Conclusion

Array methods are a big step toward writing better JavaScript.

At first, some of them may look confusing, especially `map()`, `filter()`, and `reduce()`. But with a little practice, they become very natural.

Keep experimenting with small arrays, run examples in the console, and try changing the values yourself.

That is the fastest way to learn.