수라의 티스토리

잡설 : 한동안 실무를 놨더니 기본개념부터 가물가물하다. 나 스스로를 위해 기초부터 다시 되짚어보고자 한다..

var는 es6 이전 변수를 정의할때 사용하는 구문

자비로운 javascript 덕분에 var는 오류가 날것 같은 상황에서도 에러를 내뱉지 않음

예를 들어.. 첫번째 케이스를 보자.

console.log(a);
var a = 0;
console.log(a);

// 결과
undefined
0

해당 코드는 일반인이 봤을땐 코드 순서대로 실행할것 같다고 판단하겠지?? java나 C++에서도 그렇게 판단할것 같다.

근데 javascript는 최초 브라우져 엔진이 코드에 접근했을때 변수나 함수 선언된 놈들을 끄집어내 메모리에 저장한다.

최상단 전역으로 올리는 행위 즉 호이스팅 한다고 표현한다.

그렇다보니 console을 실행하기 전에 변수 a를 선언한걸 먼저 호이스팅 하기 때문에 undefined가 출력된다.

이루 a를 0으로 할당하고 두번째 console을 실행할때 0의 값이 출력되는것

또는 이런 경우도 있다... 두번째 케이스.

for (var i=0; i < 5; i++) {
    console.log(i)
}
console.log(i)

// 결과
0
1
2
3
4
5

저기서 변수 i는 지역변수다. 전역에서 접근되면 안되는..

근데 보는바와 같이 접근이 가능해서 5가 출력된다.

var로 선언된 지역변수는 function에서만 보장된다는 블라블라....

이걸 보완하고자 나온게 let

첫번째 케이스를 let으로 바꿔보자

console.log(a);
let a = 0;
console.log(a);

// 결과
Uncaught ReferenceError: a is not defined at <anonymous>

에러가 난다. a는 아직 정의되지 않았다고..

var와 마찬가지로로 호이스팅은 한다. 대신 접근할 수 없는 TDZ라는 곳에 임시저장된 뒤 선언할때 접근 가능한 저장소로 옮겨진다고 한다.

for (let j=0; j < 5; j++) {
    console.log(j)
}
console.log(j)

// 결과
0
1
2
3
4
Uncaught ReferenceError: j is not defined at <anonymous>

위와 마찬가지 에러가 난다.

이걸 통해 var와 let의 차이.. 그리고 호이스팅이 뭔지 개념에 대해 이해해보자.