Javascript 변수선언 문법(var, let, const) 차이점

2015년 ES5에서 변수선언 문법이 새로나왔다. 바로 let과 const. var라는 변수선언이 가능했는데 왜 새로 2개나 나왔을까? var의 사용을 지양하고, let과 const의 사용을 권장하는데 이를 정확히 파악하기 위해서 이 글을 포스팅해본다. 결론적으로 말하자면, 여러가지의 차이점이 있지만, 가장 중요한 개념은 변수의 스코프의 차이점이 있어서 그렇다. 그부분을 자세히 알아보자.

MDN에 3가의 문법에 대해 이렇게 명시하고있다.

---

var : 변수를 선언하고, 선택적으로 초기화할 수 있습니다.

let : 블록 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있다.

const : 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.

3가지 설명에 다른점을 찾는다면, var는 변수를 선언한다고 표현하고, let과 const는 블록 범위의 변수를 선언한다고 한다. 이게바로 스코프 차이인데 자세히 알아보자.

여기서 스코프란?

현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는 값과 표현식이 "표현"되거나 참조 될 수 있음을 의미한다. 만약 변수 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다. (출처: mdn scope)

스코프는 식병자의 유효범위를 뜻하며, 선언된 위치에 따라 유효 범위가 달라진다. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 가진다.

전역 변수는 어디에서든지 참조가 가능한 값이다. 반면, 지역 변수는 함수 몸체 내부를 말한다. 따라서 지역 변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효하다.

한 가지 주의해야 할 점은, 자바스크립트에서 모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프를 만들며, 이러한 특성을 block-level scope라 한다. 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 이를 function-level scope라 한다.

	Scope	mutable
var	function-level scope	O
let	block-level scope	O
const	block-level scope	X

예제코드

var

var x = 1;

if (x === 1) {
    var x = 2;

    console.log(x);
    // expected output: 2
}

console.log(x);
// expected output: 2

let

let x = 1;

if (x === 1) {
  let x = 2;

  console.log(x);
  // expected output: 2
}

console.log(x);
// expected output: 1

const

// 주의: 상수 선언에는 대소문자 모두 사용할 수 있지만,
// 일반적인 관습은 모두 대문자를 사용하는 것입니다.

// MY_FAV를 상수로 정의하고 그 값을 7로 함
const MY_FAV = 7;

// 에러가 발생함
MY_FAV = 20;

//output
console.log(MY_FAV);

// 상수를 재선언하려는 시도는 오류 발생 - Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
const MY_FAV = 20;

var 키워드의 문제점은 크게 세 가지가 존재한다.

• 변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.
• 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
• 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

그러므로 let과 const를 사용하길 권장한다.

참조블로그