map, filter, & reduce

map

It always returns copy of array
sourceArray.length === outputArray.length -> true
Transforms data type

// eg:1
const nums = [10, 5, 15];
const squares = nums.map((num) => num * num);
console.log(squares);
//  [ 100, 25, 225  ]
console.log(nums);
//  [ 10, 5, 15 ]

i. Observations

nums remains unchanged
nums.length equals squares.length
nums (Array of numbers) -> squares (Array of numbers)
Transformation was not need here

// eg:2
const avengers = [
  "Hulk",
  "Iron man",
  "Black widow",
  "Captain america",
  "Spider man",
  "Thor",
];
// Array of Strings  ->  Array of numbers
const letterCount = avengers.map((name) => name.length);
console.log(letterCount);
// [4, 8, 11, 15, 10, 4]

ii. Observations

avengers remains unchanged
avengers.length equals letterCount.length
nums (Array of strings) -> squares (Array of numbers)

filter

It always returns copy of the array
sourceArray.length >= outputArray.length -> true
input data type === output data type

// eg:1
const marks = [90, 40, 25, 85, 10, 0, 99];
const passedMarks = marks.filter((mark) => mark >= 40);
console.log(passedMarks, marks);
// [90, 40,  85, 99]

iii. Observations

marks remains unchanged
marks.length is greather than marks.length
marks (Array of numbers) >= passedMarks( Array of numbers) -> true

// eg:2
const avengers = [
  "Hulk",
  "Iron man",
  "Black widow",
  "Captain america",
  "Spider man",
  "Thor",
];
// Array of strings -> Array of strings
const largeAvengerNames = avengers.filter((name) => name.length > 10);
console.log(largeAvengerNames);
// ["Black widow", "Captain america"]

iv. Observations

avengers remains unchanged
avengers.length is greather than largeAvengerNames.length
avengers (Array of strings) >= largeAvengerNames( Array of strings) -> true

dot chaining (pattern)

Dot chaining can continue until the array methods returns new array

const scores = [
  {
    marks: 32,
    name: "Yvette Merritt",
  },
  {
    marks: 57,
    name: "Lillian Ellis",
  },
  {
    marks: 22,
    name: "Mccall Carter",
  },
  {
    marks: 21,
    name: "Pate Collier",
  },
  {
    marks: 91,
    name: "Debra Beard",
  },
  {
    marks: 75,
    name: "Nettie Hancock",
  },
  {
    marks: 20,
    name: "Hatfield Hodge",
  },
];
const passedStudentsNames = scores
  .filter((student) => student.marks >= 40)
  .map((student) => student.name);
console.log(passedStudentsNames);
// ["Lillian Ellis", "Debra Beard",  "Nettie Hancock" ]

v. Observations

filter and map always returns array
Hence we could keep chaining untill array method returns array

reduce

Array -> any data type

// eg:1
const sum = [1, 7, 3, 10, 5].reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 26
const sum1 = [1, 7, 3, 10, 5].reduce((acc, curr) => acc + curr);
console.log(sum1); // 26

initial value -> 0 hence acc value in first loop is 0

acc	curr	result (acc + curr)
0	1	1
1	7	8
8	3	11
11	10	21
21	5	26

// eg:2
const sum1 = [1, 7, 3, 10, 5].reduce((acc, curr) => acc + curr);
console.log(sum1); // 26

Since no initial value hence acc -> first value & curr -> second value in array

acc	curr	result (acc + curr)
1	7	8
8	3	11
11	10	21
21	5	26

// eg:3
const total = scores
  .map((stu) => stu.marks)
  .reduce((acc, curr) => acc + curr, 0);
const avg = total / scores.length;
console.log(total, avg.toFixed(2));
// 318 '45.43'

@ragavkumarv

swipe to next ➡️

Blog

map, filter, & reduce

map

i. Observations

ii. Observations

filter

iii. Observations

iv. Observations

dot chaining (pattern)

v. Observations

reduce