호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언전에 미리 할당을 하는것을 뜻한다.
쉽게 표현하면 스코프 내부 어디서든 변수선언은 최상위에 선언된것처럼 보여진다.
여기서 말하는 스코프란 변수에 접근할수 있는 범위를 뜻한다.
즉 전역 스코프에 선언된 변수는 전역에서 접근이 가능하고 , 지역 스코프에 선언된 변수는 해당 지역 스코프내에서 접근이 가능하다.
다시 호이스팅에 대해 알아보자면,
호이스팅을 확인 할 수 있는 부분은 var 변수와 , 함수 선언문이 있다.
var 변수부터 알아보면
console.log(variable); // undefined
var variable = 'hello world';
variable이라는 변수가 선언되고 "hello world" 라는 스트링으로 할당 되기전에 콘솔로그를 찍었는데 undefined가 출력된다.
즉 variable이라는 변수는 호이스팅에 의해 선언이 최상단 위로 선언된것이다.
즉
var variable;
console.log(variable) // undefined
variable = 'hello world'
이렇게 작동했다고 보면된다.
함수 선언문에서도 호이스팅을 확인 할 수 있다.
func(); // hello world
function func(){
console.log('hello world');
}
분명 함수 호출이 함수선언보다 상단에 위치해도 해당 코드는 잘 작동을한다.
이유는 함수선언문에 호이스팅이 작동하여 최상단에 선언된것이다.
이것을 호이스팅이라고 한다.
그럼 let 과 const 는 호이스팅이 일어나지 않는것인가 ??
아니다. let과 const도 호이스팅이 일어난다.
하지만 let과 const 는 var과 변수 선언 , 초기화 단계가 다르기 때문이다.
var은 선언 및 초기화 단계가 동시에 일어나고 그다음 할당단계가 일어난다.(함수스코프)
즉 선언 및 초기화(undefined) 단계가 동시에 일어나기 때문에 호이스팅이 발생해 위에서 확인한것처럼 undefined를 출력 할 수 있는것이다.
let은 선언단계 , 초기화단계 , 할당 단계가 일어난다.(블록스코프)
선언 단계 , 초기화단계가 동시에 일어나는 var 변수와는 달리 let은 선언단계 초기화 단계 할당단계가 나뉘어져 있어 선언이 되어 호이스팅 되더라도 초기화 단계는 실제 코드에 도달했을때 되기때문에 참조에러가 발생한다.
const 는 선언 초기화 할당 단계가 동시에 일어나야한다.(블록스코프)
let과 const는 var 변수와 다르게 TDZ (Temporal Dead Zone) 이라는 것이 존재한다.
TDZ란 할당을 하기전 사용할수없는 사각지대의 영역이라고 보면된다.
즉
console.log(hello);
console.log(world);
let hello = 'hello world';
const world = 'hellow world';
let과 const가 할당 되기전 상단에 위치한 console.log들은 TDZ에 위치한다고 보면된다.
즉 호이스팅이 일어나더라도 TDZ가 방지를 하고 있다고 생각을 하면된다.
이때문에 let과 const는 호이스팅이 안일어난다고 생각하는 사람이 많은데,
전혀 그렇지 않다 호이스팅을 방지하고 있을뿐
태클은 언제나 환영합니다. 잘못된 부분이 있으면 바로잡아주세요 :)
'Javascript' 카테고리의 다른 글
자바스크립트 콜백함수란? (Callback Function) (0) | 2022.09.14 |
---|---|
자바스크립트 클로저란? (0) | 2022.09.10 |