[JS] 실행 컨텍스트, 호이스팅, 함수 선언문과 함수 표현식

실행 컨텍스트(Execution Context)

• 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다.
• 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜스택에 쌓아 올립니다.
• 실행 컨텍스트는 전역공간이 생성될 때, 함수가 호출될 때 생성됩니다.

실행 컨텍스트와 콜 스택 예제

코드 실행시, 전역공간이 활성화되면서 전역 컨텍스트가 생성되고 함수 호출 순서대로 콜스택에 실행 컨텍스트가 쌓이는것을 확인할 수 있습니다.

실행 컨텍스트가 담고 있는 정보

• Variable Environment
  • environmentRecord (snapshot) : 현재 컨텍스트 내의 식별자들에 대한 정보
  • outerEnvironmentReference (snapshot) : 외부 환경 정보
• Lexical Environment
  • environmentRecord : 현재 컨텍스트 내의 식별자들에 대한 정보
  • outerEnvironmentReference : 외부 환경 정보
  • Variable Environment와 동일하지만 변경사항이 실시간으로 반영됨
• Variable Environment에 정보를 먼저 담고, 이를 그대로 복사해서 Lexical Environment를 만들고 이후 Lexical Environment를 주로 사용합니다.
• ThisBinding : 식별자가 바라봐야 할 대상 객체

environmentRecord

• 매개변수명, 선언된 함수 자체, 변수명 등이 담깁니다.
• 컨텍스트 내부를 처음부터 끝까지 탐색하며 순서대로 수집합니다.

호이스팅(Hoisting)

• 호이스팅은 식별자들은 최상단으로 끌어올리는 것을 뜻합니다.
• 식별자만 끌어올리고 할당 과정은 그대로 남겨둡니다.
• 편의상 끌어올리는 것으로 간주하는 가상의 개념이며 실제로 끌어올리지는 않습니다.
• -> 이 과정을 마치면 코드 실행 전에도 자바스크립트 엔진은 변수명들을 모두 알고 있게 됩니다.

함수 선언문(Function Declarations)

일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식입니다.

function 함수명() {  
  구현 로직  
}

// 예시  
function funcDeclarations() {  
  return 'A function declaration';  
}  
funcDeclarations(); // 'A function declaration'

함수 표현식(Function Expressions)

var 함수명 = function () {  
  구현 로직  
};

// 예시  
var funcExpression = function () {  
    return 'A function expression';  
}  
funcExpression(); // 'A function expression'

함수 선언식과 표현식의 차이점

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않습니다.

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

예를 들어, 아래의 코드를 실행할 때

// 실행 전
logMessage();
sumNumbers();

function logMessage() {
  return 'worked';
}

var sumNumbers = function () {
  return 10 + 20;
};

호이스팅에 의해 자바스크립트 해석기는 코드를 아래와 같이 인식합니다.

// 실행 시
function logMessage() {
  return 'worked';
}

var sumNumbers;

logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () {
  return 10 + 20;
};

위 코드 결과는 아래와 같습니다.

함수 표현식 sumNumbers 에서 var 도 호이스팅이 적용되어 위치가 상단으로 끌어올려집니다.

var sumNumbers;
logMessage();
sumNumbers();
JsCopy

하지만 실제 sumNumbers 에 할당될 function 로직은 호출된 이후에 선언되므로, sumNumbers 는 함수로 인식하지 않고 변수로 인식합니다.
호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있습니다.

 

References

함수 표현식 vs 함수 선언식