var, let, const 차이점

var는 function-scoped

let, const는 block-scoped이다.

 

function-scoped는 함수 내에서 선언된 변수가 그 범위 내에서만 유효하고 외부에서는 참조할 수 없는 것을 말한다.

즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

 

block-scoped는 모든 코드 블록(함수, 조건문, 반복문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

 

var

var ex = 123; // 전역 변수

console.log(ex); // 123

{
  var ex = 456; // 전역 변수
}

console.log(ex); // 456

block-scoped를 따르지 않는 var이기에 코드 블록 내에서 변수를 선언해도 전역 변수로 된다. 또한 이미 전역 변수로 ex가 선언되어 있는데, var는 중복 선언을 허용하므로 위의 코드는 문제 없이 실행은 되지만, 위의 123 출력과는 다르게 밑에서 재할당되어 456이라는 새로운 값을 출력한다.

 

* 이전에는 var만이 존재했기에 중복 선언에 대한 문제가 많았다. 이를 해결하는 것이 let과 const이다.
두 개의 공통점은 var와 다르게 변수의 재선언이 불가능하다는 것이고, 차이점은 변수의 immutable(변경 가능)여부이다. let은 변수에 재할당이 가능하지만, const는 변수 재선언, 재할당 모두 불가능하다.

// let
let a = 'test'
let a = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
a = 'test3'     // 가능

// const
const b = 'test'
const b = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
b = 'test3'    // Uncaught TypeError:Assignment to constant variable.​

 

참고: 정리 굿!!

 

만약 전역 변수로 선언한 것과 코드 블록 내에 선언(지역 변수)한 것들이 따로 코드가 실행되게 하려면 block-scoped를 따르는 let을 사용해주면 된다.

 

let

let ex = 123; // 전역 변수

{
  let ex = 456; // 지역 변수
  console.log(ex); // 456
  let sample = 456; // 지역 변수
  console.log(sample); // 456
}

console.log(ex); // 123
console.log(sample); // ReferenceError: sample is not defined

block-scoped를 따르는 let을 사용해주면 예제와 같이 실행이 된다. 전역 변수와 지역 변수에서 선언된 변수 ex는 별개의 변수가 되는 것. 이때 변수 sample에 참조 에러가 뜨는 이유 또한, block-scoped 내에서만 돌아가기에 전역 변수에서 참조할 수 없어 에러가 뜨는 것이다.

 

const

const는 대부분 let과 비슷하다. 그저 변경이 발생하지 않는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다. const 키워드는 재할당을 금지하므로 var, let 보다 안전하다.

 

1. const는 반드시 선언과 동시에 할당이 이루어져야 한다. [그렇지 않으면 문법 에러 발생]

2. const는 재할당이 금지된다. 이는 const 변수의 타입이 객체인 경우, 객체에 대한 참조를 변경하지 못한다는 것을 의미. 하지만 이때 객체의 property는 보호되지 않는다. 즉, 재할당은 불가능하지만 할당된 객체의 내용(property의 추가, 삭제, 값의 변경)은 변경할 수 있다.

 

 

# 또 다른 참고