호이스팅이란?

: 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 말합니다.

주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다.

-> 함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효 범위의 최상단에 선언하는 것

(var, let, const, function, class 등 선언을 하는 애들을 최상단으로 올려서 선언하는 것을 호이스팅이라고 한다.)

- 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.

1) 자바스크립트 Parser가 함수 실행 전 해당 함수를 한번 훑는다.

2) 함수 안에 존재하는 변수 / 함수 선언에 대한 정보를 기억하고 있다가 실행 시킨다.

3) 유효 범위 : 함수 블러 {} 안에서 유효

- 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어 올리는 것이다.

1) 실제로 코드가 끌어 올려지는 건 아니고, 자바스크립트 Parser 내부적으로 끌어 올려서 처리하는 것이다.

2) 실제 메모리에서는 변화가 없다.

팁! 호이스팅 사용 시 주의

- 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.

1) 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상을 방지 할 수 있다.

2) let, const를 사용한다.

- var를 쓰면 혼란스럽고 쓸모없는 코드가 생길 수 있다. 그럼 왜 var와 호이스팅을 이해 해야 할까?

1) ES6를 어디에서든 쓸 수 있으려면 아직 시간이 더 필요하므로 ES5로 트랜스 컴파일을 해야 한다.

2) 따라서 아직은 var가 어떻게 동작 하는 지 알고 있어야 한다.

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

Step by step goes a long way.

gmlwjd9405.github.io

참고하면 좋을만한 유튜브

비 오는 날 개구리