호이스팅 (Hoisting)
date
Mar 31, 2024
slug
hoisting
status
Published
tags
Develop
summary
type
Post
실행 컨텍스트(execution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.
예를 들어 위 코드의
a 함수 를 호출하는 시점에 실행 컨텍스트가 활성화되어 위와 같이 동작하게 된다. 일반적인 언어는 순차적으로 동작하기 때문에 1, undefined, 2가 나온다고 생각하지만 실제는 1, 1, 2 라는 결과가 나온다.책에서는 자바스크립트 엔진에서 실제로 변환하는 과정을 거치지 않으며, 이해를 돕기 위해 동작 과정을 코드를 통해 보여준다.
함수 선언문과 함수 표현식의 차이로 인해 표현식은 선언부만 끌어올리지만, 선언문은 전체를 끌어올린다.
→
에러 or undefined, 'bbb', b 함수 가 나올 것 같지만 b 함수, 'bbb', 'bbb' 라는 결과가 나온다.책에서는 극단적인 예시로 코드 중간에 같은 이름의 새로운 함수를 할당한 후 사용한다면 이전에 위에서 사용했던 같은 이름의 함수들이 새로 할당한 함수를 사용하게 된다는 것이다. (호이스팅에 의해서)
위 예제 코드도
inner 함수 안에서 console.log(a) 를 사용하면 전역으로 선언된 1이 출력될 것 같지만, 이후에 선언된 var a = 3; 에 의해서 선언부(var a;)만 먼저 할당되기 때문에 출력 값은 undefined가 나온다.자신이 선언된 시점의 사전적 환경인
LexicalEnvironment 와 outerEnvironmentReference 의 LexicalEnvironment , 상위의 LexicalEnvironment와 그보다 상위를 참조하고 있는 outerEnvironmentReference 를 탐색하면서 전역 컨텍스트의 LexicalEnvironment까지 접근하게 된다. 이때 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근하게 된다.
→ VariableEnvironment라는 정보도 존재하는데, 최초 실행 시에 컨텍스트의 정보들이 저장되며, LexicalEnvironment는 VariableEnvironment 의 정보를 그대로 복사하여 이후에 변경되는 정보는 LexicalEnvironment 에서 업데이트 한다.
→ LexicalEnvironment 는 environmentRecord와 outerEnvironmentReference로 구분되는데, 위에서 설명한 매개변수명, 식별자, 함수명 등은 environmentRecord에 저장된다.
→ VariableEnvironment 는 초기 상태 유지, LexicalEnvironment는 도중에 변경되는 사항을 즉시 반영위 예시도 전역 변수에 있는
a 보다 inner 함수 안에서 선언한 a 변수를 먼저 발견하여 스코프 체인 검색을 더 이상 진행하지 않고 inner LexicalEnvironment 상의 a를 반환한 것이다.위 내용들은 코어 자바스크립트 책을 참고하였습니다.