var, let, const 키워드를 중복 선언 허용, 스코프, 호이스팅 관점에서 비교

중복 선언 허용

• let, const 키워드는 중복 선언이 불가능하다
• var 키워드는 중복 선언이 가능하다

  var myVariable = 'first';
  console.log(myVariable);
  var myVariable = 'second';
  console.log(myVariable);

  first
  second

• 이렇게 변수가 중복선언이 되면 코드의 안정성이 떨어진다

스코프

• let, const 키워드로 선언한 변수는 if, for, function 등등 어떤 키워드와 관계없이 코드 블록, 즉 {} 중괄호로 감싸진 부분을 기준으로 scope를 갖게 된다(block scope)
• var 키워드로 선언한 변수는 함수(function) 단위로만 scope가 구분되어 있다(function scope)

  {
    let x = 3;
  }

  function myFunction() {
    let y = 4;
  }

  console.log(x);
  console.log(y);

  Uncaught ReferenceError: x is not defined

• let, const 키워드의 경우에는 중괄호로 감싸진 경우라면 모두 중괄호 밖에서는 지역 변수에 접근할 수 없다

  for (let x = 0; x; x++) {
  }
  console.log(x);

  Uncaught ReferenceError: x is not defined

• let, const 키워드는 반복문의 조건식 안에서 선언된 경우에도 반복문 밖에서 지역 변수에 접근할 수 없다

  {
    var x = 3;
  }

  function myFunction() {
    var y = 4;
  }

  console.log(x);
  console.log(y);

  3
  Uncaught ReferenceError: y is not defined

• var 변수는 함수(function) 스코프만을 갖기 때문에 if, for, while, switch 등 다양한 상황에서 선언한 변수가 전역변수의 역할을 하게 될 수도 있다

호이스팅 (Hoisting)

• let, const 키워드로 선언한 변수는 선언되기 이전에 사용될 수 없다
• var 키워드로 선언한 변수는 선언되기 이전에 사용될 수 있다

  console.log(myVariable);
  let myVariable;

  Uncaught ReferenceError: Cannot access 'myVariable' before initialization

	console.log(myVariable);
	var myVariable;

	undefined

• 변수의 선언이 끌려 올라가서 마치, 2번째 줄과 첫 번째 줄이 바뀐 것처럼 동작하는데,

  var myVariable;
  console.log(myVariable);

• 이렇게 변수가 끌어올려 지는 현상을 '호이스팅(hoisting)'이라고 부른다

  console.log(myVariable);
  var myVariable = 2;
  console.log(myVariable);

  undefined
  2

• 호이스팅은 선언과 동시에 값을 할당하더라도, 선언문만 올려지기 때문에 값은 그대로 두 번째 줄에 남아있다

  sayHi();

  function sayHi() {
    console.log('hi');
  }

  hi

• 함수를 선언할 때도 호이스팅이 적용된다.

• 함수 호이스팅은 함수를 한 번 선언하고 나면 어디서든 유연하게 사용할 수 있다는 장점이 있지만, 코드의 흐름에는 부정적인 영향을 끼칠 수 있다

• 함수를 선언할 때는 가급적 코드 윗부분에 선언하거나, 호출을 항상 아래쪽에서 한다거나 나름대로 규칙을 세워서 코드를 작성하기를 권장한다

• var 키워드는 이러한 단점들로 인해 최근에 잘 사용되지 않는다

참고

• var - JavaScript | MDN
• let - JavaScript | MDN
• const - JavaScript | MDN
• Scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
• Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
• 코드잇 제공 자료