Array.map() method.
The map
method will take a callback function as an argument and called for every element in the given array. The map
function will return a new array by the result of the calling function. The map
function will not modify the original array. Hence it is an immutable function.
Let’s start with a simple example to illustrate all the above points.
const fruits = ["apple", "Avocado", "Banana", "Mango", "Pineapple", "Orange"];
const result = fruits.map((fruit) => {
return `I have a ${fruit} now.`;
});
console.log(result);
/* [
'I have a apple now.',
'I have a Avocado now.',
'I have a Banana now.',
'I have a Mango now.',
'I have a Pineapple now.',
'I have a Orange now.'
]*/
console.log(fruits);
// [ 'apple', 'Avocado', 'Banana', 'Mango', 'Pineapple', 'Orange' ]
Now we clear that callback function takes the current processed value as the first argument and processed it and return the new value. Then it will push to the new array.
Take a min and imagine what if we didn’t pass any parameter to map function?
fruits.map(()=> {})
There are few optional parameters in the callback function. I want to mention that it takes the 2nd argument in the callback function is the index of the current called value from the array.
const fruits = ["apple", "Avocado", "Banana", "Mango", "Pineapple", "Orange"];
const result = fruits.map((fruit, index) => {
const fruitObj = {};
fruitObj[index] = fruit;
return fruitObj;
});
console.log(result);
// Output
/*[
{ '0': 'apple' },
{ '1': 'Avocado' },
{ '2': 'Banana' },
{ '3': 'Mango' },
{ '4': 'Pineapple' },
{ '5': 'Orange' }
]
*/
Array.reduce() method
As the method name spoke, this method will reduce to one value. More specifically this reduce
method will execute the reducer function
that we provide as the callback function and call on each element. Finally, reduce
function will return a single value.
This reducer function needs 2 parameters. Within the reducer function
we need to return the value to use as the accumulator in the next iteration (Unless it will return the undefined
). The first time, array’s first element is the accumulator and 2nd element is the current value. (This will only happen at the first time execution of the reducer
function and if didn’t provide a initialValue
)
Let’s see it from an example.
const marks = [23, 65, 12, 87, 34];
const reducer = (acc, val) => {
console.log(`current acc: ${acc}`);
console.log(`current val: ${val}`);
return val;
};
const result = marks.reduce(reducer);
// const result = fruits.reduce(reducer);
console.log(result);
/*
current acc: 23
current val: 65
current acc: 65
current val: 12
current acc: 12
current val: 87
current acc: 87
current val: 34
34
*/
// because finally it return the last value of the array
We saw how it works. Let’s see a meaningful example. If we want to get the summation of this array we can change the reducer
function as below.
const reducer = (acc, val) => {
return val + acc;
};
But it is good to know that there are 2 other optional parameters accept by the reducer
function. Those are currentIndex
and the array
.
The reduce
function takes 2nd argument that reducer function and initialValue
.
const marks = [23, 65, 12, 87, 34];
const reducer = (acc, val) => {
console.log(`current acc: ${acc}`);
console.log(`current val: ${val}`);
return val + acc;
};
// array.reduce(reducerFunction, initialValue)
const result = marks.reduce(reducer, 30);
console.log(result);
// result
/*current acc: 30
current val: 23
current acc: 53
current val: 65
current acc: 118
current val: 12
current acc: 130
current val: 87
current acc: 217
current val: 34
251
*/
Special Scenarios:
Scenario 01:
The array has only one value.
No initial value in reduce
function.
Result: solo value in the array will return.
const marks = [30];
const result = marks.reduce((acc, val) => {});
console.log(result);
// 30
Scenario 02:
The array doesn’t have any value.
There is an initial value for reduce
function
Result: Initial value will return.
const marks = [];
const result = marks.reduce((acc, val) => {}, 30);
console.log(result);
// 30
Above both scenarios, the callback function will not be called.
If both not provided(array with values and initial value) and then we get a TypeError.
I will wrap-up this article from here. If you have anything to ask regarding this please leave a comment here. Also, I wrote this according to my understanding. So if any point is wrong, don’t hesitate to correct me. I really appreciate you.
That’s for today friends. See you soon. Thank you.
Reference:
Main image credit
Top comments (0)