5.1 실전 데이터 다루기

5.1.1 2차원 배열에서 숫자 다루기

홀수의 제곱을 모두 더한 총합은?

const numbers = [
  [1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [9, 10]
];

const oddSquareSum = numbers
  .flat()
  .filter(a => a % 2 === 1)
  .map(a => a * a)
  .reduce((a, b) => a + b, 0);

5.1.2 농구팀 데이터 다루기

30점 이상 득점한 선수들의 점수 총합은?

type Player = {
  name: string;
  score: number;
};

type Team = {
  name: string;
  players: Player[];
};

const teams: Team[] = [
  {
    name: 'Bears', players: [
      { name: 'Luka', score: 32 },
      { name: 'Anthony', score: 28 },
      { name: 'Kevin', score: 15 },
      { name: 'Jaylen', score: 14 },
    ]
  },
  {
    name: 'Lions', players: [
      { name: 'Stephen', score: 37 },
      { name: 'Zach', score: 20 },
      { name: 'Nikola', score: 19 },
      { name: 'Austin', score: 22 },
    ]
  },
  {
    name: 'Wolves', players: [
      { name: 'Jayson', score: 32 },
      { name: 'Klay', score: 37 },
      { name: 'Andrew', score: 15 },
      { name: 'Patrick', score: 14 },
    ]
  },
  {
    name: 'Tigers', players: [
      { name: 'DeMar', score: 37 },
      { name: 'Marcus', score: 21 },
      { name: 'Al', score: 19 },
      { name: 'Dennis', score: 22 },
    ]
  },
];

const totalHighScores = teams
	.map(team => team.players)
	.flat()
	.filter(player => player.score >= 30)
	.map(player => player.score)
	.reduce((acc, cur) => acc + cur, 0)

flat과 map을 합쳐서 flatMap 사용 가능

const totalHighScores = teams
	.flatMap(team => team.players)
	.filter(player => player.score >= 30)
	.map(player => player.score)
	.reduce((acc, cur) => acc + cur, 0)

<aside> 💡

위의 이차원 배열을 다루는 로직과, 농구팀 데이터를 다루는 로직이 크게 다르지 않다. 함수형 프로그래밍은 데이터를 일반적인 패턴으로 다루어 이를 다양한 데이터 형태에 쉽게 적용할 수 있다.

</aside>

// 이차원 배열
const oddSquareSum = numbers
  .flat()
  .filter(a => a % 2 === 1)
  .map(a => a * a)
  .reduce((a, b) => a + b, 0);
  
// 복잡한 농구팀 데이터
const totalHighScores = teams
	.flatMap(team => team.players)
	.filter(player => player.score >= 30)
	.map(player => player.score)
	.reduce((acc, cur) => acc + cur, 0)

5.1.3 커머스 데이터 다루기

선택된 제품의 수량 및 가격을 합산하는 코드를 더 쉽게 변경해보자.

type Product = {
  name: string;
  price: number;
  quantity: number;
  selected: boolean;
};

const products: Product[] = [
  {
    name: 'T-shirt',
    price: 10000,
    quantity: 1,
    selected: true,
  },
  {
    name: 'Shirt',
    price: 30000,
    quantity: 2,
    selected: false,
  },
  {
    name: 'Pants',
    price: 15000,
    quantity: 2,
    selected: true,
  }
];

const sumSelectedQuantities = (products: Product[]) =>
  products.reduce((total, prd) => {
    if (prd.selected) {
      return total + prd.quantity;
    } else {
      return total;
    }
  }, 0);

const calcSelectedPrices = (products: Product[]) =>
  products.reduce((total, prd) => {
    if (prd.selected) {
      return total + prd.price * prd.quantity;
    } else {
      return total;
    }
  }, 0);