Unit 1] [JavaScript]고차함수

SEB_FE_45

Section 2. Unit 1. [JavaScript] 고차함수

코드스테이츠 부트캠프 Section2도 이번주면 종료가 된다.

그 말은 벌써 부트캠프 참여 후 2달이 되었다는 이야기!

시간 진짜 빠르다....

앞으로의 포스팅에서는 블로깅에 소홀해져서 작성하지 못했던 Section 2를 다뤄보도록 하겠다.

Section 2는 첫 유닛부터 너무 힘들었던 기억이라 블로깅을 할정도의 에너지가 되지 않았다.

이에 이제라도 작성해보고자 한다! 시작!

---

일급객체란?

자바스크립트 내에서 특별한 대우를 받는 객체이며, 대표적인 일급객체는 함수(function)가 있다.

일급객체인 함수에게 주어진 특별한 대우?

• 변수에 할당(assignment)할 수 있다.
• 다른 함수의 전달인자(argument)로 전달될 수 있다.
• 다른 함수의 결과로써 리턴될 수 있다.

즉, 함수를 데이터(string, number, boolean, array, object) 처럼 다룰 수 있다.

/*
 * 아래는 변수 square에 함수를 할당하는 함수 표현식입니다.
 * JavaScript에서 함수는 일급 객체이기 때문에 변수에 할당할 수 있습니다.
 *
 * 함수 표현식은 할당 전에 사용할 수 없습니다.
 * square(7); // --> ReferenceError: Can't find variable: square
 */

const square = function (num) {
  return num * num;
};

// 변수 square에는 함수가 할당되어 있으므로 (일급 객체), 함수 호출 연산자 '()'를 사용할 수 있습니다.
output = square(7);
console.log(output); // --> 49

---

고차함수란?

함수 자체를 리턴하는 함수이다.

아래와 같은 조건인 함수는 고차함수라고 한다.

• 다른 함수를 인자로 받는 경우
• 함수를 리턴하는 경우
• 함수를 인자로 받고 함수를 리턴하는 경우

고차함수의 종류는 다음과 같다.

• 함수를 전달인자로 받는 함수 : 콜백함수(callback fucntion)
• 함수를 리턴하는 함수 : 커링함수(curring function)

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, map, reduce)

1. filter메서드 : 조건에 맞는 데이터만 분류(filtering)할 때 사용한다.                                                                                 => arr.filter(callback) { 필터링 코드 }
2. map메서드 : 하나의 데이터를 다른 데이터로 매핑(mapping)할 때 사용한다.                                                                  => arr.map(callback){ 매핑할 코드 }
3. reduce메서드 : 여러 데이터를 하나의 데이터로 응축(reduce)할 때 사용한다(배열→문자열, 배열→객체로 응축).          => arr.reduce(callback, 초기값) { 응축 코드 }

---

고차함수를 쓰는 이유 => 추상화(abstraction)

추상화란, 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것이다.

추상화를 사용하면 효율적이고, 편하게 생각할 수 있다.

• 현실에서 -1을 표현하는 방법은 없지만,  -1을 보고 0보다 작은 수라고 인식한다.
• 이외에도 자동차가 작동되는 원리, 카카오톡에서 메시지를 보내면 친구에게 메시지가 가는 원리를 몰라도 사용할 수 있는 것과 같다.
• 추상화의 이점은 생산성의 향상에 있다.
• 자주 사용하는 코드(로직) 묶음인 함수도 추상화의 좋은 사례이다.

function getAverage(data) {
  let sum = 0;
  for (let i = 0; i < data.length; i++) {
    sum = sum + data[i];
  }
  return sum / data.length;
}

let output = getAverage([1, 2, 3]);
console.log(output); // --> 2

output = getAverage([4, 2, 3, 6, 5, 4]);
console.log(output); // --> 4

하나의 함수가 선언되면, 이후부터는 복잡한 함수를 반복해서 작성하지 않아도, 함수의 식별자와 전달인자만으로 반복해서 해당 함수를 호출하여 사용할 수 있다.

고차함수는 추상화를 한단계 더 높인 것이다.

• 함수 = 값을 전달 받아 값을 리턴 = 값에 대한 복잡한 로직은 감춰져 있음 = 값 수준에서의 추상화
• 값 수준에서의 추상화 : 단순히 값(value)을 전달받아 처리하는 수준
• 사고의 추상화 : 함수(사고의 묶음)를 전달받아 처리하는 수준
• 고차함수 = 함수를 전달받거나 함수를 리턴 = 사고(함수)에 대한 복잡한 로직은 감춰져 있음 = 사고 수준에서의 추상화

---

 

정리 및 회고

자바스크립트에는 특별한 대우를 받는 일급객체가 있으며, 함수가 대표적이다.

함수가 받는 특별한 대우는 1) 변수에 할당 가능, 2) 함수의 매개변수로 전달 가능, 3) 함수의 결과값으로 리턴 가능이다.

즉, 함수를 데이터처럼 다룰 수 있다는 점이다.

함수자체를 리턴하는 함수를 고차함수라고 한다. 고차함수에는 콜백함수와 커링함수가 있다.

콜백함수는 함수를 전달인자로 받는 함수이며, 커링함수는 함수를 리턴하는 함수이다.

내장 고차함수로는 배열 메서드(filter, map, reduce)를 들 수 있다.

고차함수를 사용하는 이유는 추상화 때문이며, 추상화를 통해 생산성을 높일 수 있다.

고차함수를 사용하면 각각의 작업이 다른 목적을 위해 재사용될 수 있기 때문에 사고수준의 추상화를 달성할 수 있다.

---

이번 포스팅에서는 고차함수에 대해 정리해보았다.

처음 접했을 때는 글자 하나도 머릿속에 들어오지 않았는데, 두번째 보는 거라 그런지 확실히 무슨 이야기를 하는지 이해가 되는 것 같다.

해당 유닛의 고차함수 코플릿을 풀어보면서 조금 더 감을 잡아봐야겠다.