[JavaScript] 고차함수

고차함수의 개념

1. 일급 객체(first-class citizen)

자바스크립트에서 일급객체는 함수가 대표적

• 변수에 할당 가능

 

//함수 표현식
let 변수1 = function() {
  return '함수를 변수1에 할당가능'

//함수 선언식
function 변수2() {
  return '이렇게도 할당 가능'
}


//console.log를 찍어보면?
console.log(변수1)
ƒ () {
  return '함수를 변수1에 할당가능'
}

console.log(변수1)
function 변수2() {
  return '이렇게도 할당 가능'
}


//함수 실행 값(함수를 실행시킨 형태)과 구분해서 헷갈리지 말자
변수1()
'함수를 변수1에 할당가능'

변수2()
'이렇게도 할당 가능'​

• 다른 함수의 인자로 전달 가능 (콜백함수)

 

function functionParameter(func, num) {
  return func(num)
}
function compose(func1, func2, num) {
  return func1(func2(num))
}
fnction pipe(...func) {
...
//func => 다른 함수의 인자로 전달 => 콜백함수

• 다른 함수의 결과로서 리턴 가능 (커리함수)
• 문자열이나 숫자 같은 다른 데이터처럼 사용 가능
  *변수 할당, 함수의 인자로 전달, 결과로서 리턴

 

2. 고차함수의 특징

2-1. 콜백 함수(callback function)

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

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

doubleNum(doble, 4) //8

• 함수를 인자(argument)로 받을 수 있음
• 콜백 함수(callback function) : 다른 함수(caller)의 인자로 전달되는 함수
• caller 함수는 내부에서 콜백 함수를 호출(invoke) 할 수 있음
  - 조건에 따라 콜백 함수의 실행 여부 결정 가능

 

2-2. 커리 함수

function adder(added) {
  return function (num) {
    return num + added;
  };
}

const add2 = adder(2) //adder가 리턴하는 함수를 변수에 저장 가능
add2(3) //5(added = 2, num = 3)

adder(5)(4) //9(added = 5, num = 4)

• 함수를 리턴하는 고차함수
• 리턴되는 함수는 익명함수

 

2-3. 함수를 인자로 받고 함수를 리턴

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

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

const addTwice3 = doubleAdder(3, double);
addTwice3(2); //8(3*2 + 2)

doubleAdder(5, double)(3); //13(5*2 + 3)

• 함수 내부에서 변수에 함수를 할당해 이 변수를 리턴할 수 있음

 

 

내장 고차함수

1. filter

let arr = [1, 2, 3, 4];

const isEven = function (num) {
  return num % 2 === 0;
};

arr.filter(isEven); //[2, 4]

arr.filter(function(num) {
  return num % 2 === 0
}) //[2, 4]

• 특정 조건을 만족하는 요소를 걸러냄
• 조건 : filer 메소드의 인자로 전달되며 이는 함수의 형태
• arr.filter 시행시 배열 내부에 접근하게 됨
• 기존 배열을 수정하지 않음

 

2. map

let arr = [1, 2, 3, 4];

let result = arr.map(function(num) {
  return num * 2
}) //[2, 4, 6, 8]

• 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
• 함수를 인자로 전달
• 기존 배열을 수정하지 않음

 

3. reduce

let arr = [1, 2, 3, 4];

let result = arr.reduce(function(acc, cur, idx) {
  return acc + cur
}) //초기값 : 지정하지 않았기에 배열의 첫번째 요소
//10

let result = arr.reduce(function(acc, cur, idx) {
  return acc + cur
}, 1) //초기값 : 1
//11

• 배열을 하나의 값으로 만들어 줌
• 초기값(acc) 지정 가능, 지정하지 않을 경우 배열의 첫번째 요소가 초기값이 됨
  - 초기값에 현재값을 더해가며 누적값이 됨, 이를 리턴
• 현재값(cur) : 초기값의 다음 요소
• 합치거나 뺄 수 있으며 큰것 작은 것 비교 등 활용 가능
• 배열의 요소 값이 1개인데 초기값도 제공하지 않은 경우 또는 초기값은 있지만 배열이 빈 배열인 경우에는 그 단독 값을 리듀서를 거치지 않고 바로 반환
• 배열이 비었는데 초기값이 없는 상태에서 reduce()를 호출하면 TypeError 오류가 발생

 

 

Reference

reduce