[JavaScript] var대신 let을 쓰는 이유 | 기능 차이

자바스크립트에서 변수 키워드에 var을 쓸지 let을 쓸지에 대한 고민이 존재한다. 둘은 기본적으론 별 차이 없이 변수를 선언하지만 가능하면 var 대신 let을 쓰도록 권고되기 때문이다. 왜 일까. let을 사용함으로써 개발자는 좀더 통제 가능한 코드를 작성할 수 있어서다.

 

let은 ECMAScript6부터 추가됐다. var는 그 이전부터 쓰였다. 즉 let은 var보다 늦게 등장한 변수 선언 키워드다. 필요에 따라 let이 추가됐다는 의미다.

var · let 차이

• let은 재선언되지 않는다.

Ex)

function run(){
 var varTest = 10;   
 var varTest = 20;
console.log(varTest) // 20
}
run();

var로 선언한 변수는 같은 이름으로 재선언하면 새롭게 선언한 값을 저장한다. 반면

function run(){
 let letTest = 10;   
 let letTest = 20;
console.log(letTest) // error : 'letTest' has already been declared
}
run();

let은 같은 이름으로 재선언하면 오류가 발생한다.

 

var이 좀더 관대하다. 이는 장점일 수도 있지만 의도치 않은 실수를 발생시킬 수 있다. let은 이런 문제를 예방해 줄 수 있다.

• let은 자신이 속한 코드블럭{} 안에서만 작동한다.

Ex)

function run() {
  var varTest = "varTest";
  let letTest = "letTest";

  console.log(varTest, letTest); // varTest letTest

  {
    var varTest2 = "varTest2"
    let letTest2 = "letTest2";
    console.log(varTest2, letTest2); // varTest2 letTest2
  }

  console.log(varTest2); // varTest2
  console.log(letTest2); // ReferenceError
}

run();

코드블럭{}안에 변수를 선언했는데 블록을 벗어났을 때 var으로 선언한 변수는 인식되지만 let으로 선언한 변수는 인식되지 않는다. 그만큼 변수 통제가 가능하다.

• let은 호이스팅(Hoisting)이 일어나지 않는다.

Ex)

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

run();

var의 경우 변수 선언 전 코딩한 첫 번째 콘솔 로그에서 undefined가 나타나지만 에러가 발생하지는 않는다. 반면 let의 경우 ReferenceError가 발생한다.

function run() {
  console.log(letTest); // ReferenceError
  let letTest = "varTest";
  console.log(letTest); // letTest
}

run();

• let은 글로벌 객체 속성을 생성하지 않는다.

Ex)

var varTest = "varTest";  // globally scoped
let letTest = "letTest"; // not allowed to be globally scoped

console.log(window.varTest); // varTest
console.log(window.letTest); // undefined

결론

var의 경우 스코프가 넓다. 때문에 변수가 어디서 어떻게 사용되는지 파악이 어려워질 가능성이 있다. 또 의도치 않은 재선언으로 문제가 생기기도 쉽다. 반면 let은 변수의 범위를 제한·통제하기 용이하고 의도치 않은 변수값 변경을 피할 수 있다.

---

참고: What's the difference between using “let” and “var”? (stackoverflow)