고차 함수_1 (feat. 일급 객체, 호이스팅)

✅고차 함수란?

고차 함수(higher order function)는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다.

우선 고차 함수에 대해 더 자세히 알아보기 전에 중요한 것이 있다.

어떻게 함수를 인자로 받거나 함수를 리턴할 수 있을까?

---

함수는 일급 객체(first-class citizen)다.

퍼스트 클래스 하면 보통 '특별한 대우를 받는다'라고 생각이 든다.

자바스크립트에도 특별한 대우를 받는 것들이 있는데, 이런 것들을 일급 객체라고 한다.

그 중 하나가 함수다! 함수가 자바스크립트에서 어떤 대우를 받느냐?

변수에 할당(assignment)할 수 있다.
다른 함수의 인자(argument)로 전달될 수 있다.
다른 함수의 결과로서 리턴될 수 있다.

이는 함수를 데이터(string, number, boolean, array, object) 다루듯이 다룰 수 있다는 걸 뜻한다.

변수에 저장할 수 있기 때문에 요소나 객체의 속성값으로 저장하는 것도 가능하다!

---

함수 표현식(function expression) VS 함수 선언식(function declaration)

결론부터 말하자면 '호이스팅'의 차이이다.

호이스팅
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 

함수 선언식은 호이스팅이 되고, 함수 표현식은 호이스팅이 안된다! 

 

함수 선언식에서의 호이스팅

함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

아래 코드에서 inner() 가 선언되기 전에서 printName() 안에서 console.log(typeof inner)을 통해 판별할 수 있었다.

즉 호이스팅을 통해 문제가 없었다.

function printName(firstname) {        // 함수 선언식
    var result = inner();              // "선언 및 할당"
    console.log(typeof inner);         // > "function"
    console.log("name is " + result);  // > "name is inner value"

    function inner() {                 // 함수 선언식 
        return "inner value";
    }
}

printName();                           // 함수 호출 

 

함수 표현식에서의 호이스팅

함수 표현식은 함수 선언식과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다.

함수 표현식의 선언이 호출보다 위에 있는 경우는 정상 출력이 되지만, 함수 표현식의 선언이 호출보다 아래에 있는경우 TypeError가 발생한다.

function printName(firstname) {   // 함수선언문
     console.log(inner);          // > "undefined": 선언은 되어 있지만 값이 할당 안됨
     var result = inner();        // ERROR!!
     console.log("name is " + result);

     var inner = function() {     // 함수표현식 
         return "inner value";
     }
 }
 printName();                     // > TypeError: inner is not a function