# Understanding Important JavaScript Array Methods .

Arrays are one of the most commonly used data structures in JavaScript. When working with lists of data such as numbers, names, or objects, JavaScript provides several built-in methods that make array manipulation easier.

In this article, we’ll cover some key array methods that every beginner should know. These methods often replace traditional loops and help you write clearer and more expressive JavaScript.

* * *

# push() and pop()

The `push()` method adds a new element to the **end of an array**, while `pop()` removes the **last element**.

### Example

```plaintext
let numbers = [1, 2, 3];

numbers.push(4);
console.log(numbers);
```

**Before:** `[1, 2, 3]`  
  
**After:** `[1, 2, 3, 4]`

Now using `pop()`:

```plaintext
numbers.pop();
console.log(numbers);
```

**Before:** `[1, 2, 3, 4]`  
  
**After:** `[1, 2, 3]`

### Important Note

Both `push()` and `pop()` **change the original array instead of creating a new one**.

Example:

```plaintext
let numbers = [1, 2, 3];

numbers.push(4);

console.log(numbers);
```

Output:

```plaintext
[1, 2, 3, 4]
```

The original array itself changes.

* * *

# shift() and unshift()

While `push()` and `pop()` work at the **end** of an array, `shift()` and `unshift()` work at the **beginning**.

*   `unshift()` adds an element to the start of the array.
    
*   `shift()` removes the first element.
    

### Example

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

fruits.unshift("mango");
console.log(fruits);
```

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

Now removing the first element:

```plaintext
fruits.shift();
console.log(fruits);
```

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

Just like `push()` and `pop()`, `shift()` and `unshift()` **also change the original array**.

* * *

# forEach()

The `forEach()` method runs a function for **each element in an array**. It’s often used when you want to perform an action for every item, such as logging values.

### Example

```plaintext
let numbers = [1, 2, 3];

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

Output:

```plaintext
1
2
3
```

Unlike some other methods, `forEach()` **does not return a new array**. It simply runs the function for each element.

* * *

# Important Note About Async Code

`forEach()` expects a **synchronous function**. It does **not wait for promises or async functions to finish**, which can lead to unexpected behavior.

Example:

```plaintext
const numbers = [1, 2, 3];

numbers.forEach(async (num) => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log(num);
});

console.log("Done");
```

Possible output:

```plaintext
Done
1
2
3
```

In this example, `"Done"` prints before the numbers because `forEach()` does not wait for the asynchronous operations to complete.

If you need to handle asynchronous operations **in order**, a `for...of` loop is usually a better choice:

```plaintext
const numbers = [1, 2, 3];

async function processNumbers() {
  for (const num of numbers) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log(num);
  }
}

processNumbers();
```

* * *

# map()

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

### Traditional for loop vs map()

Using a **for loop**:

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

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

Using **map()**:

```plaintext
let numbers = [1, 2, 3];

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

console.log(doubled);
```

Result:

```plaintext
[2, 4, 6]
```

Unlike `push()` or `pop()`, `map()` **does not change the original array**. Instead, it returns a **new array**.

* * *

# filter()

The `filter()` method creates a new array that contains only the elements that meet a certain condition.

### Example

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

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

console.log(greaterThanTen);
```

Result:

```plaintext
[12, 20]
```

`filter()` **does not change the original array**. It returns a **new filtered array**.

* * *

# reduce() (Basic Idea)

The `reduce()` method processes an array and **combines all elements into a single value**. It’s commonly used for calculations such as totals.

### Example

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

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

console.log(total);
```

Result:

```plaintext
10
```

### Explanation

*   `sum` stores the accumulated value.
    
*   `num` represents the current array element.
    
*   Each step adds the current number to the running total.
    

You can think of `reduce()` as **building one final result from all array values**.

* * *

# Practice Assignment

To strengthen your understanding, try this exercise in your browser console:

1.  Create an array of numbers.
    
2.  Use `map()` to double each number.
    
3.  Use `filter()` to keep numbers greater than 10.
    
4.  Use `reduce()` to calculate the total sum.
    

Example starting array:

```plaintext
let numbers = [2, 5, 8, 12, 20];
```

* * *

# Final Thoughts

Array methods such as `map()`, `filter()`, and `reduce()` make JavaScript code cleaner and easier to understand compared to traditional loops. It’s also important to understand the difference between methods that **modify the original array** and those that **return a new array**.

The best way to learn these methods is by experimenting. Open your browser console, create some arrays, and try these methods yourself. Hands-on practice will help you remember and apply these concepts in real projects.