[JS] let, const ,var 선언들의 차이점을 한번 ARABOZA.

var

자바스크립트 es5 버전까지의 변수 선언 방식이었다.

var 키워드는 생략 가능하다.

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

재선언과 재할당이 모두 가능하다.

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

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

a = "30";
console.log(a); //30

var키워드는 함수 레벨 스코프(function level scope)이다.

자바스크립트는 다른 언어(java, c)와 달리 기본적으로 블록 레벨 스코프(block level scope)가 아니라 function level scope이다.
function level scope란 함수 안에서 사용하면 함수 밖을 제외한 내부 어디서든 접근이 가능하고 함수 외부에서 선언된 모든 변수는 전역 변수로 한다는 뜻이다.

function f() {
  var hello = "hello world";
  console.log(hello);
}
f(); // hello world
console.log(hello); // ReferenceError

hello는 var로 선언된 function level scope이기 때문에 함수 외부에서 hello에 접근하면 ReferenceError가 발생한다.
전역 변수의 사용은 변수 이름이 중복될 수 있고, 의도치 않은 재할당에 의한 상태 변화로 코드를 예측하기 어렵게 만들 수 있으므로 사용을 지양해야 한다. 이러한 문제점들을 해결하기 위해 es6부터는 let과 const의 도입으로 block level scope를 사용할 수 있게 해준다.

let, const

재선언은 let, const 둘 다 불가능하다.

let a = 10;
let a = 20; // SyntaxError


const b = 10;
const b = 20; // SyntaxError

let, const는 블록 레벨 스코프(block level scope)이다.

block level scope란 모든 코드 블록(함수, if문, for문, while문, try/catch문 등..)내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

function f() {
  if (true) {
    let a = 10;
  }
  console.log(a); // ReferenceError
}

let 키워드는 해당 블록 안에서만 유효하기 때문에 ReferenceError가 출력된다. (const도 마찬가지)

var vs let vs const

변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 사용하는 것이 좋다. const 키워드를 사용하면 의도치 않는 재할당을 방지해 주기 때문에 보다 안전하다.

재할당이 필요한 경우에 한정해서 let을 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
변경이 발생하지 않는 상수와 객체에는 const를 사용한다.