TIL - 일급객체, 내장 고차함수

moontag·2022년 5월 24일

JavaScript TIL

목록 보기

15/20

일급객체(first-class citizen)

변수에 할당 가능
다른 함수의 전달인자로 전달 가능
다른 함수의 결과로 리턴 가능

함수가 일급객체이기 때문에 고차함수로 활용이 가능하다

문자열, 숫자, 배열, 객체 등의 데이터처럼 사용 가능

고차함수를 쓰는 이유

1. 고차함수의 추상화

추상화
복잡한 것을 압축하여 핵심만 추출한 상태로 만드는 것
예) 자동차의 시동 걸기, 교통카드 찍기
값 수준의 추상화 : 값을 전달받아 처리
사고의 추상화 : 함수를 전달받아 처리
고차함수는 함수를 전달받거나 리턴한다. 그 함수 내부에는 사고(함수)에 대한 복잡한 로직이 숨겨져있다.

2. 생산성 향상

고차함수에 이미 로직이 숨겨져 있기 때문에, 하나하나 구현을 안해도 고차함수를 사용하여 코드를 짜는 시간을 줄일 수 있다.

고차 함수(higher order function)

함수를 인자로 전달

콜백함수 : 다른 함수에 전달인자로 전달된 함수
전화로 불렀는데 불러오는 함수

function sayHello() {
   return "Hello, ";
}
function greeting(helloMessage, name) {
  console.log(helloMessage() + name);
}
// `sayHello`를 `greeting` 함수에 인자로 전달
greeting(sayHello, "JavaScript!");

//
function double(num) {
  return num * 2;
}

function doubleNum(func, num) {
  return func(num);
}

/*
 * 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수입니다.
 * 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우
 * 함수 func는 함수 doubleNum의 콜백 함수입니다.
 * 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수입니다.
 */
let output = doubleNum(double, 4);
console.log(output); // -> 8

커링함수 : 함수를 리턴하는 함수
하스켈 커리(Haskell Curry)

function sayHello() {
   return function() {
      console.log("Hello!");
   }
}
//
function adder(added) {
  return function (num) {
    return num + added;
  };
}

/*
 * 함수 adder는 다른 함수를 리턴하는 고차 함수입니다.
 * adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴합니다.
 * 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴합니다.
 */

// adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있습니다.
let output = adder(5)(3); // -> 8
console.log(output); // -> 8

// adder가 리턴하는 함수를 변수에 저장할 수 있습니다.
// javascript에서 함수는 일급 객체이기 때문입니다.
const add3 = adder(3);
output = add3(2);
console.log(output); // -> 5

함수를 인자로 받고 함수를 리턴

function double(num) {
  return num * 2;
}

function doubleAdder(added, func) {
  const doubled = func(added);
  return function (num) {
    return num + doubled;
  };
}

/*
 * 함수 doubleAdder는 고차 함수입니다.
 * 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수입니다.
 * 함수 double은 함수 doubleAdder의 콜백으로 전달되었습니다.
 */

// doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있습니다.
doubleAdder(5, double)(3); // -> 13

// doubleAdder가 리턴하는 함수를 변수에 저장할 수 있습니다. (일급 객체)
const addTwice3 = doubleAdder(3, double);
addTwice3(2); // --> 8

내장 고차함수

filter

모든 배열 요소 중에서 조건을 만족하는 요소를 걸러내는 메서드

배열의 각 요소가 조건(콜백함수)만족하는 true의 요소들만 모아 새로운 배열 리턴

배열의 각 요소가
특정 조건(콜백함수)을 만족하는 사실(true)만 모아
새로운 배열 리턴(filter)

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

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

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

map

하나의 데이터를 다른데이터로 매핑할때 사용.

배열의 각 요소에 콜백함수를 적용한 새로운 배열을 리턴

배열의 각 요소가
특정 조건(콜백함수)에 의해
다른 요소로 지정된다(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); // ['어머니의 쌀', ...]

reduce

배열을 하나의 값으로 만들기
arr.reduce(callback 함수, initialValue)
arr.reduce((acc, cur) => { return }, initialValue)

누적값 accumulation (초기값 미설정시, 첫번째 요소(0번째인덱스)가 acc)

현재값 current

초기값 initialValue (미설정시, 첫번째 요소(0번째인덱스)가 초기값으로 설정됨)

// 초기값있는 경우
// reduce-callback 함수 안에 조건문 사용할 수 있다
let arr = [1,2,3,4,5];
arr.reduce((acc, cur) => {
	if(cur % 1 === 0){
      return acc + cur
    } else { return acc }
}, 0);

배열의 각 요소를
특정 조건(콜백함수)에 따라
원하는 하나의 형태로 응축한다

// 단행본 예제
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;
}; 

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

flat

2차원 배열을 1차원으로 만들기

// 이렇게 중첩된 배열을
const infinite = [haha, [ha, h, [a]]];
// 원하는 깊이만큼 '평탄화' 시키고 싶음
[haha, ha, h, a];

arr.flat([depth])
depth 기본값 : 1

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]