[Javascript] Hoisting

자바스크립트는 var 키워드를 사용해서 변수를 선언하면 2가지 단계를 실행한다

1. 선언
2. 초기화

예를 들어 아래와 같이 🍎라는 변수를 선언했다고 가정해보겠다

var 🍎;

실제 🍎는 어떻게 자바스크립트에서 동작 했을까?

🍎는 우선 메모리 공간을 확보하고 했을 것이다
그리고 아무 값도 넣어 주지 않았기 때문에 비어있을 것이라고 생각할 수 있다

console.log(🍎); //undefined

하지만 위와 같이 콘솔로 확인해보면 undefined이라는 값이 반환된다

이처럼 var 키워드를 사용해서 변수를 선언하게 되면 선언하는 동시에 초기화가 이루어지게 된다

이때 암묵적으로 변수는 undefined으로 초기화 된다

console.log(animal)
animal = '🐶';
console.log(animal)
var animal = '😽';
console.log(animal)

위 코드의 결과값은 무엇일까

undefined
🐶
😽

var 키워드를 사용해서 변수를 사용하면 undefined으로 선언과 동시에 초기화 된다는 사실은 알게 되었다
하지만 선언이 되기도 전에 변수를 참조했는데 왜 오류가 나지 않은 것일까?

위에 코드를 보면 알 수 있듯이 인터프리터가 변수 메모리 공간을 선언 전에 미리 할당했기 때문입니다

다시 말해 var 키워드를 사용해 변수를 선언하면 코드가 실행되기 이전에 이미 변수가 생성됩니다

var animal;
console.log(animal)
animal = '🐶';
console.log(animal)
animal = '😽';
console.log(animal)

이처럼 호이스팅은 변수 선언이 선두로 끌어올려진 것처럼 동작하는 것을 말하는 것입니다