[개발 지식] var와 let에 대하여 | 민민의 하드디스크 - 티스토리

자바스크립트 변수 선언 var와 let의 차이점

let과 var는 모두 자바스크립트에서 변수를 선언할 때 사용되는 키워드입니다.

• let과 var의 차이점

let으로 선언한 변수는 블록 스코프(block scope)를 가지고, var로 선언한 변수는 함수 스코프(function scope)를 가집니다. 따라서, let으로 선언한 변수는 해당 블록 내에서만 유효하고, var로 선언한 변수는 함수 내에서 유효합니다.
let으로 선언한 변수는 동일한 이름의 변수를 다시 선언할 수 없지만, var로 선언한 변수는 가능합니다.
let으로 선언한 변수는 선언하기 전에는 사용할 수 없지만, var로 선언한 변수는 선언하기 전에도 사용할 수 있습니다.

• let과 var의 공통점

변수를 선언할 때 사용되는 키워드입니다.
변수의 값을 변경할 수 있습니다.

---

 

• let의 장단점

장점: 블록 스코프를 가지기 때문에, 변수의 유효 범위를 좁힐 수 있습니다. 이는 변수의 값이 의도치 않게 변경되는 것을 방지할 수 있습니다.
단점: 변수를 선언하기 전에 사용할 수 없기 때문에, 초기화 전에 변수를 사용하면 ReferenceError가 발생합니다.

• var의 장단점

장점: 함수 스코프를 가지기 때문에, 변수의 유효 범위를 좀 더 넓힐 수 있습니다. 이는 변수의 값이 여러 곳에서 공유될 때 유용합니다.
단점: 변수의 유효 범위가 넓기 때문에, 변수의 값이 의도치 않게 변경되는 경우가 있을 수 있습니다. 또한, 변수를 재선언할 수 있기 때문에 예상치 못한 결과를 초래할 수 있습니다.

---

728x90

소스코드 예시1

// 예시 1 - 변수 스코프의 차이
function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 동일한 변수 x를 사용함
    console.log(x);  // 2 출력
  }
  console.log(x);  // 2 출력
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 새로운 변수 x를 선언함
    console.log(x);  // 2 출력
  }
  console.log(x);  // 1 출력
}

varTest();
letTest();

 

코드를 실행하면 varTest() 함수는 블록 스코프를 무시하고 전역 변수를 수정하므로 x의 값이 2가 된 후 console.log(x)를 두 번 호출할 때 모두 2가 출력됩니다. 반면에 letTest() 함수는 블록 스코프를 따르므로 새로운 변수 x가 블록 안에서 선언되고 값을 할당한 후 블록 바깥에서 console.log(x)를 호출하면 이전 값인 1이 출력됩니다.

 

소스코드 예시2

// 예시 2 - 호이스팅의 차이
console.log(x);  // undefined 출력
var x = 1;

console.log(y);  // ReferenceError: y is not defined
let y = 2;

코드를 실행하면 console.log(x)에서 변수가 정의되지 않았으므로 undefined가 출력됩니다. 이는 var 선언 시 호이스팅이 발생하여 변수가 먼저 선언되고 undefined로 초기화되기 때문입니다. 
반면에 console.log(y)에서는 y가 아직 선언되지 않았으므로 ReferenceError가 발생합니다. 이는 let 선언 시 호이스팅이 발생하지 않기 때문입니다.
그러므로, 상황에 맞게 사용하면 됩니다.