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.

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

students.push("Priya");

console.log(students);

Output

["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.

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

Output

["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.

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

Output

["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.

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

Output

["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.

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

Output

[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.

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

Output

[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.

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

Output

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().

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

Output

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