let과 const 스코프

var 문제 확인

var는 함수 전체로 끌어올려지고 같은 스코프에서 재선언이 허용되어 의도하지 않은 덮어쓰기를 숨깁니다.

함수 스코프

블록 경계 세우기

let과 const는 if, for, block 안에서만 유효하므로 임시 변수와 반복 변수의 생존 범위가 코드 구조와 일치합니다.

블록 스코프

TDZ로 조기 접근 차단

선언 전 접근은 초기화 전 사용으로 보아 오류가 나며, 호이스팅은 존재하지만 안전하게 관찰됩니다.

Temporal Dead Zone

const 의미 고정

재할당 금지는 API 경계와 참조 안정성을 드러내고, 객체 불변이 필요하면 Object.freeze나 불변 업데이트를 따로 적용합니다.

바인딩 불변

var vs let

함수 단위 공유와 블록 단위 격리의 차이 이벤트 콜백, 루프 인덱스, 조건부 임시값에서 가장 쉽게 드러납니다.

범위

const vs freeze

이름 재연결 금지와 값 내부 변경 금지는 별개 const 배열에는 push가 반영되지만 다른 배열 대입은 참조 교체라서 막힙니다.

불변성

for 루프

let은 반복마다 새 바인딩을 만들어 클로저가 각 인덱스를 보존 setTimeout 안에서 i가 모두 마지막 값이 되는 var 문제를 줄입니다.

클로저

기본값 · 블록 밖 참조 · 객체 변경 점검

기본값 새 변수는 const로 시작하고 실제 재할당이 확인될 때만 let으로 낮춥니다.

블록 밖 참조 임시 계산값을 바깥에서 쓰고 있다면 변수 위치가 아니라 책임 경계를 다시 봅니다.

객체 변경 const 객체 변경을 금지하고 싶다면 타입, freeze, 불변 업데이트 규칙을 함께 둡니다.

반복문에서 드러나는 차이

for (let i = 0; i < buttons.length; i += 1) {
  buttons[i].addEventListener('click', () => selectTab(i));
        overflow-wrap: break-word;
        word-break: keep-all;
      }
// var였다면 모든 콜백이 같은 i 바인딩을 공유할 수 있다.