로고로고
💣검색 아이콘
ReactDevTroubleShootingRNNextCSSWeekly

[Week5] var,let,const 비교

2024년 11월 16일

비교 정리

 

항목varletconst
중복 선언O (허용)X (오류)X (오류)
스코프함수 스코프블록 스코프블록 스코프
호이스팅O (초기화는 안 됨, undefined로 올라감)O (초기화 안 됨, TDZ 존재)O (초기화 안 됨, TDZ 존재)
재할당OOX (불가능)
선언과 동시에 초기화선택선택필수 (초기화 안 하면 오류)
전역 객체(window)에 등록O (var로 선언한 전역 변수는 window 객체에 등록됨)XX

 

중복 선언 허용

 

varlet.const
중복 선언 허용OX(오류)
  • 한 스코프에서 같은 변수를 let ,const 로 두 번 선언하면 에러 발생
let user;
const user2;

let user; // SyntaxError: 'user' has already been declared
const user2; // SyntaxError: 'user2' has already been declared

 

  • var 는 변수의 중복 선언을 허용
  • 같은 변수를 여러 번 중복 선언 가능
  • 중복 선언은 되나 “선언" 자체는 안됨 → 값만 바뀜
var user = 1;
var user = 2; // var 자체는 선언 역할을 하지 않고 값만 바뀜 (user = 2; 와 동일)
// 에러 또한 발생하지 않음


console.log(user); // 2

 

스코프

 

varlet, const
스코프함수 스코프블록 스코프
  • 함수 스코프(Function Scope)
    • var로 선언한 변수는 가장 가까운 함수를 기준으로 스코프가 결정
    • 블록{} 내부에서 선언해도 바깥에서 접근 가능
function test() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10
}
// x는 if 블록 안에서 선언됐지만, 바깥에서 접근 가능
  • 블록 스코프(Block Scope)
    • let과 const로 선언한 변수는 가장 가까운 블록{} 단위로 스코프가 결정
    • 블록 바깥에서는 접근 불가
function test() {
  if (true) {
    let y = 20;
    const z = 30;
  }
  console.log(y); // ReferenceError
  console.log(z); // ReferenceError
}

 

호이스팅

 

  • 호이스팅 = 변수 선언이 스코프 최상단으로 끌어올려지는 동작
  • var → 선언만 호이스팅, 초기화는 호이스팅 X
console.log(user); // undefined (에러 아님)
var user = 'John';

// 실제 동작은 아래처럼
var user; // 선언만 먼저 올라감
console.log(user); // undefined
user = 'John';
  • let,const → 선언도 호이스팅되지만, TDZ(Temporal Dead Zone)에 갇혀 있음
console.log(user); // ❌ ReferenceError
let user = 'Jane';

//let,const는 호이스팅 되지만, 선언 이전에 접근하면 에러 발생
// 해당 구간을 TDZ(임시 사각지대)라고 부름