Hoisting

var a와 function b를 정의하기 전에 호출을 한다면 어떻게 될까?

 

순서대로 실행하는 프로그래밍 언어의 특성상 에러가 난다

 

하지만!!

 

자바스크립트에서는 에러가 나지 않는다

 

자바스크립트는 `hoisting`을 하기 때문이다

 

Hoisting이 무엇인가요?

자바스크립트에서는 변수와 함수를 정의하기 전에 호출을 하게 되면 hoisting이라는 현상이 일어난다

 

밑에 정의되어 있는 변수와 함수를 위로 끌어올려주는 것이다

 

실제 저장된 위치를 옮기는 것은 아니다

 

이런 현상은 자바스크립트의 실행을 크게 이단계로 나눌 수 있기 때문에 벌어진다

 

첫 번째, 생성

the global execution context가 만들어진다

 

내가 짠 코드를 쭉~ 훑으면서 컴퓨터 언어로 해석할 준비를 한다

 

그리고 이렇게 훑는 과정에서 내가 변수와 함수를 어디에서 만들었는지 발견한다

 

그리고 그 변수와 함수를 위한 메모리를 준비한다

 

바로 이 때 hoisting이 일어나는 것이다

 

코드가 순서대로 실행되기도 전에

 

자바스크립트 엔진이 이미 내가 코드 전체에서 짠 변수와 함수에 메모리를 할당해 놓았기 때문에!

 

두 번째, 실행

이 단계에서 실제로 코드가 순서대로 실행이 된다

 

할당이 이루어지는 단계가 바로 여기다

 

생성 단계에서 변수 a에게 메모리는 할당되었지만 a의 값은 알지 못했는데

 

실행을 하면서 a의 값이 할당된다.

 

그렇다면 이렇게 실행이 되어 a의 값이 할당되기 전까지 a의 값은 무엇이 될까?

 

자바스크립트의 모든 변수의 초기값은 undefined이다

 

따라서 a에 값을 할당하기 전에 a를 호출하면

 

a의 값은 undefined이다

 

 

hoisting은 변수와 함수 둘 모두에게 적용이 되지만

 

변수는 선언 부분까지만 메모리에 할당되서

 

hoisting 단계에서 변수의 값은 알 수 없는 반면,

 

함수는 전체가 다 생성 단계에서 메모리에 자리잡아서

 

정상적으로 작동한다

 

 

그래서 hoisting을 믿고 코드를 짜는 건 좋지 않다

기술적으로 동작하기는 하지만 hoisting을 쓰지 않도록 하자