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.
let fruits = ["apple", "banana"];
fruits.push("mango");
console.log(fruits); // ["apple", "banana", "mango"]
pop() removes the last item from an array and returns it.
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.
let fruits = ["banana", "mango"];
fruits.unshift("apple");
console.log(fruits); // ["apple", "banana", "mango"]
shift() removes the first item from an array and returns it.
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:
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:
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.
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.
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.
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.
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.
