Array Methods You Must Know
After learning basics of array ( Blog Link ), and how can we process each elements of array using loops, the next step is understanding "Methods of Array".
Array methods are built in functions in JavaScript that help us to work with array more effectively.
Instead of writing loops everytime, JavaScript provides few simple methods to perform below operations on array :
Add Elemets
Remove Elements
Transform Arrays
Filter Values
Calculate Results
In this article we will cover some of the most useful methods of array, which are listed below :
push()
pop()
shift()
unshift()
map()
filter()
reduce()
forEach()
Let's understand them one by one.
push() : Add an Element to End of Array
The push() method is used to add a new element at the end of the Array.
Example :
let fruits = ["Apple", "Banana", "Mango"];
fruits.push("Orange");
console.log(fruits);
Output :
[ "Apple", "Banana", "Mango", "Orange" ]
So we can say that, push() simple adds a new item at the end of the array.
pop() : Remove the Last Element
The pop() method is used to remove the last element of an Array.
Example :
let fruits = ["Apple", "Banana", "Mango"];
fruits.pop();
console.log(fruits);
Output :
[ "Apple", "Banana" ]
shift() : Remove the First Element
The shift() method is used to remove the first element of an Array.
Example :
let fruits = ["Apple", "Banana", "Mango"];
fruits.shift();
console.log(fruits);
Output :
[ "Banana", "Mango" ]
unshift() : Add Element to the Beginning
The unshift() method is used to add an element at the beginning of an Array.
Example :
let fruits = ["Apple", "Banana", "Mango"];
fruits.unshift("Orange");
console.log(fruits);
Output :
[ "Orange", "Apple", "Banana", "Mango" ]
forEach() : Loop Through an Array
The forEach() method is used to run a function for every element in an array.
Example :
let numbers = [1, 2, 3, 4];
numbers.forEach(function(num) {
console.log(num);
});
Output:
1
2
3
4
This works similar to a traditional for loop, but the syntax is little bit different and cleaner.
map() : Transform Every Element
The map() method creates a new array by transforming each element.
This means we can change every value in an array easily.
Example : Double each Number
let numbers = [2, 4, 6];
let doubled = numbers.map(function(num) {
return num * 2;
});
console.log(doubled);
Before
[2, 4, 6]
After
[4, 8, 12]
Important point:
map() does not modify the original array, It creates a new array.
map() is much shorter and clearer than for loop.
filter() : Select Elements Based on a Condition
The filter() method creates a new array with elements that pass a condition.
Example: Numbers greater than 10
let numbers = [5, 12, 8, 20, 3];
let result = numbers.filter(function(num) {
return num > 10;
});
console.log(result);
Before
[5, 12, 8, 20, 3]
After
[12, 20]
Only numbers greater than 10 remain.
reduce() : Combine Values into One Result
The reduce() method processes the entire array and reduces it into a single value.
Common uses include:
calculating totals
counting values
combining results
Example: Calculate total sum
let numbers = [5, 10, 15];
let total = numbers.reduce(function(sum, num) {
return sum + num;
}, 0);
console.log(total);
Step by Step
0 + 5 = 5
5 + 10 = 15
15 + 15 = 30
Final result:
30
So reduce() takes all elements and combines them into one final value.
Conclusion :
Array methods explained in this article are sufficient for beginners to explore the array operations and work with them.
