1급 객체, 콜백 함수, 고차 함수

 

JavaScript를 공부하면서 놀라웠던 것은 엄청난 자율성이다.

'이게 될까?'라고 생각한 것은 생각보다 잘 작동한다.

그 중에서 한 몫 하는 건 JavaScript의 함수 개념이다.

1급 객체

/* 함수 선언식 */
function declaration() {
	console.log("Hello");
}

declaration();

/* 함수 표현식 */

let expression = function(){
	console.log("World!");
}

expression();

/* 1급 클래스 */
function firstClass(paramFunc){
	return function(){
    	paramFunc()
    	console.log("Wake Up!")
    }
};

 

 줄곧 기본적으로 봐왔던 '함수 선언식' 외에 함수를 만들어 저장할 수 있는 방법 '함수 표현식'이 있다. '함수 표현식'은 '함수 선언식'에 비해 호이스팅에서 유리하여 잘 쓰인다. 함수 선언 순서가 달라서 발생할 수 있는 오류를 방지해준다. 호이스팅은 다른 정리글에서 다루도록 하겠다.

 1급 객체는 1. 변수에 할당이 가능하고 2. 함수의 인자로 전달 가능하고 3. 함수의 결과로 리턴 가능한 객체다. JavaScript에서는 함수가 1급 객체에 해당한다. 위에서 보이는 그대로 사용이 가능하다.

 

콜백(CallBack) 함수과 고차 함수

 함수가 1급 객체로서 함수의 인자로 전달이 가능하다보니 콜백 함수의 패턴이 가능하게 되었다. 콜백 함수는 어떤 함수의 인자로 사용되는 함수이다. 위에 예시의 paramFunc도 콜백 함수다. JavaScript에서는 콜백 함수를 이용한 다양한 내장 함수를 제공한다. 그 중 가장 많이 사용하는 함수 3가지를 집중으로 공략해봤다.

 

/* map */
let temp = [1, 2, 3].map(function(ele){ return ele + 2 });
console.log(temp); /*  결과값 : [3, 4, 5]  */

/* filter */
temp = [1, 2, 5, 8].filter(function(ele){ return ele > 4 });
console.log(temp); /* 결과값 : [5, 8]*/

/* reduce */
temp = [1, 2, 3, 4].reduce(function(acc, cur){return acc + cur});
console.log(temp); /* 결과값 : 10

 

 함수 모두 배열에 관련한 함수다. 콜백함수를 인수로 놓고, 배열에 있는 모든 원소를 순환하면서 콜백함수 명령을 실행한다. 콜백 함수가 리턴하는 값을 배열에 모아 종료할 때 새로운 배열을 돌려준다. map 같은 경우가 딱 이러하다. filter 함수는 콜백함수가 명시한 조건을 충족하는 원소들만 배열에 모아 반환한다. reduce 함수는 조금 특이하다. 콜백 함수를 정의할 때 다른 함수들과는 다르게 acc, cur이라는 두 변수를 매개변수로 받고있다. acc는 매 회차마다 저장되어 다음 acc로 넘어가는 매개변수다. 매회차 반환값이 acc에 저장된다. cur은 매 회차 달라지는 배열의 원소다. reduce 함수는 응집, 축약을 할 때 잘 쓰이는 함수다.

고차 함수는 맨 위에서 1급 객체의 예시에서 보이는 firstClass 함수를 말한다. 콜백함수를 매개변수로 갖는 함수라고 생각해도 좋다.