[Javascript]변수 호이스팅

호이스팅에 앞서

영단어 hoist의 뜻은 다음과 같다.

 

 

감아올리다, 끌어올리다 등 무언가를 끌어올린다고 생각하면 쉽다.

 

 

 

원래 있던 자리에서 끌어 올린다고 생각하자

 

Hoisting은 사용한 변수를 선언하는 문이 코드의 가장 위로 끌어올려진 것처럼 동작하는 자바스크립트의 특성이다.

 

 

---

먼저, ReferenceError(참조 에러)와 undefined에 대해 알아야한다.

 

ReferenceError(참조 에러)는 식별자를 통해 값을 출력하려고 하였지만 자바스크립트가 등록된 식별자를 찾을 수 없을 때 발생하는 에러이다.

 

undefined는 변수는 선언하여 메모리 공간을 확보했으나(빈 공간) 아직 값을 할당하지 않았을 때 undefined라는 값이 할당되어 초기화된다.

 

 

자바스크립트는 변수 선언이 코드의 어디에 있든 다른 코드보다 먼저 실행한다는 특징을 가지고 있다. 앞서 적은 정의와 같은 맥락이다.

 

console.log(a)//출력

var a //할당

console.log를 먼저 적고

 

변수 a를 할당하는 것을 뒤이어 썼다.

 

 

 

코드가 진행되는 순서는 위에서 아래인 순이여서 이대로 실행하면 첫 번째 줄은 a가 등록되기 전이니 ReferenceError(참조 에러)가 나온다고 생각할 수 있다. 하지만 자바스크립트의 특징인 호이스팅이 있기에 변수를 가상으로 끌어올려 실행한다.

 

(실제로 자리가 바뀌는 것은 아니다)

 

 

 

 

그 결과 undefined를 내놓는다. 아직 변수에 할당을 안 했기 때문이다.

 

 

 

console.log(a)//출력

var a = 10//할당

console.log(a)//출력2

 

이번에는 변수 a에 10을 할당하고 consele.log로 출력하면 다음과 같다.

 

 

 

위의 consele.log는 아직 값이 없는 undefined를 출력하고 변수에 값 10에 할당하고 난 후의 consele.log는 변수 값 10이 출력되었다.

 

이를 통해 호이스팅은 변수를 가상으로 선두로 실행시켜주는 것임을 알 수 있다.

 

---

호이스팅은 처음에는 간단해 보였는데 조금 헷갈리는 부분이기도 하였다.

변수 선언뿐만 아니라 함수에서도 쓰이고 여러 식별자에서 쓰인다고 한다.

 

이에 대해서는 좀 더 공부하면서 정리하는 의미로 글을 쓸 예정이다.

 

 

레퍼런스: 모던 자바스크립트 deepdive