고차 함수 그리고 중첩 함수

고차 함수(Higher Order Function; HOF)

고차 함수는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수이다.

 

다른 함수(caller)의 인자로 전달되는 함수를 콜백 함수(callback function)라고 한다.

 

콜백 함수를 전달받은 함수는 이 콜백 함수를 필요한 시점에 호출하거나,

클로저를 생성하여 반환한다.

 

클로저

MDN의 정의는 다음과 같다.

“A closure is the combination of a function and the lexical environment within which that function was declared.”
클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

여기서 함수는 내부 함수를 의미하며,

렉시컬 환경이란 내부 함수가 선언됐을 때의 스코프를 의미한다.

 

즉, 클로저는 내부 함수는 선언될 때의 스코프를 기억하여

렉시컬 환경 밖에서 내부 함수가 호출되어도 렉시컬 환경에 접근할 수 있는 함수를 말한다.

 

고차 함수는 가변(Mutable) 데이터를 피하고, 불변성(Imutability)을 지향하는 함수형 프로그래밍에 기반을 두고 있다.

// 함수를 인자로 전달받고 함수를 반환하는 고차 함수
function makeCounter(predicate) {
  // 자유 변수. num의 상태는 유지되어야 한다.
  let num = 0;
  // 클로저. num의 상태를 유지한다.
  return function () {
    // predicate는 자유 변수 num의 상태를 변화시킨다.
    num = predicate(num);
    return num;
  };
}

// 보조 함수
function increase(n) {
  return ++n;
}

// 보조 함수
function decrease(n) {
  return --n;
}

// makeCounter는 함수를 인수로 전달받는다. 그리고 클로저를 반환한다.
const increaser = makeCounter(increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

// makeCounter는 함수를 인수로 전달받는다. 그리고 클로저를 반환한다.
const decreaser = makeCounter(decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2

 

위 코드를 보면 변수의 사용을 억제하는 것을 볼 수 있다.

 

이처럼 고차 함수가 기반을 두고 있는 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고, 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임(특징적인 사고 방식이나 인식의 틀)이다.

 

따라서 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고,

프로그램의 안정성을 높이려는 노력의 한 방법이라고 할 수 있다.

 

중첩 함수(Nested Function)

함수 내부의 정의된 함수를 중첩 함수 또는 내부 함수라고 한다. 그리고 중첩 함수를 포함한 함수를 외부 함수라고 부른다.

중첩 함수는 외부 함수 내부에서만 호출할 수 있고 외부 함수 밖에서는 호출할 수 없다.

주로 외부 함수의 작동을 돕는 헬퍼 함수의 역할을 한다.

 

function outer() {
	var x = 1;
    	function inner() {
        var y = 2;
        console.log(x+y); //외부함수의 변수를 참조할 수 있다.
        }
    	inner();   //중첩함수
}
outer(); //외부함수
inner(); // Error

ES6 이후 함수 정의는 문맥 어디든지 가능하지만, if문이나 for문 등의 코드 블럭 내에서 함수를 정의하는 것은 호이스트에 혼란을 줄 수 있으므로 이를 지양해야 한다.

 

 

 

 

 

 

 

 

 

 

 

출처

 

https://poiemaweb.com/js-array-higher-order-function

Higher order function | PoiemaWeb

 

https://velog.io/@rlatp1409/JS-12-%ED%95%A8%EC%88%98-3-%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Deep-Dive

[JS] (12) 함수 - 3 | 모던 자바스크립트 Deep Dive

 

https://velog.io/@rememberme_jhk/JS-%EA%B3%A0%EC%B0%A8%ED%95%A8%EC%88%98-higher-order-function

[JS] 고차함수 (higher order function)