배열 내장 고차함수(map, filter, reduce)

MihyunCho·2021년 3월 24일
0
post-thumbnail

자바스크립트에는 기본적으로 내장(built-in)되어 있는 고차 함수들이 있다.
: 배열 메소드들 중 일부가 고차 함수에 해당


map

map : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

구문
arr.map(callback(currentValue[, index[, array]])[, thisArg])

  • 행동은 모두 내가 작성해야하며, 함수로 작성해여 인자로 넣는다.
  • 기존 배열을 수정하지 않는다.
  • 원하는 행동에 따라 결과가 달라진다.
  1. 배열의 각 요소가
  2. 특정 논리(함수)에 의해
  3. 다른 요소로 지정(map) 된다.

예제

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

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

const subtitles = cartoons.map(findSubtitle); // 부제의 모음

filter

filter : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

구문
arr.filter(callback(element[, index[, array]])[, thisArg])

  • 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.
  • 행동은 내가 직접 작성해야함.
  • 함수로 작성하여 인자로 넣는다
  • 기존 배열을 수정하지 않는다.
  • 원하는 필터링에 따라 결과가 달라진다.
  1. 배열의 각 요소가
  2. 특정 논리(함수)에 따르면, 사실(boolean)일 때
  3. 따로 분류한다(filter).

예제

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

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

const filteredCartoons = cartoons.filter(isCreatedAt2003); // 출판년도가 2003년인 책의 모음

reduce

reduce : 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

구문
arr.reduce(callback[, initialValue])

  • 초기값을 정할수 있다. 정하지 않으면 배열의 가장 첫번째 요소가 초기값이 됨
  • 초기값은 누적값의 기반이 된다. 배열의 끝까지 반복을 한다.
  • 누적값의 값을 반환하게 된다.(원하는 행동에 의하여 누적값이 바뀐다)
  • 타입마다 객체의 초기값을 주의해야한다
  1. 배열의 각 요소를
  2. 특정 응축 방법(함수)에 따라
  3. 특정 응축 방법(함수)에 따라
  4. 응축한다(reduction)

예제

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

const scoreReducer = function (sum, cartoon) {
  return sum + cartoon.averageScore;
}; // 단행본 한 권의 평점을 누적값에 더한다.

let initialValue = 0 // 숫자의 형태로 평점을 누적한다.
const cartoonsAvgScore = cartoons.reduce(scoreReducer, initialValue) / cartoons.length; 
// 모든 책의 평점을 누적한 평균을 구한다.

reduce의 색다른 사용법

[ 배열을 문자열로 ]

수도코드

  • 배열의 각 요소 : 유져 정보
  • 응축하는 방법 (함수) : 하나의 유져의 이름과 쉼표를 이어붙인다(concat)
  • 원하는 형태 : 문자열로 누적한다.
  • 응축된 결과 : 쉼표로 구분되는 모든 유져의 이름
function 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, '');

[ 배열을 객체로 ]

수도코드

  • 배열의 각 요소 : 유져 정보
  • 응축하는 방법 (함수) : 한 유져 이름의 첫 글자를 주소록 객체 속성의 키(key)로, 유져 정보를 주소록 객체 속성의 값(value)으로 추가
  • 원하는 형태 : 주소록 객체에 누적한다.
  • 응축된 결과 : 모든 유져의 정보가 알파벳으로 구분된 주소록
function makeAddressBook(addressBook, user) {
  let firstLetter = user.name[0];

  if(firstLetter in addressBook) {
    addressBook[firstLetter].push(user);
  } else {
    addressBook[firstLetter] = [];
    addressBook[firstLetter].push(user);
  }

  return addressBook;
}

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

users.reduce(makeAddressBook, {});

최종 리턴 값

{
  T: [
    { name: 'Tim', age: 40 }
  ],
  S: [
    { name: 'Satya', age: 30 },
    { name: 'Sundar', age: 50 }
  ]
}
profile
Sic Parvis Magna 🧩

0개의 댓글