[JavaScript] 고차 함수 | 의미, 내장 고차 함수, 중요성

Eunji Lee·2022년 11월 18일
0

[TIL] JavaScript

목록 보기
14/22
post-thumbnail

Chapter1. 고차 함수

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

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

특징

  • 변수에 할당(assignment)할 수 있음
const square = function (num) {
	return num * num;
};

//변수 square에 함수가 할당되어 있으며, 함수 호출 연산자인 ()를 사용하여 함수를 호출함
output = square(5);
console.log(output); //25
  • 다른 함수의 전달인자(argument)로 전달할 수 있음
  • 다른 함수의 결과로서 리턴될 수 있음

1-2. 고차 함수의 이해

고차 함수의 특징

콜백 함수(callback function)

  • 다른 함수(caller)의 전달인자(argument)로 전달되는 경우 → 콜백 함수(callback function)
    • 콜백 함수를 전달 받은 고차함수(caller)는 함수 내부에서 콜백 함수를 호출(invoke)하거나 조건에 따라 콜백 함수의 실행 여부를 결정할 수 있음
function double(num) {
	return num * 2;
};

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

//함수 double이 함수 doubleNum의 콜백 함수임
let output = doubleNum(double, 10);
console.log(output); //20

커링함수

  • 함수를 리턴하는 경우
function adder(added) {
	return function (num) {
		return num + added;
	};
};

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

//함수 호출 연산자인 ()를 사용하여 고차함수를 호출함
let output = adder(10)(3);
console.log(output); //13

//adder가 리턴하는 함수를 변수에 저정하기
const add5 = adder(5);
output = add5(10);
console.log(output); //15

콜백함수와 커링함수를 모두 활용하는 경우

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

//함수 double이 고차함수인 doubleAdder의 콜백함수가 됨
function doubleAdder(added, func) {
	const doubled = func(added);
	return function (num) {
		return num + doubled;
	};
};

let output = doubleAdder(5, double)(10);
console.log(output); //20

const addTwice10 = doubleAdder(10, double);
addTwice10(2); //22



Chapter2. 내장 고차 함수

내장 고차 함수 filter

사용 조건

  • 조건에 맞는 데이터만 분류(filtering)할 때
    • 배열의 각 요소가
    • 특정 논리(함수)에 따르면, 사실(true)일 때
    • 따로 분류함(filter)

예시

//filter 메소드의 조건으로써 전달인자로 전달될 함수인 isEven
const isEven = function (num) {
	return num % 2 === 0;
};

let arr = [1, 2, 3, 4, 5, 6, 7, 8];
let output = arr.filter(isEven);
console.log(output); //[2, 4, 6, 8]

내장 고차 함수 map

사용 조건

  • 하나의 데이터를 다른 데이터로 매핑(mapping)할 때
    • 배열의 각 요소가
    • 특정 논리(함수)에 의해
    • 다른 요소로 지정(map) 됨

예시

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

let arr = [1, 2, 3, 4, 5];
let output = arr.map(double);
console.log(output); //[2, 4, 6, 8, 10]

내장 고차 함수 reduce

사용 조건

  • 여러 데이터를 하나의 데이터로 응축(reduce)할 때 사용
    • 배열의 각 요소를
    • 특정 방법(함수)에 따라
    • 원하는 하나의 형태로 (문자열 혹은 객체 혹은 숫자)
    • 응축함(reduction)

예시

//초기값을 설정하지 않았을 때
const addAccCur = function (acc, cur) {
	return acc + cur;
};

let arr = [1, 2, 3, 4, 5];
let output = arr.reduce(addAccCur);
console.log(output); //15
//초기값을 1로 설정할 때
const addAccCur = function (acc, cur) {
	return acc + cur;
};
const initialValue = 1;

let arr = [1, 2, 3, 4, 5];
let output = arr.reduce(addAccCur, initialValue);
console.log(output); //16



Chapter3. 고차 함수의 중요성

추상화

  • 추상화: 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것 → 생산성 증대
    • 값 수준의 추상화: 단순히 값(value)을 전달받아 처리하는 수준
    • 사고의 추상화: 함수(사고의 묶음)를 전달받아 처리하는 수준
  • 고차 함수는 함수를 전달받거나 함수를 리턴하기 때문에 사고(함수)에 대한 복잡한 로직은 감추어져 있으므로 사고 수준에서의 추상화라고 할 수 있고, 이는 생산성을 증대시키기 때문에 중요함

0개의 댓글