변수를 선언하는 세가지 방식

• var 키워드는 2015년 ES6의 등장 이전에 주로 사용하던 변수 선언 방식으로, 현재 let과 const의 등장으로 이제는 잘 쓰이지 않는 방식이다.

• const 키워드는 2015년 ES6 이후에 등장한 변수 선언 방식으로, 그 변수를 상수로서 지정함을 선언하는 방식이다. const 로 선언한 변수의 기존 값에 다른 값을 할당하려고 하면 오류가 발생한다.

• let 키워드는 2015년 ES6 이후에 등장한 변수 선언 방식으로, 일반적인 변수를 선언한다.
  
  
  
  

세가지 방식의 차이점

1. 호이스팅 여부

console.log(name); // undefined
var name = 'Ben';
console.log(name); // Ben

• var 로 선언한 변수의 경우, 자바스크립트는 코드 전부를 훑어 var 로 선언된 변수를 유효범위 최상단으로 끌어올린 것처럼 작동하는데, 이런 방식을 호이스팅(Hoisting) 이라 한다. 위의 변수 name 은 선언 전에 이미 호출이 되었지만 호이스팅이 일어나 오류가 나지 않고 정상적으로 호출이 되었다. 하지만 변수 값에 대해서는 초기화된 상태이므로, 값 할당 이전에는 undefined 가 출력된다.

console.log(name);  // ReferenceError
const name = 'Ben';

• 하지만 const 와 let 의 경우, 호이스팅이 일어나지 않기 때문에 선언 전에 호출하면 오류가 발생한다.
  
  

2. 중복선언 여부

var name = 'Ben';
console.log(name); // Ben
var name = 'Alex';
console.log(name); // Alex

• var 로 선언한 변수의 경우, 한번 변수를 선언하고 그 후에 같은 이름의 변수를 선언하더라도 오류가 발생하지 않는다. 그대로 이후에 선언한 변수가 덮어씌워지게 된다. 즉, 중복선언이 가능하다.

let name = 'Ben'; 
let name = 'Alex'; // SyntaxError

• 하지만 const 와 let 의 경우, 이미 선언한 변수에 대해 다시 선언하게 되면 오류가 발생한다. 값을 다른 값으로 재할당 하는 것은 가능하지만, 중복선언은 불가능하다.
  
  

3. 스코프의 차이

if (true) {
  var name = 'Ben';
};

function Age() {
  var age = 20;
};

console.log(name); // Ben
console.log(age); // ReferenceError

• var 로 선언한 변수의 경우, 함수 내에서 선언한 변수를 밖에서 호출하는 것에는 오류가 발생하지만, 그 외의 코드블록 {} 안에서 선언한 변수에 대해서는 밖에서 호출해도 오류가 발생하지 않는다. 이는 함수 내부에서 선언한 변수가 지역변수가 되고, 그 외에서의 선언에 대해서는 전역변수가 되었기 때문이다. 따라서 var 의 변수는 함수 레벨 스코프 를 가진다고 말한다.

if (true) {
  let name = 'Ben';
};

function Age() {
  const age = 20;
};

{let job = "Post Officer"}

console.log(name); // ReferenceError
console.log(age); // ReferenceError
console.log(job); // ReferenceError

• 하지만 const, let 의 경우, 함수 뿐 아니라 if, while 등의 {} 코드블록 안에서 선언한 변수에 대해서 모두 지역변수가 된다. 또, 그냥 중괄호로 감싼 코드블럭 안에서 선언한 변수에 대해서도 밖에서 호출하면 오류가 발생한다. 따라서 const 와 let 의 변수들은 블록 레벨 스코프 를 가진다고 말한다.
  
  
  
  

var 방식의 문제점

    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }
    
    console.log(greeter) // "say Hello instead"

위의 경우를 보면, greeter 변수가 var 로 선언되었기 때문에 중복선언이 되면서 값이 덮어씌워지는 모습을 볼 수 있다. 게다가 블록 범위 안에서 선언 되었는데도 var 이기 때문에 전역변수가 되어 값이 덮어씌워진 것이다. 위의 예시는 코드가 짧아 greeter 가 중복된다는 것을 깨닫기 쉽지만, 코드가 길어지고 변수의 개수가 많아지기 시작하면 위에서 어떤 변수를 썼는지 헷갈리기 시작한다. 때문에 var 을 사용했을 때는 위와 같은 상황이 의도치않게 벌어질 수 있다. 하지만 const 와 let 의 경우, 변수의 스코프를 한정하고 중복선언을 금지하여 이러한 상황을 사전에 방지할 수 있게끔 한다.

따라서 var 은 역사의 뒤안길로 묻어두고, const 와 let 을 변하는 값인지 아닌지에 따라 그때그때 상황에 맞게 사용하는 것이 바람직하다고 볼 수 있겠다.