Array Methods You Must Know in JavaScript
When working with JavaScript, arrays are used very often to store collections of values.
For example:
A list of numbers
A list of products
A list of tasks
JavaScript provides built-in array methods that make it easier to add, remove, and process data inside arrays.
In this article, we’ll look at some essential array methods every beginner should know.
1. push() – Add Element to End
The push() method adds a new element to the end of an array.
Example
let fruits = ["Apple", "Banana", "Mango"];
fruits.push("Orange");
console.log(fruits);
Before
["Apple", "Banana", "Mango"]
After
["Apple", "Banana", "Mango", "Orange"]
2. pop() – Remove Last Element
The pop() method removes the last element from an array.
Example
let fruits = ["Apple", "Banana", "Mango"];
fruits.pop();
console.log(fruits);
Before
["Apple", "Banana", "Mango"]
After
["Apple", "Banana"]
3. shift() – Remove First Element
The shift() method removes the first element of an array.
Example
let numbers = [10, 20, 30];
numbers.shift();
console.log(numbers);
Before
[10, 20, 30]
After
[20, 30]
4. unshift() – Add Element to Beginning
The unshift() method adds an element to the start of the array.
Example
let numbers = [20, 30];
numbers.unshift(10);
console.log(numbers);
Before
[20, 30]
After
[10, 20, 30]
5. forEach() – Loop Through Array
forEach() runs a function for every element in the array.
Example:
let numbers = [1, 2, 3];
numbers.forEach(function(num) {
console.log(num);
});
Output:
1
2
3
This is a cleaner alternative to a traditional loop.
Traditional Loop vs forEach()
Traditional Loop
let numbers = [1,2,3];
for(let i = 0; i < numbers.length; i++){
console.log(numbers[i]);
}
forEach()
numbers.forEach(num => console.log(num));
Both do the same thing, but forEach() is shorter and more readable.
6. map() – Transform Array Values
The map() method creates a new array by modifying each element.
Example: Double Numbers
let numbers = [2,4,6];
let doubled = numbers.map(num => num * 2);
console.log(doubled);
Before
[2,4,6]
After
[4,8,12]
Important: map() does not change the original array.
7. filter() – Select Elements Based on Condition
filter() creates a new array containing only elements that match a condition.
Example: Numbers Greater Than 10
let numbers = [5,12,8,20];
let result = numbers.filter(num => num > 10);
console.log(result);
Before
[5,12,8,20]
After
[12,20]
8. reduce() – Combine Array Values
reduce() is used to combine all values in an array into a single value.
A common use is calculating the sum of numbers.
Example
let numbers = [5,10,15];
let total = numbers.reduce((sum, num) => sum + num, 0);
console.log(total);
Steps
0 + 5 = 5
5 + 10 = 15
15 + 15 = 30
Final result:
30
Think of reduce() as accumulating values step by step.
Array methods make working with arrays in JavaScript much easier and cleaner compared to writing long loops.
Methods like map(), filter(), and reduce() are widely used in modern JavaScript development because they make code more readable and expressive.
If you practice these methods regularly, you’ll quickly become comfortable working with arrays in real projects.