자바스크립트

var, let, const 비교

funnyjs 2022. 2. 24. 01:13

1. 상수와 변수

var와 let은 변수 선언 키워드이고 const는 상수(변하지 않는 값) 선언 키워드이다.

 

2. 호이스팅

호이스팅은 var, let, const 모두에게서 발생한다.

var v = 1; 
let l = 2;
const c = 3;
function outer () {
    console.log(v);  // undefined
    console.log(l);  // ReferenceError
    console.log(c);
    var v = 'var';
    let l = 'let';
    const c = 'const';
}
outer();

호이스팅이 발생하지 않는다면 위에 선언한 v, l, c 값을 참조해야 되는데 그 값을 참조하지 않는 것을 보면 호이스팅이 발생한다는 것을 알 수 있다. 하지만 다른 점이 있다면 var는 호이스팅 후 undefined로 초기화 작업을 한다는 것이고 let과 const는 초기화를 하지 않아 초기화 전에는 사용할 수 없다는 ReferenceError가 발생한다는 점이다.

 

3. 스코프

대부분의 프로그래밍 언어에서는 블록 레벨 스코프로 지역 스코프를 만든다. 하지만 var는 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성되고 블록에서는 따로 스코프가 생성되지 않기 때문에 의도치 않은 동작이 많이 발생한다. 이 문제를 해결한 것이 let과 const이다. let과 const는 다른 프로그래밍 언어에서도 많이 쓰이는 블록 레벨 스코프가 지역 스코프가 된다.

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

 

4. 중복 선언

var로 선언한 변수는 중복으로 선언하는 것이 가능하다. let과 const는 중복 선언이 안 된다.

var a = 10;
console.log(a); // 10
var a = 20;
console.log(a); // 20

 

✋ 결론

  • var는 사용하지 말자.
  • 재할당이 필요한 원시값을 제외하고는 모두 const로 상수로 만들자.
  • 일단 const로 만들고보자.

'자바스크립트' 카테고리의 다른 글

자바스크립트의 this  (0) 2022.02.27
자바스크립트 연산자  (0) 2022.02.20
자바스크립트 데이터 타입  (0) 2022.02.18
변수(variable)  (0) 2022.02.17
자바스크립트의 역사  (0) 2022.02.15