[JavaScript] Hoisting

 

학원에서 자바스크립트를 처음 배우던 시점에 Hoisting을 가르쳐줬었던 것으로 기억한다. 

그 때는 애초에 수강생들이 코딩의 ㅋ 정도 겨우 알아가는 과정이라 알려줘봐야 제대로 이해할 리가 만무하니

그냥 선언하기 전에 실행시켜도 나중에 뒤에서 선언만 해주면 문제가 없다. 라는 식으로 알려줬었는데,

이번에 블로그 쓰기 시작하면서 제대로 정리해야겠다는 생각이 들어 작성한다. 

 

Hoisting (호이스팅) 이란 무엇인가?

공식적인 설명은 "인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 " 을 의미한다.

하지만 우리는 이 말로는 절대 이해할 수 없다. 

 

그래서 일반적으로 잘 풀어서 쉽게 설명하는 경우를 가져오면

"변수와 함수의 선언과 초기화를 분리한 후, 선언만을 코드의 최상단으로 옮기는 것" 이라고 이야기한다. 

 

JavaScript를 쓰다보면 선언과 초기화를 동시에 하기 때문에 묶어서 생각하니 무슨 소린가 하기 마련인데,

잘라서 생각해보면, 이렇게 된다.

var data; // 선언 => 사실 초기화도 됩니다. var로 선언했기 때문에
const data = 'hi' //선언 + 초기화

결국 사용하고 초기화 하고 이런 것 이전에 선언부터 한다는 뜻이다. 

var 로 변수를 선언했을 경우엔 undefined로 초기화까지 이루어진다. 

 

var data;
const data1;
let data2;

console.log(data); // undefined 출력
console.log(data1); // 예외
console.log(data2); // 예외

(주의 사항: let, const로 선언한 경우에는 초기화가 이뤄지지 않는다. 때문에 사용을 하게 되면 예외가 발생한다.)

 

이렇게 될 수 있는 이유는 JavaScript가 그런 애라서 그렇다.

JavaScript는 기본적으로 코드를 실행하기 전에 선언에 대한 메모리 부터 할당한다. 

그렇기 때문에 그 과정에서 코드 상으로는 사용부터 하고 있어도 선언이 먼저 이뤄지는 것이니,  아무런 문제가 안생기는 것이다.