[개발자되기: 고차함수] Day-19

Kyoorim LEE·2022년 5월 24일
0

일급객체(first-class citizen)

자바스크립트에서 특별 대우를 받음
대표적인 예 => 함수
- 변수에 할당을 할 수 있다
- 다른 함수의 전달인자로 전달될 수 있다
- 다른 함수의 결과로서 리턴될 수 있다

변수에 함수를 할당하는 경우

/*
 * 아래는 변수 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

고차함수(higher order function)

콜백함수(callback function)

다른 함수의 전달인자(argument)로 전달되는 함수

1. 다른 함수를 인자로 받는 경우

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

2. 함수를 리턴하는 경우

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

3. 함수를 인자로 받고 함수를 리턴하는 경우

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

// 아래 코드에서 '짝수'와 '길이 5 이하'는 문법 오류(syntax error)에 해당합니다.
// 의미만 이해해도 충분합니다.
let arr = [1, 2, 3, 4];
let output = arr.filter(짝수);
console.log(output); // ->> [2, 4]

arr = ['hello', 'code', 'states', 'happy', 'hacking'];
output = arr.filter(길이 5 이하)
console.log(output); // ->> ['hello', 'code', 'happy']

// 함수 표현식
const isEven = function (num) {
  return num % 2 === 0;
};

let arr = [1, 2, 3, 4];
// let output = arr.filter(짝수);
// '짝수'를 판별하는 함수가 조건으로서 filter 메서드의 전달인자로 전달됩니다.
let output = arr.filter(isEven);
console.log(output); // ->> [2, 4]

const isLteFive = function (str) {
  // Lte = less then equal
  return str.length <= 5;
};

arr = ['hello', 'code', 'states', 'happy', 'hacking'];
// output = arr.filter(길이 5 이하)
// '길이 5 이하'를 판별하는 함수가 조건으로서 filter 메서드의 전달인자로 전달됩니다.
let output = arr.filter(isLteFive);
console.log(output); // ->> ['hello', 'code', 'happy']

map

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

reduce

배열을 하나의 값으로 만들어 줌. 초기값을 정하거나 배열의 첫번째 요소를 초기값으로 정함. 특정방법에 따라 원하는 하나의 형태로 응축함(reduction)
ex) arr.reduce(acc, cur)
acc: 응축된 값// 초기값을 설정하지 않으면 배열의 첫번째 요소가 acc이며 cur은 두번째 요소부터 시작
cur: 현재 배열요소

let arr = [1,2,3,4,5]
arr.reduce(acc, cur) 

<초기값 없을 때: 배열의 첫번째 요소가 acc, cur은 두번째 요소부터 시작>

acccurreturn 값
121+2
333+3
646+4
10510+5
1515
let arr = [1,2,3,4,5]
arr.reduce{(acc, cur), 10}

<초기값 있을 때: cur은 첫번째 요소부터 시작>

acccurreturn 값
10110+1
11211+2
13313+3
16416+4
20510+5
2525

<조건이 있을 경우>

let arr = [1,2,3,4,5]
arr.reduce( (acc, cur) => {
  if(cur % 2 === 0) {
    return acc + cur;
  } else {
    return acc;
  }
},0)
    
acccurreturn 값
010
020+2
232
242+4
656
66

추상화

복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것

profile
oneThing

0개의 댓글