이전 장에서 호이스팅에 대해 잠깐 정리했었는데 이 개념이 함수 선언문과 함수 표현식에 따라 다르게 적용된다고 하여 오늘은 이에 대해 정리해보고자 한다.
💡 함수 선언문과 함수 표현식
이 두 가지 모두 함수를 새롭게 정의할 때 쓰이는 방식인데, 이를 세분화하면 다음과 같다
📌 함수 선언문
- function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미
- 함수명이 정의돼 있어야 함
📌 함수 표현식
- 정의한 function을 별도의 변수에 할당하는 것을 의미
- 함수명은 없어도 됨
- 예외로 함수명을 정의한 함수 표현식을
기명 함수 표현식, 정의하지 않은 것을익명 함수 표현식이라고 부르기도 한다. - 일반적으로 함수 표현식은
익명 함수 표현식을 말한다.
💡 함수를 정의하는 세 가지 방식
function a() { /*...*/ } // 함수 선언문. 함수명 a가 곧 변수명.
a(); // 실행 OK.
var b = function () { /*...*/ } // (익명) 함수 표현식. 변수명 b가 곧 함수명.
b(); // 실행 OK.
var c = function d () { /*...*/ } // 기명 함수 표현식. 변수명은 c, 함수명은 d.
c(); // 실행 OK.
d(); // 에러!기명 함수 표현식 의 경우 주의해야 할 점이 있는데, 바로 외부에서 함수명으로 함수를 호출할 수 없다는 것이다. 함수명은 오직 함수 내부에서만 접근할 수 있다는 점 주의해야 한다.
c 함수 내부에서는 c( )로 호출하든 d( )로 호출하든 잘 실행된다. 그래서 함수 내부에서 재귀함수를 호출하는 용도로 함수명을 쓸 수 있다. 다만 c( )로 호출해도 되는 상황에서 굳이 d( )로 호출할 일이 있을지는 의문이다.
그러면 코드상으로 함수 선언문과 함수 표현식은 실질적으로 어떤 차이가 있을까?
📌 원본 코드
console.log(sum(1, 2));
console.log(multiply(3, 4));
function sum(a, b) { // 함수 선언문 sum
return a + b;
}
var multiply = function (a, b) { // 함수 표현식 multiply
return a * b;
}이런 코드가 있다고 했을 때, 실행 컨텍스트의 lexicalEnvironment는 두 가지 정보를 수집하는데 그중 environmentRecord의 정보 수집 과정에서 발생하는 호이스팅 과정을 살펴보려고 한다.
📌 호이스팅을 마친 상태
var sum = function sum(a, b) {
return a + b;
};
var multiply;
console.log(sum(1, 2));
console.log(multiply(3, 4));
multiply = function(a, b) {
return a * b;
};위 코드를 통해서 이전의 원본 코드와 비교했을 때 명확하게 차이가 보이는데, 함수 선언문은 전체를 호이스팅한 반면 함수 표현식은 변수 선언부만 호이스팅했다.
가끔 함수도 하나의 값으로 취급할 수 있다는 말을 들은 적이 있는데 그때는 잘 이해되지 않았다. 호이스팅이란 개념을 이해하고 보니 이러한 현상으로 인해 함수를 다른 변수에 값으로써 "할당"한 것이 함수 표현식이라는 것을 배울 수 있었다.
