자바스크립트는 몇가지 특이한점을 갖고 있는데, 그 중 하나가 호이스팅이다.
파이썬에서
print(number)
number = 10
라고 하면 콘솔창에서 에러가 나온다.
그 이유는 자바스크립트를 제외한 많은 언어가 top-to-bottom, 위에서 아래로 코드를 해석하기 때문이다.
number라는 변수가 선언, 할당되기 전에 출력함수인 print가 나왔기 때문에 에러가 나오는 것이다.
하지만 자바스크립트에선
print(number)
var number = 10라고 해도 에러가 나오지않고 undefined가 출력되는데, 이러한 현상은 호이스팅 때문에 발생한다.
호이스팅이란 함수 안에 선언된 모든 변수를 상단으로 끌어올려 해당 함수 최상단에 선언하는 것이다.
호이스팅은 javaScript에서 사용되는 var, let, const 모두 일어나지만 조금의 차이가 있다.
변수의 생성 과정은 선언, 초기화, 할당 3가지로 이루어지는데,
var같은 경우, 선언과 동시에 초기화가 진행되기 때문에 앞서 보인 예제에서 오류가 아닌 undefined, 즉 number가 선언, 초기화는 되었지만 10이라는 변수가 할당되지 않은 상태를 출력하는 것이다.
만약
print(number)
let number = 10라고 하면 어떤 에러가 출력될까?
TDZ(Temperal Dead Zone) 라는 에러가 출력되는데, 이는 let도 호이스팅이 일어나서 최상단에 number라는 변수가 선언되지만, let number=10으로 할당이 되기 전의 상태까지는 TDZ다.
이는 const와 let에서 발생하는 에러이며, ES6전에는 var밖에 없었지만 이후에는 const와 let이 등장하면서 var보단 const, let 사용이 권장된다.
var는 변수를 여러번 다시 할당을 해도 오류가 나지 않았는데,
예를들어
var a = 10
console.log(a)
var a = 20
console.log(a)를 할 경우, 에러 없이
10
20을 출력하는걸 알수있다.
ES6이후에 나온 const와 let은 각각 상수와 변수를 맡고있는데, 방금 보여준 예제와 같이 변수를
let a = 10
console.log(a)
let a = 20
console.log(a)라고 하면 이번엔 Identifier has been declared 라는 에러가 나온다.
다른 차이점은
var = 함수 스코프
const, let은 블록 스코프라는 것인데,
function add(){
// 블록 , 함수 레벨
}
if(){
// 블록레벨
}
for(let i=0; i<10; i++){
//블록 레벨
}즉 const와 let은 블록 안에서만 사용되는 지역변수라고 생각하면 되고,
var은 함수 내에서는 지역변수지만, if, for, try/catch같은 블록레벨의 문법에서는 밖에서도 사용이 가능하다
예를들어보자
const age = 30
if(age>19){
var txt = '성인';
}
console.log(txt);// 성인라는 결과가 나오지만,
const age = 30
if(age>19){
let txt = '성인';
}
console.log(txt);// txt is not defined라는 결과가 나온다.
