자바스크립트(Javascript) 호이스팅(hoisting)이란?

 자바스크립트가 초기 생성 및 실행 단계에서 어떻게 동작하는지에 대해서 호이스팅이 중요한 개념인것 같다. 여러 강의도 듣고 유튜브 영상도 보며 보고 듣기는 했지만, 간략하게 변수와 함수 선언을 스크립트 실행 시 최 상단으로 옮긴다는 개념으로 알고 있었는데, 모질라 페이지에 들어가보니 이게 잘못알고있었다는 것을 알 수 있었다.

 먼저 변수의 경우는 선언만을 끌어올린다. 이게 무슨 말인가 하면 변수를 단순 선언만 해두는 경우도 있고 초기화만 해두는 경우도 있으며 자바스크립트는 변수를 선언하지 않고 초기화만 해도 오류라고 판단하지 않는다.

 

word = 3;

 

 단순히 이렇게만 작성해도 오류를 뱉어내지 않는다는 말이다. var, let, const와 같은 예약어가 없어도 사용이 가능하다는 의미.

 이와 연결시켜서 호이스팅이 변수를 최상단으로 끌어올린다는 개념이라고 생각했을 때, 어쩌면 이렇게 코드를 작성할 수도 있다.

 

var word;

console.log(word);

word = 3;

 

기존의 잘못된 개념을 그대로 가지고 있다면 호이스팅의 개념을 봐서 변수란 최상단으로 옮겨지는 것이니 아래와 같이 호이스팅 될 것이라고 생각할 수 있다.

 

var word;

word = 3;

console.log(word);

 

실제 이와 같이 호이스팅 된다면 문제없이 지정한 값 3으로 출력이 된다. 하지만 실제로는 undefined를 반환한다. 결과 값이 이렇게 undefined으로 나오는 이유는 호이스팅은 변수 선언을 최상단에 올려놓을 뿐, 단순 초기화는 해당이 되지 않는다는 의미이다.

 

var word;

console.log(word);

word = 3;

 

 즉, 호이스팅을 거쳐도 기존 코드와 마찬가지라는 의미이다. 초기화는 호이스팅이 되지 않으니 위치 변동이 일어날 이유가 없기 때문.

 

 이렇게 변수 선언과 함수 선언이 최상단에 옮겨놓는 다는 것에 대해서는 알았다. 그러나 찾아보니 최상단에 옮겨놓는 다는 것도 오해라는 것.

 실제 스크립트가 돌아가는데에는 최상단에 옮겨놓는다고 이해하는 것도 그리 나쁘지는 않다고 생각이 들고, 아마 여러 강의들을 작성하신 분들도 그런 의미에서 설명을 하셨을 것이라고 생각된다. 뭐 어쨋든 호이스팅을 거쳐도 실제 스크립트 안의 변수 선언과 함수 선언들의 위치는 작성한 그대로의 위치에 있다. 실제 스크립트 안의 코드들의 위치가 변하지는 않는다는 의미이다. 변수 선언과 함수 선언들은 단지 메모리에 올라가 있을 뿐이다. 

 

1. 변수는 단순 초기화는 호이스팅되지 않는다. 선언을 할 경우만 호이스팅된다.

2. 변수 선언과 함수 선언은 스크립트의 최상단으로 올라가는 것이 아니라 메모리에 먼저 올라간다. 실제 스크립트는 그 위치 그대로 있다.