map, filter, & reduce

a^2 + b^2 = c^2 \newline \newline S_n = \frac{n(2a + (n-1)d)}{2}

c = \sqrt{a^2 + b^2}

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)

import { motion } from 'framer-motion';
import React from 'react';
import { Wrapper, Tab } from './Components';
import './scene.css';

const Tabs = () => {
  const [focused, setFocused] = React.useState(null);
  const [selected, setSelected] = React.useState('Item 1');
  const tabs = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <Wrapper onMouseLeave={() => setFocused(null)}>
      {tabs.map((item) => (
        <Tab
          key={item}
          onClick={() => setSelected(item)}
          onKeyDown={(event: { key: string }) =>
            event.key === 'Enter' ? setSelected(item) : null
          }
          onFocus={() => setFocused(item)}
          onMouseEnter={() => setFocused(item)}
          tabIndex={0}
        >
          <span>{item}</span>
          {focused === item ? (
            <motion.div
              transition={{
                layout: {
                  duration: 0.2,
                  ease: 'easeOut',
                },
              }}
              style={{
                position: 'absolute',
                bottom: '-2px',
                left: '-10px',
                right: 0,
                width: '140%',
                height: '110%',
                background: '#23272F',
                borderRadius: '8px',
                zIndex: 0,
              }}
              layoutId="highlight"
            />
          ) : null}
          {selected === item ? (
            <motion.div
              style={{
                position: 'absolute',
                bottom: '-10px',
                left: '0px',
                right: 0,
                height: '4px',
                background: '#5686F5',
                borderRadius: '8px',
                zIndex: 0,
              }}
              layoutId="underline"
            />
          ) : null}
        </Tab>
      ))}
    </Wrapper>
  );
}

export default Tabs;

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]

import "./style.scss"
import "../scene.css";

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