# Array Methods You Must Know

Imagine we have a list of students in a classroom. Sometimes we want to add a new student to the list. Sometimes we want to remove someone. Sometimes we want to go through the entire list and do something with each name. We do all of this manually in real life, and JavaScript gives us built-in tools to do the same thing with arrays. These tools are called array methods.

Let's go through the ones we will use most often.

* * *

## push() and pop()

These two methods work on the end of an array.

`push()` adds one or more items to the end of an array.

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

fruits.push("mango");

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

`pop()` removes the last item from an array and returns it.

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

let removed = fruits.pop();

console.log(removed); // "mango"
console.log(fruits);  // ["apple", "banana"]
```

Think of it like a stack of plates. We add a plate on top with `push()` and take the top plate off with `pop()`.

* * *

## shift() and unshift()

These two do the same thing as `push()` and `pop()`, but they work on the beginning of the array instead of the end.

`unshift()` adds one or more items to the front of an array.

```javascript
let fruits = ["banana", "mango"];

fruits.unshift("apple");

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

`shift()` removes the first item from an array and returns it.

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

let first = fruits.shift();

console.log(first);  // "apple"
console.log(fruits); // ["banana", "mango"]
```

A simple way to remember this: `push` and `pop` touch the end. `unshift` and `shift` touch the beginning.

* * *

## forEach()

`forEach()` goes through every item in an array and runs a function on each one. It is the cleaner alternative to writing a traditional `for` loop when we just want to do something with each item.

With a regular for loop, it looks like this:

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

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
```

With `forEach()`, the same thing looks like this:

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

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

// Output: 1, 2, 3, 4, 5
```

Both do the same job. `forEach()` is just easier to read and write once we get comfortable with it.

* * *

## map()

`map()` is one of the most useful array methods we will come across. It goes through every item in an array, does something to each one, and returns a brand new array with the updated values. The original array stays untouched.

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

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

console.log(doubled);  // [2, 4, 6, 8, 10]
console.log(numbers);  // [1, 2, 3, 4, 5] — original unchanged
```

Think of it like a machine on a production line. Items go in one side, get transformed, and come out the other side as something new. The raw materials do not disappear, we just get a new output.

The key difference between `forEach()` and `map()` is this: `forEach()` just loops and does something. `map()` loops, transforms, and gives us back a new array.

* * *

## filter()

`filter()` goes through an array and returns a new array containing only the items that pass a condition we define. Everything that does not pass the condition gets left out.

```javascript
let numbers = [3, 7, 12, 5, 18, 2];

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

console.log(greaterThanTen); // [12, 18]
```

The original array stays as it is. We just get a new filtered version back.

A real world way to picture it: imagine we have a list of job applicants and we only want to keep those with more than 2 years of experience. We run the list through a filter, and get back only the ones that qualify.

```javascript
let applicants = [
  { name: "Arjun", experience: 1 },
  { name: "Priya", experience: 3 },
  { name: "Rahul", experience: 5 },
  { name: "Sneha", experience: 2 },
];

let qualified = applicants.filter(function(person) {
  return person.experience > 2;
});

console.log(qualified);
// [{ name: "Priya", experience: 3 }, { name: "Rahul", experience: 5 }]
```

* * *

## reduce()

`reduce()` is a bit different from the others. Instead of returning a new array, it reduces the entire array down to a single value. The most common use case is calculating a total.

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

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

console.log(total); // 15
```

Here is what is happening step by step. We start with `0` as the initial value, which is the `accumulator`. Then for each item in the array, we add the current item to the accumulator and carry the result forward. By the end, the accumulator holds the final total.

For now, just focus on the pattern: `reduce()` takes all the items in an array and combines them into one single result. We will use it most often for summing up numbers.

* * *