내장고차함수 filter, map, reduce

Junny_·2022년 7월 22일
0
post-custom-banner

filter

filter 활용은 3가지의 과정으로 나눌 수 있다

  • 배열의 각 요소가
  • 특정 논리(함수)에 따르면, 사실(true)일 때
  • 따로 분류한다(filter)

즉, 조건에 맞는 데이터만 분류할 때 사용한다

// ex)
const a = [
  {
    id : 1,
    name : 'name',
    age : '20',
    title : 'title',
    subtitle : 'subtitle'
  },
  {
    id : 2,
    // .. 이하 생략
  },
  {
    id : 3,
    // .. 이하 생략
  },
];

// 나이가 20인지 확인하는 함수
// 단행본 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 단행본 한 권의 출판 연도가 2003인지 확인하는 함수
const isCreatedAt2003 = (cartoon) => {
  const fullYear = new Date(cartoon.createdAt).getFullYear()
  return fullYear === 2003;
}; 

// 출판 연도가 2003년인 책의 모음
const filteredCartoons = cartoons.filter(isCreatedAt2003); 
// id 1번 객체를 얻어옴

map

map 활용은 3가지의 과정으로 나눌 수 있다

  • 배열의 각 요소가
  • 특정 논리(함수)에 의해
  • 다른 요소로 지정(map) 된다

즉, map은 하나의 데이터를 다른 데이터로 매핑(mapping)할 때 사용한다

// 만화책 모음
const cartoons = [
  {
    id: 1,
    bookType: 'cartoon',
    title: '식객',
    subtitle: '어머니의 쌀',
    createdAt: '2003-09-09',
    genre: '요리',
    artist: '허영만',
    averageScore: 9.66,
  },
  {
    id: 2,
    // .. 이하 생략
  },
  // ... 이하 생략
]; 

// 만화책 한 권의 부제를 리턴하는 로직(함수)
const findSubtitle = (cartoon) => {
  return cartoon.subtitle;
}; 

// 각 책의 부제 모음 
const subtitles = cartoons.map(findSubtitle);
// 모든 객체의 subtitle 정보를 얻어옴

reduce

reduce 활용은 4가지의 과정으로 나눌 수 있다

  • 배열의 각 요소를
  • 특정 방법(함수)에 따라
  • 원하는 하나의 형태로
  • 응축한다 (reduction)

즉, reduce는 여거 데이터를 하나의 데이터로 응축(reduce)할 때 사용한다

const joinName = (resultStr, user) => {
  resultStr = resultStr + user.name + ', ';
  return resultStr;
}

let users = [
  { name: 'Tim', age: 40 },
  { name: 'Satya', age: 30 },
  { name: 'Sundar', age: 50 }
];

users.reduce(joinName, '');
// joinName은 users 배열 안에 있는 요소의 이름을 하나로 응축한다
profile
Front-end
post-custom-banner

0개의 댓글