본문으로 바로가기

var, let, const

category JavaScript/ES6 2020. 10. 7. 02:35

책과 내가 배운 강의들에는

var만을 사용해서 변수를 선언하고 초기화 했는데

응용 강의를 듣다보니 var의 사용을 자제하고 let과 const의 사용을 권장했다

그래서 찾아봤다

let, const

유효 범위

let,const도 var처럼 변수 선언인데

스코프의 유효 범위가 다르다

var은 함수 단위의 스코프였지만

let과 const는 블록 단위의 스코프를 가진다

if(true){
    let test = 110;
}
console.log(test);

위의 코드가 var로 선언되어 초기화되었다면 아무 문제없이 콘솔창에 110을 찍었겠지만 결과는 그렇지 못하다

에러를 뱉는다

블록 단위란 {로 시작해서 }로 끝나는 그 괄호 안의 범위를 블록 단위라고 한다

     if(true){
          let test = 110;
     }
console.log(test);

색칠된 부분만이 블록 단위의 범위이다

중복 선언

var은 같은 변수의 이름을 똑같이 선언해도 에러가 나지않고 덮어씌웠다

let dup = 100;
console.log(dup);
let dup = 1000;
console.log(dup);

하지만 let은 그렇지 않고 이미 dup이 선언되었다며 에러가 난다

const도 마찬가지

호이스팅

console.log(hoist);
let hoist = 100;

var로 선언했다면 이 코드는 100을 출력하진 않겠지만 undefined를 출력하며 에러가 나진 않는다

이젠 에러가 난다 그렇다면 let과 const는 호이스팅이 적용되지 않는 것일까?

그렇지 않다 호이스팅은 var과 똑같이 일어나지만 TDZ(Temporal Dead Zone)때문에 호이스팅이 일어나지 않는 것 처럼 보이는 것이다

TDZ는 선언된 변수가 호이스팅됐을 때 인식하지 못하게?해당 변수를 숨겨버리는데

이렇게 숨겨진 변수는 자신에게 값이 할당되었을 때 TDZ에서 빠져나온다

let, const의 차이

그럼 이 두 명령어의 차이는 무엇일까?

let은 재할당이 가능한 변수를 선언할 때 사용하고

const는 재할당이 불가능 한 상수를 선언할 때 사용한다

let re = 100;
console.log(re);
re = 0;
console.log(re);

const cant = 100;
console.log(cant);
cant = 0;

'JavaScript > ES6' 카테고리의 다른 글

class  (0) 2020.11.03
arrow function  (0) 2020.10.26
Weakmap, Weakset  (0) 2020.10.25
Destructuring  (0) 2020.10.21
Array  (0) 2020.10.20