Array Methods You Must Know in JS:-
In every programming language, we have a data structure that stores values called an array. It is a data structure that stores multiple values in a single variable, in a specific order. JavaScript provides powerful array methods that help write clean, readable, and efficient code.
Let's explain each method one by one and what it means.
1. push( ) and pop( )
.push method
This method is one of the most common methods that helps push values at the end of an array, like it pushes values from the end of that array one by one. For example:
let arr = [1, 2, 3, 4, 5];
arr.push(6);
console.log(arr);
js> node script.js
[ 1, 2, 3, 4, 5, 6 ] //output
In this example, we have an array called arr containing values from 1 to 5. Then, I use arr.push(6) to add 6 to the end of the array.
.pop method
This method is similar to the push method, but removes the last value from the array. For example, in the same code, instead of using arr.push(), we can use arr.pop() to remove the last element from the array.
let arr = [1, 2, 3, 4, 5];
arr.pop();
console.log(arr);
js> node script.js
[ 1, 2, 3, 4 ] //output
this arr.pop( ) removed the last value from the array.
2.shift( ) and unshift( )
Similar to the push and pop methods, these two insert or remove a value from the beginning of the array.
.unshift method
For example
let arr = [1, 2, 3, 4, 5];
arr.unshift(0);
console.log(arr);
js> node script.js
[ 0, 1, 2, 3, 4, 5 ] //output
In this example, I use arr.unshift(0); to insert a value at the beginning of the array.
.shift method
The .shift method removes the first value from the array.
let arr = [1, 2, 3, 4, 5];
arr.shift();
console.log(arr);
js> node script.js
[ 2, 3, 4, 5 ] //output
In this example, this arr.shift( ) removes the 1st value from the array.
3.map()
map() is one of the most important array methods in JavaScript.
It is used to create a new array by applying a change to each element of the original array. When we want to modify values without changing the original array, we use map().
The original array remains the same, and map() returns a new array with the updated values.
For example
let arr = [1, 2, 3, 4, 5];
let mapedArr = arr.map((m) => m * 2);
console.log(mapedArr);
console.log(arr);
js> node script.js
[ 2, 4, 6, 8, 10 ] // output for maped arr
[ 1, 2, 3, 4, 5 ] //output for the original arr
In this example, I created an array called arr and stored some values in it.
Then I used the map() method on that array to multiply each value by 2.
The result returned by map() is stored in a new variable called mappedArr.
After logging both variables, we can see that:
mappedArr contains the updated values
The original array arr remains unchanged
This shows that map() creates a new array and does not modify the original array.
4.filter( )
Just like map(), filter() is also an important array method in JavaScript.
Instead of copying the entire array, filter() returns a new array containing only the elements that match a given condition.
For each element, the condition inside the function is checked.
If the condition returns true, that element is included in the new array.
If it returns false, the element is skipped.
let arr = [1, 2, 10, 23, 400, 234];
let filteredArr = arr.filter((value) => value > 10);
console.log(filteredArr); // [ 23, 400, 234 ]
console.log(arr); // [ 1, 2, 10, 23, 400, 234 ]
In this example, I created an array called arr and stored some numbers inside it.
Then I used the filter() method on that array to check each value with a condition.
The condition used here is value > 10.
This means filter() will only select the values that are greater than 10.
All the values that satisfy this condition are stored in a new variable called filteredArr.
The values that do not match the condition are ignored.
After logging both variables, we can see that:
filteredArr contains only the numbers greater than 10
The original array arr remains unchanged
This shows that filter() returns a new array with selected values and does not modify the original array.
Comparing traditional for loop vs map/filter
A for loop runs the same code again and again until a given condition becomes false.
To use a for loop, we need to initialize a value, give it a condition, and increment the value after each iteration.
Using a for loop, we can do the same work that map() and filter() do, but it requires manual looping and more code.
Compared to array methods, a for loop is less clean and less readable.
Another important point is that a for loop can modify the original array if we are not careful, whereas methods like map() and filter() always return a new array and keep the original array unchanged.
For example
let nums = [1, 2, 3];
let result = [];
for (let i = 0; i < nums.length; i++) {
result.push(nums[i] * 2);
}
console.log(result); // [ 2, 4, 6 ]
Instead of using a for loop to write this code with more lines for the same outcome, we can use map, which only requires
let result = nums.map((num) => num * 2);
for the same outcome.
5.reduce( )
The reduce() method is one of the more complex array methods if it is not understood properly.
What reduce() does is take multiple values from an array and combine them into one single value.
For example, reduce() can be used to add all the numbers in an array and return their total sum.
It works by taking each value one by one and accumulating the result. reduce() also accepts an initial value. This initial value decides from where the accumulation starts.
If an initial value is provided, reduce() starts with that value.
If no initial value is provided, reduce() uses the first element of the array as the initial value by default.
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((total, value) => total + value, 0);
console.log(sum); // 10
reduce() is used to combine all elements of an array into one single value. In this example, the initial value is 0. This means the total parameter starts with the value 0, and then each element of the array is added to it.
If we change the initial value to 1, then the total will start from 1.
After that, all the values of the array will be added to this starting value.
So the final result will be 1 plus the sum of all array values.
6.forEach()
forEach() is an array method used to loop through each element of an array and perform an action on it. It works very similarly to a for loop, but the looping is handled automatically.
forEach() executes a function once for every element in the array.
Unlike map() and filter(), forEach() does not return a new array.
It is mainly used when we only want to do something with each value, such as printing it or updating something outside the array.
let arr = [10, 20, 30, 40];
arr.forEach((value) => {
console.log(value);
});
//output
js> node script.js
10
20
30
40
In this example, forEach() goes through the array one by one, likea for loop, it then passes each value to the function, and then the function runs for every element and logs the values.
