let, const와 블록 스코프

우리는 7장 자바스크립트 심화 II에서 비동기 처리, 모듈 시스템, 디자인 패턴까지 실무에서 자주 마주치는 주제를 폭넓게 다뤘습니다.

이번 절은 실행 컨텍스트와 클로저에서 다룬 이름의 유효 범위와 초기화를 선언 키워드에 적용합니다. 먼저 이름을 찾는 스코프와 그 이름에 값을 대입하는 시점을 구별해 봅시다.

다음 단계는 최신 표준 문법을 정확히 쓰는 것입니다.

자바스크립트는 ECMAScript 표준을 따라 매년 진화하고, 같은 기능도 예전 방식보다 더 안전하고 읽기 쉬운 문법으로 바뀌어 왔습니다.

특히 ES2015(ES6)는 전환점이었습니다.

단순 문법 추가가 아니라, 개발자가 오류를 줄이고 코드를 명확하게 작성하도록 언어의 방향을 바꿔 놓았습니다.

이 장에서는 ES2015 이후 핵심 문법을 다룹니다.

첫 주제는 var에서 let/const로 넘어가는 이유와 블록 스코프(Block Scope)입니다.

이번 장에서는 var의 한계를 짚고, let/const 특징과 스코프 개념을 중심으로 정리합니다.

var 키워드의 문제점 (복습 및 심화)

var는 함수 스코프를 따르며, 몇 가지 독특한 동작 때문에 개발자에게 혼란을 주거나 의도치 않은 버그를 발생시키기 쉬웠습니다.

if (true) {
    var x = 10;
    console.log(x); // 결과: 10
}
console.log(x); // 결과: 10 (if 블록 밖에서도 접근 가능)

function introduce() {
    var name = "김철수";
    console.log(name); // 결과: 김철수
}
introduce();
// console.log(name); // ReferenceError: name is not defined (함수 스코프)

console.log(myVar); // 결과: undefined
var myVar = "hello";
console.log(myVar); // 결과: hello
// 실제로는 다음과 같이 동작합니다.
// var myVar;
// console.log(myVar);
// myVar = "hello";
// console.log(myVar);

var myName = "Alice";
console.log(myName); // 결과: Alice

var myName = "Bob"; // 동일한 이름으로 재선언해도 에러 없음
console.log(myName); // 결과: Bob

이러한 var의 문제점들은 자바스크립트 개발을 어렵게 만드는 주요 원인이었습니다.

let 키워드: 새로운 변수 선언의 시작

let 키워드는 var의 문제점을 해결하기 위해 도입된 변수 선언 방식입니다.

function compareVar() {
  if (true) {
    var count = 10;
  }
  console.log(count);
}

compareVar();

function compareLet() {
  if (true) {
    let count = 10;
  }
  console.log(count);
}

compareLet();

블록 스코프 (Block Scope)

let으로 선언된 변수는 선언된 블록({}) 안에서만 유효합니다.

블록은 함수, if 문, for 문, while 문 등의 중괄호로 둘러싸인 영역을 의미합니다.

let y = 100; // 전역 스코프 또는 상위 블록 스코프

if (true) {
    let z = 20; // if 블록 내부에서만 유효
    console.log(z); // 결과: 20
    console.log(y); // 결과: 100 (상위 스코프 변수는 접근 가능)
}
// console.log(z); // ReferenceError: z is not defined (블록 밖에서 접근 불가)

for (let i = 0; i < 3; i++) {
    console.log(i); // 결과: 0, 1, 2
}
// console.log(i); // ReferenceError: i is not defined (for 블록 밖에서 접근 불가)

블록 스코프는 코드를 더 예측 가능하게 만들고, 변수 이름 충돌의 위험을 줄여줍니다.

변수 재선언 불가능

let은 동일한 스코프 내에서 같은 이름의 변수를 재선언하는 것을 허용하지 않습니다.

let fruit = "사과";
// let fruit = "바나나"; // SyntaxError: 'fruit' has already been declared

이는 개발자의 실수를 방지하고 코드의 견고성을 높여줍니다.

변수 호이스팅과 TDZ

let 변수도 호이스팅되지만, var와 다르게 초기화되기 전까지는 접근할 수 없습니다.

이 영역을 TDZ (Temporal Dead Zone, 시간상 사각지대)라고 부릅니다.

TDZ에 있는 변수에 접근하려고 하면 ReferenceError가 발생합니다.

console.log(myLetVar); // ReferenceError: Cannot access 'myLetVar' before initialization
let myLetVar = "hello";
console.log(myLetVar); // 앞의 TDZ 접근을 제거했을 때 hello; 원문 그대로는 앞의 예외로 도달하지 못함

TDZ는 개발자가 변수를 선언하기 전에 사용하는 실수를 방지하여 코드의 안정성을 높입니다.

const 키워드: 상수 선언

const 키워드는 let과 마찬가지로 블록 스코프를 따르며, 변수 호이스팅과 TDZ의 특성도 공유합니다.

하지만 가장 중요한 차이점은 상수(constant)를 선언할 때 사용된다는 것입니다.

즉, 초기화한 바인딩에 다른 값을 다시 대입할 수 없습니다. 그 값이 객체라면 객체 내부를 바꾸는 연산은 별개입니다.

재할당 불가능

const로 선언된 변수는 선언과 동시에 값을 할당해야 하며, 이후에는 재할당이 불가능합니다.

const PI = 3.14159;
console.log(PI); // 결과: 3.14159

// PI = 3.14; // TypeError: Assignment to constant variable. (재할당 불가능)

// const TAX_RATE; // SyntaxError: Missing initializer in const declaration (선언과 동시에 할당 필수)

객체/배열과 const

const가 재할당을 금지한다는 것은 같은 이름을 다른 값에 다시 연결할 수 없다는 의미입니다. 실제 메모리 주소를 확인하는 규칙으로 이해할 필요는 없습니다.

객체나 배열과 같은 참조 타입의 경우, const로 선언해도 객체/배열 내부의 프로퍼티나 요소는 변경할 수 있습니다.

const user = {
    name: "Jane",
    age: 25
};

user.age = 26; // 객체 내부의 프로퍼티 변경은 가능
console.log(user.age); // 결과: 26

// user = { name: "Mike", age: 30 }; // 하지만 객체 자체를 재할당하는 것은 불가능
// TypeError: Assignment to constant variable.

const colors = ["red", "green"];
colors.push("blue"); // 배열에 요소 추가는 가능
console.log(colors); // 결과: ["red", "green", "blue"]

// colors = ["yellow"]; // 배열 자체를 재할당하는 것은 불가능
// TypeError: Assignment to constant variable.

깊은 복사는 원본과 참조를 분리할 뿐 복사본의 변경을 막지는 않습니다. Object.freeze()도 기본적으로 해당 객체의 자체 속성만 동결하므로, 중첩 객체까지 동결하려면 별도의 처리가 필요합니다.

var vs let vs const

현대 자바스크립트 개발에서는 다음과 같은 규칙을 따르는 것이 일반적입니다.

• 기본적으로 const를 사용합니다.
  • 변수의 값이 변경될 일이 없는 상수나, 참조할 객체/배열이 재할당될 일이 없는 경우에 사용합니다.
  • 이는 코드의 의도를 명확히 하고, 잠재적인 버그를 줄이는 데 큰 도움이 됩니다.
• 재할당이 필요한 경우에만 let을 사용합니다.
  • 반복문 내의 카운터 변수, 조건에 따라 값이 변경될 수 있는 변수 등에 사용합니다.
• var는 더 이상 사용하지 않는 것을 권장합니다.
  • 레거시 코드(오래된 코드)를 유지보수하는 경우가 아니라면 var를 새로운 코드에서 사용하는 것은 피하는 것이 좋습니다.

// 전역 설정값, 절대 변하지 않는 값
const API_URL = "http://localhost:4000";
const MAX_ITEMS_PER_PAGE = 20;

// 한 번 할당되면 변하지 않는 참조형 값 (내부 변경은 가능)
const config = {
    theme: "dark",
    version: "1.0.0"
};
config.theme = "light"; // 가능

let counter = 0; // 값이 증가해야 하므로 let
for (let i = 0; i < 5; i++) { // 반복문 카운터는 let
    counter += i;
}

if (someCondition) {
    let result = "Success"; // if 블록 내에서만 필요한 변수는 let
    console.log(result);
}
// console.log(result); // 에러

위 API_URL은 별도로 실행한 로컬 Mock 서버를 가정합니다. someCondition도 앞서 정의된 조건값이 있어야 하는 예시용 이름입니다.

예시 같은 이름이 바깥에 있어도 현재 블록의 선언이 그 이름을 가립니다. 아래 코드는 각각 새 파일이나 독립 실행 범위에서 실행하세요. catch는 예상한 오류 뒤에도 다음 줄을 확인하기 위한 것입니다.

const limit = 10;
{
    try {
        console.log(limit);
    } catch (error) {
        console.log(error.name);
    }
    let limit = 3;
    console.log(limit);
}
console.log(limit);

출력은 ReferenceError, 3, 10 순서입니다. 블록에 진입할 때 내부 limit 바인딩은 있지만 아직 초기화되지 않았습니다. 따라서 바깥의 10으로 넘어가 읽지 않습니다. let limit = 3을 지난 뒤에는 내부 값을 읽고, 블록을 나오면 바깥 이름을 다시 읽습니다. 호이스팅은 소스 줄을 실제로 이동시키는 작업이 아니라 이러한 이름 생성·초기화 규칙을 설명하는 표현입니다.

스스로 확인하기 let limit = 3;을 try 앞에 옮기고 나머지는 그대로 두면 세 번의 출력은 무엇인가요? 오류가 사라진 이유를 스코프 변경과 초기화 시점 변경 중에서 골라 설명해 보세요.

기본값 없는 일반 let 선언은 선언 평가 때 undefined로 초기화됩니다. 반면 일반 const 선언에는 초기값이 필요합니다. for (const value of values)처럼 반복문이 매번 값을 제공하는 문법은 별도로 해석합니다.

선언과 초기화의 범위는 MDN const 설명에서 다시 확인할 수 있습니다.

ES6 선언 키워드 정리

핵심은 var 습관을 줄이고 블록 스코프 기반으로 상태 수명을 의도적으로 제어하는 것입니다.

이번 장에서는 자바스크립트에서 변수를 선언하는 새로운 표준인 let과 const 키워드, 그리고 그와 함께 도입된 블록 스코프(Block Scope) 개념에 대해 심도 있게 학습했습니다.

var는 함수 스코프, 호이스팅, 재선언 허용 때문에 예측하기 어려운 상황을 만들 수 있습니다.

let과 const는 블록 스코프와 TDZ를 통해 선언 위치와 사용 범위를 더 분명하게 드러냅니다.

현대 자바스크립트에서는 const를 기본으로 두고, 재할당이 필요한 경우에만 let을 사용합니다.

객체와 배열을 const로 선언해도 내부 값은 바뀔 수 있으므로, 재할당과 내부 변경을 구분해야 합니다.

마지막으로 선언 키워드를 실제 코드 리뷰에서 볼 때는 값의 변경 여부, 블록 밖 노출 여부, 초기화 시점을 함께 확인합니다.