[JavaScript] var 대신 let을 써야 하는 이유

* 해당 포스팅은 참고페이지의 코드를 똑같이 사용하였음

 

1. 범위 규칙이 엄격함

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar);

  {
    let baz = "Bazz";
    console.log(baz);
  }

  console.log(baz); // ReferenceError
}

run();

위의 코드는 let을 사용하고 있고 baz를 중괄호 밖에서 실행할 때

레퍼런스 오류(해당 변수가 정의되지 않았다)를 발생시킨다.

let을 var로 바꿔 돌려보면 에러 없이 실행되는 것을 확인할 수 있다.

 

let은 자신을 둘러싼 제일 작은 중괄호 안에서만 작동하지만,

var는 어떤 중괄호 안에 속해있든 같은 function 안에서라면 무조건 작동한다.

 

 

 

2. 호이스팅(Hoisting, 끌어올리기)이 없음

function run() {
  console.log(foo); // undefined
  var foo = "Foo";
  console.log(foo); // Foo
}

run();

위의 코드에서 위쪽 명령문은 자신 아래에 정의된 foo라는 변수를 끌어올려 불러온다.

(변수가 정의되었다는 것만 알고 초기화된 값까지 불러오진 않으나, 포인트는 에러가 없다는 것이다)

 

반면 var를 let으로 바꿔 돌려보면 foo라는 변수가 정의되지 않았다는 에러를 발생시킨다.

 

 

 

3. (strict mode 사용 시) 재정의를 못하게 막아줌

'use strict';
var foo = "foo1";
var foo = "foo2"; // No problem, 'foo' is replaced.

let bar = "bar1";
let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared

재정의를 했을 경우 var는 허용하지만 let는 허용하지 않고 에러를 발생시킨다.

(참고페이지에서는 strict mode를 사용해야 재정의를 막는다고 하지만

실험해 본 결과 사용하지 않아도 같은 효과가 있었다)

 

 

 

4. 전역객체에 속성을 생성하지 않음

var foo = "Foo";  // globally scoped
let bar = "Bar"; // globally scoped

console.log(window.foo); // Foo
console.log(window.bar); // undefined

let은 (var와는 다르게) 최상위 객체인 window에 속성을 생성하지 않기 때문에

window를 통해서 값을 불러올 수 없다.

 

 

 

- 한 줄 요약 : let이 var보다 더 명확하고 엄격한 규칙을 갖고 있어 JS 프로그래밍 시 혼란을 줄여줌.

 

 

 

 

---

참고 페이지 (ThinkingStiff의 답변)

https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var