---

.map() :

This function helps to Map each element from the given array and do the manipulation like incrementing by 2, multiplying by 5, and so on…

Syntax:

map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

// Callback function
map(callbackFn)
map(callbackFn, thisArg)

Example :

//Multiply all the elements in the given array by 2
const arr = [1,2,3,4,5];
const mapFun = arr => arr.map(a=>a*2)
console.log(mapFun); // [2,3,6,8,10]

.filter():

The filter function helps us to filter the elements in an array based on the given condition.

Syntax:

filter((element) => { /* … */ })
filter((element, index) => { /* … */ })
filter((element, index, array) => { /* … */ })

// Callback function
filter(callbackFn)
filter(callbackFn, thisArg)

Example:

//Below function takes an array of strings and returns an array with only 
//the strings(Filtering) that have a length greater than 5.
const filterLongStrings = (fruits) => 
  fruits.filter((fruit) => fruit.length > 5);
const fruits = ["apple", "banana", "cherry", "watermelon", "pineapple"];
console.log(filterLongStrings(fruits)); //["banana", "cherry", "watermelon", "pineapple"]

.find():

The find function helps us to find the first element from the array based on the condition. It returns the first element in the array that satisfies the condition, otherwise undefined.

Syntax:

// Arrow function
find((element) => { /* … */ })
find((element, index) => { /* … */ })
find((element, index, array) => { /* … */ })

// Callback function
find(callbackFn)
find(callbackFn, thisArg)

Example:

//Below function takes an array of numbers and returns the first number 
//that is divisible by 5.

const numbers1 = [1, 20, 35, 2, 4, 70];
const isDivisibleBy5 = (numbers) => numbers.find((number) => number % 5== 0);
console.log(isDivisibleBy5(numbers1));
// Output: 20

.reduce():

This reduce function iterates through the elements in the array passing in the return value from the calculation on the preceding element(accumulate). The final result of running the reducer across all elements of the array is a single value.

Syntax:

// Arrow function
reduce((accumulator, currentValue) => { /* … */ })
reduce((accumulator, currentValue, currentIndex) => { /* … */ })

// Callback function
reduce(callbackFn)
reduce(callbackFn, initialValue)

Example:

//Function to return the sum of numbers in the array
arr = [1,2,3,4,5];
const normalSum = arr => {
  let sum = 0;
  for(let i=0;i<arr.length;i++){
    sum+=arr[i];
  }
  return sum;
}

//Using reduce()
const getSum = (acc,curr) => acc+curr;
const sumOfNumbers = arr.reduce(getSum,0);
const sumOfNumbers = arr.reduce((acc,curr)=>acc = acc+curr;
  return acc;
},0);
console.log(sumOfNumbers); //15

• reduce() is a little bit tricky to understand so we will see one more example to understand it better.

//Write a function that takes an array of objects and returns the 
//object having age greater than 30
const people = [
  { name: "Raj", age: 28 },
  { name: "Swapnil", age: 42 },
  { name: "Anushka", age: 35 },
];

//using filter and map.
const filterMapFun= people
  .filter((person) => person.age > 30)
  .map((person) => person.name);

//using reduce
const reduceFun= people5.reduce((acc, curr) => {
  if (curr.age > 30) {
    acc.push(curr.name);
  }
  return acc;
}, []);
console.log(filterMapFun); //[ 'Swapnil', 'Anushka' ]
console.log(reduceFun); // [ 'Swapnil', 'Anushka' ]

Thanks for reading! I hope you all have gained some knowledge by reading this article.

Keep smiling!

Have a nice day!