A Beginner’s Guide to JavaScript Array Methods: map(), filter(), and reduce().

map() Method :

The map() method creates a new array by applying a given function to each element of the original array.

• It does not modify the original array.
• It is an ES5 feature.
• The method takes a function as its parameter and iterates over each element of the array, applies the function, and returns a new array containing the results.

Examples :

const arr = [1,2,3];
const resArr = arr.map(i=>i*2);
console.log(resArr)
//output - [2,4,6]

const arr = [49,64,81];
const resArr = arr.map(Math.sqrt);
console.log(resArr);
//output - [7,8,9]

const arr = ['22','33','44'];
const resArr = arr.map(x=>parseInt(x));
console.log(resArr);
//output - [22,33,44]

const names = [{firstName:"sai",lastName:"kumar"},{firstName:'john',lastName:"Kenedy"}];
const result = names.map(fullName);
function fullName(name){
    return [name.firstName,name.lastName].join(" ");
}
console.log(result);
//output : [ 'sai kumar', 'john Kenedy' ]

filter() Method :

The filter() method is an array iteration method in JavaScript that is used to create a new array based on a specified condition.

• It returns a new array containing elements that satisfy the condition provided by the function.
• It does not modify the original array and also an ES5 feature.
• The method takes a function as its parameter and iterates over each element of the array, tests the condition, and includes the element in the new array if the condition is met.

Note : The filter() method does not concern itself with duplicate values. It simply evaluates the condition for each element.

Examples :

const arr = [10,18,20,25,18];
const result = arr.filter(x=>x>=18);
console.log(result);
//output - [ 18, 20, 25, 18 ]

const arr = [1,2,3,4,5,6];
const result = arr.filter(isOdd);
console.log(result);
function isOdd(x){
    return x%2 !==0;
}
//output - [ 2.5, 10, 5 ]

const arr = [-2,-90,2.5,10,5];
const result = arr.filter(isPositive);
console.log(result)
function isPositive(x){
    return x>0;
}
//output - [ 2.5, 10, 5 ]

const arr = [-2,-90,2.5,10,5];
const result = arr.filter(x=>Number.isInteger(x));
console.log(result)
//output - [ -2, -90, 10, 5 ]

reduce() Method :

The reduce() method is a versatile array iteration method in JavaScript that is used to reduce an array to a single value.

• It executes a reducer function on each element of the array to produce a single accumulated result.
• It does not modify the original array. The method results in a single value, which is the accumulated result of the function.
• If an initial value is specified, it is taken as the starting point then iterates over the array elements, applying the reducer function and accumulating the result.
• If no initial value is provided, the first element of the array is used as the initial value, and the iteration begins from the second element.

Examples : 

const arr = [
    {color:'red',fruit:'apple'},
    {color:'green',fruit:'guava'},
    {color:'green',fruit:'grapes'}
]

const result = arr.reduce((acc,item)=>{
    if(!acc[item.color]){
        acc[item.color] = [];
    };
    acc[item.color].push(item.fruit);
    return acc;
},{})
console.log(result);
//output - { red: [ 'apple' ], green: [ 'guava', 'grapes' ] }

const arr = [1,2,3];
const result = arr.reduce((acc,item)=>{
    return acc = acc+item;
},0)
console.log(result)
//output - 6