# Array Methods You Must Know

Imagine you need to store thousands of numbers. How would you handle this?  
  
Someone who doesn't know about arrays might try to use separate variables for each number. But if you know about data structures, you can use an array to store many values in one place.  
Now, if you have data in an array and want to add more, you might think of making a new array, copying everything over, and then adding new values. But this takes too much time and space.  
To simplify, JavaScript has built-in methods to help modify arrays easily.

### But how can arrays have methods?

Arrays in JavaScript are objects, and objects can have properties and methods. In this blog, we'll explore key array methods. We'll use real-world problems to help you understand them better.

### Problem 1 — Adding New Students

You have data for thousands of students in an array in your college system. New students are enrolling, and you need to add their information.  
You could create a new array, copy all existing students, and then add the new ones. However, this takes extra time and space.  
JavaScript has a method called push() that lets you add elements to the end of the array easily.

```javascript
let students = ["Rahul", "Amit", "Neha"];

students.push("Priya");

console.log(students);
```

Output

```javascript
["Rahul", "Amit", "Neha", "Priya"]
```

The `push()` method adds the new element **at the end of the array**.

### Problem 2 — Removing Students From the End

Now imagine that **10 students have graduated** and you need to remove them from the system.Instead of copying elements to another array, JavaScript provides the `pop()` method.`pop()` removes the **last element** from the array.

```javascript
let students = ["Rahul", "Amit", "Neha", "Priya"];
students.pop();
console.log(students);
```

Output

```javascript
["Rahul", "Amit", "Neha"]
```

The `pop()` method removes the **last element of the array**.

### Problem 3 — Adding Students at the Beginning

Sometimes you may want to **add an element at the beginning of the array**. One approach would be to create a new array and shift all elements to the right, but that is **tedious**.JavaScript provides the `unshift()` method for this purpose.

```javascript
let students = ["Rahul", "Amit", "Neha"];
students.unshift("Priya");
console.log(students);
```

Output

```javascript
["Priya", "Rahul", "Amit", "Neha"]
```

The `unshift()` method **adds elements to the beginning of the array**.

### Problem 4 — Removing Students From the Beginning

Now suppose you want to **remove a student from the beginning of the array**.Instead of manually copying elements, JavaScript provides the `shift()` method.

```javascript
let students = ["Priya", "Rahul", "Amit", "Neha"];
students.shift();
console.log(students);
```

Output

```javascript
["Rahul", "Amit", "Neha"]
```

The `shift()` method **removes the first element of the array**.

Let's learn how to work with array elements using some powerful built-in JavaScript methods.

### map function

The map() method iterates over each item in an array, applies a function to each, and generates a new array with the modified items.It doesn't change the original array.

```javascript
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map((num) => {
  return num * 2;
});
console.log(doubled);
```

Output

```javascript
[2, 4, 6, 8, 10]
```

In this example, map() goes through each item in the array, doubles it, and creates a new array with these doubled values.

### filter function

The filter() method selects items from an array that meet a certain condition. It uses a function that returns true or false. If true, the item is added to a new array.

```javascript
let numbers = [5, 12, 8, 20, 3, 15];
let result = numbers.filter((num) => {
  return num > 10;
});
console.log(result);
```

Output

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

The filter() method creates a new array with elements that meet the condition.

### reduce function

reduce() turns an array into one value by using a function repeatedly. It needs two things: a function and a starting value.

```javascript
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, curr) => {
  return acc + curr;
}, 0);
console.log(sum);
```

Output

```plaintext
15
```

Here:  
acc = accumulator (stores the result)  
curr = current element  
The function adds numbers together until it gets the final result.

### forEach function

forEach() goes through each element in an array and performs an action. It doesn't create a new array like map().

```javascript
let numbers = [1, 2, 3];
numbers.forEach((num) => {
  console.log(num * 2);
});
```

Output

```plaintext
2
4
6
```

The forEach() method runs a function on each element.

### Conclusion

JavaScript arrays have built-in methods that help manage data easily.

*   map() → changes each element and gives a new array
    
*   filter() → picks elements that meet a condition
    
*   reduce() → merges all elements into one value
    
*   forEach() → goes through elements to do an action