본문 바로가기
Javascript/Javascript

호이스팅(hoisting) 이유와 원리 3줄 요약 + 설명

by img 2021. 10. 21.

호이스팅이란 , 변수나 함수의 호출 코드가 선언 코드보다 아래쪽에 있음에도 불구하고 에러가 발생하지 않고, 마치 선언 코드가 호출 코드보다 더 위에 선언된 것과 같이 동작하는 특성을 호이스팅(Hoisting) 이라고 한다.

그리고 호이스팅은 ES6+의 let과 const 변수에서는 할 수 없고, 오직 var 변수에서만 호이스팅이 일어난다. 
호이스팅이 발생하는 이유는 다음과 같다. 

1. 자바스크립트 엔진은 함수선언문 해석 -> 변수 초기화 -> 코드실행 순서로 진행된다.
2. 코드를 실행할 땐 이미 함수 선언문과 변수가 생성되어있는 상태이기 때문에
3. 어디에서든 함수나 변수를 호출할 수 있다. (심지어 제일 위에서도!)


자바 스크립트 엔진은 코드를 맨 위에서부터 읽어내려오기 전에 이미 실행 컨텍스트에 식별자 해결("이 이름을 가진 변수의 값은!?")을 가능하게 만드는 실행컨텍스트를 생성해논 상태이기 때문에, 변수(or 함수) 이름을 찾을 수 있는 것이다. 

변수는 초기화 되는 시점에 비록 값은 undefined이지만, 식별자를 해결할 수 있도록 변수를 초기화 해논 상태이기 때문에, 코드 실행 시점에 해당 변수를 어디에서 호출하든 식별자 해결은 가능하므로 에러 없이 호출이 가능하다. (물론 값은 undefined로!)

console.log("내 이름은1" , name);	// 내 이름은1 undefined

var name = "뭘까요";

console.log("내 이름은2" , name);	// 내 이름은2 뭘까요

내 이름은1 undefined. 에러없이 콘솔에 찍힌다!

댓글