var, let, const의 차이점 간결하게 요약!

var, let, const의 차이점

var, let, const의 차이점에 대해서 예시코드와 함께 간결하게 정리했다. 이 내용도 프론트엔드 엔지니어를 준비하는 사람에겐 단골질문으로 나온다고 한다.

var, let, const는 크게 보면 스코프, 재선언의 가능 여부, 재할당의 가능 여부, 호이스팅 이렇게 4가지 부분에서 차이점이 있다.

 

1. 스코프의 차이

var은 함수 스코프를, let과 const는 블록스코프를 가진다.

function testScope() {
  var a = 1;
  let b = 2;
  const c = 3;

  if (true) {
    var a = 4; //위에서 선언된 a와 동일한 스코프
    let b = 5; //위에서 선언된 b와 다른 스코프
    const c = 6;//위에서 선언된 c와 다른 스코프
    console.log("inner block scope: ", a, b, c); // inner block scope: 4 5 6
  }

  console.log("function scope: ", a, b, c); // function scope: 4 2 3
}

testScope();

2. 재선언의 가능 여부

var은 중복 선언을 할 수 있지만, let과 const는 하지 못한다.

var a = 1;
let b = 2;
const c = 3;

var a = 4;
let b = 5; // Uncaught SyntaxError: Identifier 'b' has already been declared
const c = 6; // Uncaught SyntaxError: Identifier 'c' has already been declared

3. 재할당의 가능 여부

var,let은 ‘변수’를 구현한 것이라서 재할당이 가능하지만, const는 ‘상수’를 구현한 것이라서 불가능하다.

var a = 1;
let b = 2;
const c = 3;

a = 4;
console.log(a); // 4

b = 5;
console.log(b); // 5

c = 6; // TypeError: Assignment to constant variable.
console.log(c);

 

*다만 const로 선언된 것이 객체나 배열일 경우, 객체의 프로퍼티나 배열의 원소를 바꾸는 것은 가능하다. 그 이유는 객체나 배열의 경우 내부적으로 ‘값’이 아닌 ‘주소’를 저장하는 형태이기 때문이다. 주소가 상수로 고정되는 것일 뿐이지, 주소가 가리키는 값은 언제든지 바꿀 수 있다. 따라서 프로퍼티나 원소의 값은 변화시킬 수 있다.

 

const person = { name: "John", age: 30 };
person.age = 40;

console.log(person); // { name: "John", age: 40 }

const numbers = [1, 2, 3];
numbers[2] = 4;

console.log(numbers); // [1, 2, 4]

 

4. 호이스팅에서의 차이

var은 호이스팅 시 초기값이 undefined이 되지만, let과 const는 호이스팅 시 초기값을 부여받지 않는다. 따라서 var은 변수 선언 이전에 변수에 접근하면 undefiend값이 나타나고, let과 const의 경우 reference error가 발생한다.

console.log(name); // undefined
var name = "John";

console.log(age); // ReferenceError: age is not defined
let age = 30;

console.log(height); // ReferenceError: Cannot access 'height' before initialization
const height = 180;

*호이스팅에 대해 좀 더 알고 싶다면 이전에 작성한 이 글을 참고하길 바란다.

https://cuziam.tistory.com/entry/Hoisting이란-핵심만-알고가자

Hoisting이란? 핵심만 알고가자