호이스팅

bisari31·2022년 5월 11일
0

Hoisting

JavaScript에서 호이스팅(hoisting)이란,
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.
반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.
-MDN

인터프리터 컴파일러

인터프리터

코드를 한 줄씩 읽어가며 명령을 실행하는 프로그램
번역과 실행이 동시에 이루어진다.
한 줄씩 명령을 내리다 보니 번역 속도는 빠르지만, 실행 시 매번 번역하므로 속도가 느리다.
대표언어: 자바스크립트, 파이썬, 루비, sql 등

컴파일러

코드를 다른 목적 코드로 변경 후 한꺼번에 실행한다.
번역하는 데 시간이 오래 걸리지만, 실행속도는 빠르다.(다시 번역하지 않으므로)
대표적인 언어는 C, 자바가 있다.

자바스크립트 코드를 인터프리터가 로드할 때 범위에 따라 선언과 할당을 분리하여
선언을 컨텍스트 내의 최상단으로 끌어 올리는 행위
변수뿐만 아니고 함수도 가능하다.

console.log(a) === undefined
var a = 123;

호출을 첫 줄에서 하고 마지막 줄에 함수를 정의해도 문제없이 작동하는 특징이 있다.

자바스크립트 엔진에서 변수는 선언 - 초기화 - 할당을 거쳐 생성된다.

선언: 실행 컨텍스트에 등록
초기화: 메모리 공간 확보 이때 undefined가 됨
(메모리가 할당되면 참조를 통해 변수 접근 가능)
할당: 값을 변수에 할당

var는 선언과 초기화를 동시에 진행하므로 선언 전 undefined가 할당된다.

const와 let도 물론 호이스팅이 된다.

TDZ: 스코프 시작 지점부터 초기화 시작 지점까지 구간
하지만 TDZ존(선언과 초기화 사이 단계)에 걸려 메모리를 할당받지 못한다.
let과 const는 선언과 초기화가 분리된다.

함수도 호이스팅을 받는다.

function foo() {
  console.log(1);
} // 선언식
const bar = function () {
  console.log(2);
}; // 표현식

함수 선언식은 호이스팅 영향을 받는다.
함수 표현식은 선언 할당 초기화를 동시에 진행한다.

test1();
console.log(test2)

function test1() {
  console.log(1);
}
var test2 = function () {
  console.log(2);
};

위 코드는 인터프리터가 이렇게 해석한다.

function test1() {
  console.log(1);
}
var test2
test1();
console.log(test2)

var test2 = function () {
  console.log(2);
};

참고

0개의 댓글