Hoisting 란?
스코프 내부에 있는 변수 선언문이 스코프 유효범위 최상단 까지 끌어 올려진 것을 호이스팅이라고 한다.
사실 변수 선언뿐 아니라 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스)는 호이스팅된다. 모든 선언문은 런타임 이전 단계에서 먼저 실행이 되기때문이다.
변수 생성하는데 총 3가지 단계를 걸친다.
- 선언단계:
변수를 변수객체에 등록하는 단계이다 . 해당 변수객체는 스코프 참조대상이된다. - 초기화단계:
변수객체 에 있는 변수들 에게 메모리 공간을 확보해주는 단계. 각 변수들 에게undefined값을 할당하게 된다. - 할당단계:
변수들 에게 새로운값을 할당해주는 단계.
변수의 생성과정
- var :1.선언과 및 초기화 단계 2.할당 단계
그래서 var를 사용했을때 undefined가 나오는것 같습니다. - let :1.선언단계 2.초기화 단계 3.할당 단계 초기화와 선언이 따로 진행된다
초기화는 실제로 코드를 작성했을때 진행이 되기때문에 let을 사용해서 진행시키면 에러가 난다. - const:1.선언 초기화 할당(동시에 다 진행시켜야 한다)
선언하면서 바로 값을 할당안하면 에러가 발생한다.
var와let 차이점
- var는 한번 선언된 변수를 다시 선언할 수 있다.
let은 에러가 난다. - var는 선언하기 전에 사용할수있다
var는 선언과 초기화 가 한번에 이뤄져서 undefined 값을 초기화 하기 때문에. 변수 선언문 이전에 접근해도 에러가 발생하지 않고 undefined 값이 출력이 된다.
위 코드처럼 코드 작성하면 var는 밑에 코드처럼 작성이된다.
let 과 const 도 호이스팅이된다고 하지만 왜 에러가날까요?
반대로 let은 에러가 난다 const ,let 은 선언과 초기화 가 분리되어있기 때문에 변수 선언문 까지 도달해야 초기화 가 되기때문에 그전에 변수에 접근하면 참조에러가 뜬다.
이유는 Temporal Dead Zone(TDZ)라는거 때문이다 TDZ라는 구간 있는 변수들은 사용할수가 없습니다.let,const 는 할당하기전에 사용할수가 없습니다.(버그를 줄일수가 있다)
let age = 30;
function showAge(){
console.log(age);
}
showAge();위쪽 코드는 문제가 없습니다,하지만 밑에 코드는 에러가 발생합니다.
let age = 30;
function showAge(){
console.log(age);
let age=20;
}
showAge();여기서 실수하는것은 이 에러는 let의 호이스팅 문제때문에 에러가 난다 라고 생각하시는 분이 많이 계실겁니다.하지만 호이스팅은 스코프(scope) 내부에서 작동하기 때문에 이번 에러는 호이스팅 에러가 아니라는것을 알수가 있습니다. 그럼 여기서 에러 나는 이유는 뭘까요?
바로 코드console.log(age); 여기서 나오는 TDZ 이기때문입니다.
스코프
var :함수 스코프(function-scoped)
함수 스코프: 함수 내에서 만 지역변수 가 된다
if문에서 선언된 var는 밖에서도 호출이 가능하다.
let,const는 불가능하다 에러가 난다.
유일하게 함수 스코프 에서는 안된다 그것을 함수 스코프라고 알고있는게 좋다.
let,const 블록 스코프(block-scoped)
블록 스코프는 모든 중괄호 코드 내에서 선언 한것이면 그 중괄호 안에서 만 작용이 된다.
예)함수 if for while try/catch
같은 블록 스코프 에서만 적용이 되며 블록 스코프 밖에서는
function f(){
// Block scope
}
if(){
//Block scope
}var말고 let쓰길 권장할것 예측가능한 결과를 낼수있고 버그를 줄일수 있습니다.
