호이스팅이란 , 변수나 함수의 호출 코드가 선언 코드보다 아래쪽에 있음에도 불구하고 에러가 발생하지 않고, 마치 선언 코드가 호출 코드보다 더 위에 선언된 것과 같이 동작하는 특성을 호이스팅(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. 에러없이 콘솔에 찍힌다!
'Javascript > Javascript' 카테고리의 다른 글
[Javascript] 콜스택(Call Stack), 메모리힙(Memory Heap), 가비지컬렉션, 메모리릭 그림으로 이해하기 (1) | 2022.03.16 |
---|---|
원시값과 참조값, 얕은복사와 깊은복사, Object 깊은복사 방법 (1) | 2021.11.20 |
[ES6+] Promise와 then, catch, finally, all, race (0) | 2021.10.23 |
[ES6+]화살표 함수(=>) 특징 3줄 요약 + 설명 (1) | 2021.10.20 |
[ES6+] var, let, const 쉽게 이해하기! 3줄요약 + 설명 (0) | 2021.10.19 |
댓글