호이스팅과 함수선언방식에 따른 차이

• VariableEnvironment : 현재 컨텍스트 내의 식별자들에 대한 정보와 외부 환경정보 (EnvironmentRecord), 선언시점의 LexicalEnvironment의 스냅샷이며 변경사항은 반영되지 않는다.
• LexicalEnvironment : 처음에는 VariableEnvironment와 같지만 변경사항이 실시간으로 반영된다. (VariableEnvironment에 정보를 먼저 담은 후 복사하여 LexicalEnvironment가 만들어진다.)

호이스팅

실행되는데 있어 필요한 정보들을 끌어올려 알고 있는 것으로 변수 정보를 수집하는 과정을 표현하는 가상의 개념이다. (엔진이 실제로 끌어올린건 아니지만 편의상 끌어올린 것으로 간주한다는 것이다.) environmenRecord에는 매개변수 이름, 함수선언, 변수명 등이 담긴다. var로 선언된 변수는 호이스팅 된다.

함수 선언문과 함수 표현식

함수는 호이스팅된다. 따라서 함수 선언문으로 작성한 함수는 호이스팅 된다.

function hoist(){
  console.log("hoist");
};

하지만 함수 표현식으로 작성한 함수는 호이스팅 되지 않는다. var로 함수의 이름변수를 선언했다고 하더라도 변수 선언부만 호이스팅 되고, 함수 자체는 호이스팅 되지 않는다. var hoist 부분만 호이스팅 되는 것이다.

const hoist1 = function () {console.log("hoist");}; 
var hoist2 = function () {console.log("hoist");}; 

함수 표현식이 좋은 이유

책은 var을 사용한 예시를 들고 있다. 같은 이름의 함수가 다시 정의된다면 함수는 뒤에 정의된 함수로 override 된다.

예를 들어 sum 함수를 정의 했는데 한~참 뒤에 실수로 같은 이름의 sum 함수를 재정의하면 모든 sum 함수 호출은 뒤에 재정의된 함수로 실행된다.

function sum(a,b){
  console.log(a+b);
}
sum(1,2);

function sum(a,b){
  console.log(`${a+b} is answer`);
}
sum(1,2);

> "3 is answer"
> "3 is answer"

하지만 함수 표현식으로 정의 되었다면, 변수명 자체면 호이스팅 되므로 해당 위치에 있는 순서에 맞는 함수로 동작이 가능하게 되는 것이다.

var sum = function (a,b){
  console.log(a+b);
}
sum(1,2);

var sum = function (a,b){
  console.log(`${a+b} is answer`);
}
sum(1,2);

> 3
> "3 is answer"

참고

코어자바스트립트 책을 참고하여 이해한 내용을 바탕으로 작성하였습니다.

자바스크립트 함수를 작성하면서 왜 const 변수명 = 함수정의 이런식으로 작성하는지 함수를 그냥 정의하는 것이랑 차이가 무엇인지 궁금했는데 책의 실행컨텍스트 부분을 읽으면서 그 차이점에 대해 알 수 있었다.