Chapter 2. 내장 고차함수

학습 목표

• 배열 내장 고차 함수 filter에 대해서 이해할 수 있다.
• filter에 대한 이해를 기반으로, 나머지 내장 고차 함수를 학습할 수 있다.
  • filter, map, reduce, forEach, find, sort, some, every
• 고차 함수를 쓰는 이유를 설명할 수 있다.
• 고차 함수를 활용하여 프로그램을 작성할 수 있다.

2-1. 내장 고차 함수의 이해

• 함수를 인자로 받거나 함수를 반환하는 함수

2-2. 내장 고차 함수 filter

• 배열의 각 요소에 대해서 인자로 전달받은 함수를 실행하고, 그 결과가 true인 요소만 모아서 새로운 배열로 반환
• 조건에 맞는 데이터만 분류(filtering)할 때 사용
• 인자로 전달한 함수는 현재 요소의 값을 매개변수로 받아서 true나 false로 반환 해야함!
• 과정
  • 배열의 각 요소가
  • 특정 논리(함수)에 따르면, 사실(true)일 때
  • 따로 분류(filter)

// 예시
const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter(num => num % 2 === 0); // arr 배열에서 짝수만 모음
console.log(newArr); // [2, 4] 새로운 배열

2-3. 내장 고차 함수 map

• 배열의 각 요소에 대해서 인자로 전달받은 함수를 실행하고, 그 결과를 새로운 배열로 반환
• 하나의 데이터를 다른 데이터로 매핑(mapping)
• 인자로 전달한 함수는 현재 요소의 값을 매개변수로 받아 처리하고, 그 결과를 반환
• 과정
  • 배열의 각 요소가
  • 특정 논리(함수)에 의해
  • 다른 요소로 지정(map)

// 예시
const arr = [1, 2, 3];
const newArr = arr.map(num => num * 2); // arr 배열의 각 요소를 2배로 만들어 새로운 배열을 만듦
console.log(newArr); // [2, 4, 6]

2-4. 내장 고차함수 reduce

• 배열의 각 요소에 대해서 인자로 전달받은 함수를 실행하고, 그 결과를 누적해 하나의 값으로 반환
• 여러 데이터를, 하나의 데이터로 응축(reduce)
• 인자로 전달한 함수는 이전 요소와 현재 요소의 값을 매개변수로 받아 처리하고, 그 결과를 반환
• 과정
  • 배열의 각 요소를
  • 특정 방법(함수)에 따라
  • 원하는 하나의 형태로
  • 응축(reduction)

// 예시
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, cur) => acc + cur, 0); // arr의 모든 요소를 더한 값
console.log(sum); // 15

• 배열을 문자열로, 또는 객체로 응축할 수 있는 사용법도 있음
  • 배열을 문자열로

const arr = ['apple', 'banana', 'orange'];
const str = arr.reduce((acc, curr) => `${acc}, ${curr}`); // acc는 누적값, curr은 현재 요소
// 누적값과 현재 요소를 콤마와 함께 문자열로 결합
console.log(str); // 'apple, banana, orange'

• 객체를 생성

// 배열의 각 요소를 key-value 형태의 객체로 응축하는 예시
const arr = [1, 2, 3, 4, 5];
const obj = arr.reduce((acc, curr) => {
  acc[curr] = curr * 2;
  return acc;
}, {}); // 누적값인 객체에 각 요소를 key로 하고, 2배 한 값을 value로 하여 저장
console.log(obj); // {1: 2, 2: 4, 3: 6, 4: 8, 5: 10}