var과 let 변수의 차이

GJ·2023년 5월 8일
0

프론트엔드지식

목록 보기
4/14

var과 let은 모두 변수를 선언할 때 사용되는 키워드이지만, 다음과 같은 차이점이 있다.

1. 변수 스코프(scope)

var은 함수 스코프(function scope)를 가지고 있으며, 전역 스코프(global scope)에서도 사용할 수 있다.
let은 블록 스코프(block scope)를 가지고 있어서, 해당 블록 내에서만 유효하다.

// var 사용 예시
function example() {
  var x = 1;
  if (true) {
    var x = 2;
    console.log(x); // 2
  }
  console.log(x); // 2
}

// let 사용 예시
function example() {
  let x = 1;
  if (true) {
    let x = 2;
    console.log(x); // 2
  }
  console.log(x); // 1
}

위 예시에서, var를 사용한 경우 if문 내에서 선언한 x 변수가 함수 스코프를 가지므로 함수 내의 모든 위치에서 x 변수가 2로 변경된다.
하지만 let을 사용한 경우 블록 스코프를 가지므로 if문 내에서 선언한 x 변수는 블록 내에서만 유효하며, 함수 스코프에서는 기존에 선언한 변수 x를 사용한다.

즉, var은 함수 스코프, let은 블록 스코프!

2. 변수 재선언(Variable redeclaration)

var는 같은 이름의 변수를 중복 선언해도 오류가 발생하지 않는다.
하지만 let은 같은 이름의 변수를 중복 선언하면 SyntaxError가 발생한다.

// var 사용 예시
var x = 1;
var x = 2;
console.log(x); // 2

// let 사용 예시
let y = 1;
let y = 2; // SyntaxError: Identifier 'y' has already been declared

즉, var은 같은 변수명을 재선언 가능하지만, let은 불가능!

3. 호이스팅(Hoisting)

var는 호이스팅(Hoisting)이 발생하여, 변수가 선언되기 전에도 undefined로 참조할 수 있다.
let도 호이스팅은 발생하지만 실제 할당하기 전에 참조하면 ReferenceError가 발생한다.

console.log(x); // undefined
var x = 1;

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 1;

즉, 모두 호이스팅은 되지만 할당전에 참조하려고 하면 var은 undefined로 참조, let은 아예 에러 발생!

4. 전역 객체(Global object)

var로 선언한 변수는 전역 객체(global object)의 프로퍼티로 등록되지만,
let으로 선언한 변수는 전역 객체의 프로퍼티로 등록되지 않는다.

var x = 1;
console.log(window.x); // 1

let y = 1;
console.log(window.y); // undefined
profile
Frontend Developer

0개의 댓글