변수 — let·const

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

• let, const, var의 차이를 설명하고, 왜 현대 자바스크립트에서 let과 const를 사용해야 하는지 이해할 수 있습니다.
• 변수의 선언, 초기화, 할당, 재할당의 개념을 구분하고 올바르게 사용할 수 있습니다.
• 블록 스코프와 함수 스코프의 차이를 이해하고, 스코프가 왜 중요한지 설명할 수 있습니다.
• 자바스크립트 변수 명명 규칙과 관례를 따라 의미 있는 변수명을 지을 수 있습니다.

💡 변수란 무엇인가

이 섹션에서는 변수의 본질과 프로그래밍에서 왜 변수가 필요한지 살펴보겠습니다.

변수(Variable)는 데이터를 저장하는 이름이 붙은 공간입니다. 마치 물건을 담아두는 상자에 이름표를 붙여놓은 것과 같습니다. "사과"라고 적힌 상자를 열면 항상 사과가 나오는 것처럼, 변수에 이름을 붙여두면 나중에 그 이름으로 저장된 값을 꺼내 쓸 수 있습니다.

변수가 없다면 어떻게 될까요? 예를 들어 사용자의 이름을 화면에 여러 번 출력해야 한다고 가정해 봅시다. 변수 없이는 "홍길동"이라는 문자열을 매번 직접 써야 합니다. 나중에 이름을 바꾸려면 그 문자열이 등장하는 모든 곳을 찾아 수정해야 합니다. 반면 변수에 저장해두면 한 곳만 바꾸어도 모든 곳에 반영됩니다.

// 변수 없이 반복 사용
console.log("안녕하세요, 홍길동님!");
console.log("홍길동님의 주문이 완료되었습니다.");
console.log("홍길동님께 이메일을 발송했습니다.");

// 변수에 저장 후 사용
let userName = "홍길동";
console.log("안녕하세요, " + userName + "님!");
console.log(userName + "님의 주문이 완료되었습니다.");
console.log(userName + "님께 이메일을 발송했습니다.");
// userName 값만 바꾸면 세 줄이 모두 바뀜

위 예제처럼 변수는 코드의 재사용성과 유지보수성을 크게 높여줍니다. 실제 개발에서 변수는 사용자 이름, 상품 가격, 계산 결과, 버튼 클릭 횟수 등 프로그램이 다루는 거의 모든 데이터를 담는 기본 단위입니다.

컴퓨터 내부적으로 변수는 메모리(RAM)의 특정 주소에 데이터를 저장하고, 그 주소에 사람이 읽기 편한 이름을 붙인 것입니다. 자바스크립트 엔진이 메모리 관리를 자동으로 해주기 때문에 개발자는 복잡한 주소 대신 이름만 기억하면 됩니다.

🔑 let · const · var — 세 가지 키워드

이 섹션에서는 자바스크립트의 세 가지 변수 선언 키워드를 비교하고 각각 언제 사용해야 하는지 살펴보겠습니다.

자바스크립트에서 변수를 만들 때는 키워드를 사용합니다. 역사적으로 세 가지 키워드가 존재합니다. var는 자바스크립트 탄생 초기부터 있던 오래된 방식이고, let과 const는 2015년 ES6에서 추가된 현대적인 방식입니다.

// let — 재할당 가능한 변수
let age = 25;
age = 26;  // ✅ 재할당 가능
console.log(age);  // 26

// const — 재할당 불가능한 상수
const PI = 3.14159;
// PI = 3;  // ❌ TypeError: Assignment to constant variable.

// var — 오래된 방식 (사용 자제)
var score = 100;
score = 90;  // 재할당 가능하지만...
console.log(score);

let은 값이 변할 수 있는 변수를 선언할 때 사용합니다. 사용자의 나이, 점수, 카운트처럼 프로그램 실행 중에 값이 바뀌는 데이터에 적합합니다. const는 한 번 할당하면 값을 바꿀 수 없는 상수(Constant)를 선언합니다. 수학적 상수(π), 설정값, 절대 변하지 않는 데이터에 사용합니다. 값을 바꾸려 하면 즉시 오류가 발생하여 의도치 않은 변경을 막아줍니다.

그렇다면 var는 왜 사용을 자제해야 할까요? var에는 현대적인 관점에서 문제가 있는 특성들이 있습니다.

// 문제 1: var는 같은 이름으로 중복 선언이 가능
var name = "홍길동";
var name = "김철수";  // ✅ 오류 없이 덮어씌워짐
console.log(name);  // 김철수

// let과 const는 중복 선언 시 오류
let name2 = "홍길동";
// let name2 = "김철수";  // ❌ SyntaxError: 이미 선언된 변수

// 문제 2: var는 함수 스코프만 가짐
if (true) {
  var x = 10;  // if 블록 안에서 선언했지만...
}
console.log(x);  // 10 — 블록 밖에서도 접근됨!

if (true) {
  let y = 20;  // 블록 스코프
}
// console.log(y);  // ❌ ReferenceError: y is not defined

var의 가장 큰 문제는 같은 이름의 변수를 실수로 다시 선언해도 오류가 나지 않아 값이 조용히 덮어씌워진다는 점입니다. 대형 프로젝트에서 이런 실수는 찾기 매우 어려운 버그로 이어집니다. let과 const는 중복 선언 시 즉시 오류를 내어 실수를 빠르게 잡아줍니다. 앞으로 이 강좌에서는 let과 const만 사용합니다.

📐 스코프 — 변수의 유효 범위

이 섹션에서는 변수가 접근 가능한 범위인 스코프의 개념과 let·const의 블록 스코프를 살펴보겠습니다.

스코프(Scope)는 변수가 "살아있는" 유효 범위입니다. 스코프 밖에서는 그 변수에 접근할 수 없습니다. 스코프를 이해하면 "왜 이 변수에 접근이 안 되지?"라는 혼란을 피할 수 있습니다.

let과 const는 블록 스코프(Block Scope)를 가집니다. 블록이란 중괄호 {}로 감싸진 영역입니다. if문, for문, 함수 등이 모두 블록을 만듭니다.

// 전역 스코프 — 파일 최상위에 선언된 변수
let globalVar = "전역 변수";

if (true) {
  // 블록 스코프 — 이 {} 안에서만 살아있음
  let blockVar = "블록 변수";
  const blockConst = "블록 상수";

  console.log(globalVar);  // ✅ 전역 변수 접근 가능
  console.log(blockVar);   // ✅ 블록 변수 접근 가능
}

console.log(globalVar);  // ✅ 전역 변수는 어디서든 접근 가능
// console.log(blockVar);    // ❌ ReferenceError — 블록 밖에서 접근 불가
// console.log(blockConst);  // ❌ ReferenceError

블록 스코프는 처음에는 제한처럼 느껴지지만, 실제로는 코드의 안전성을 높여주는 중요한 기능입니다. 변수의 영향 범위를 좁게 제한하면, 의도치 않게 다른 곳에서 값이 바뀌는 사고를 예방할 수 있습니다. 프로그램이 커질수록 이 원칙이 매우 중요해집니다.

참고로, 어떤 블록 안에도 속하지 않는 최상위 영역에서 선언된 변수는 전역 스코프(Global Scope)에 속하며, 코드 어디서든 접근할 수 있습니다. 전역 변수는 편리하지만 남용하면 어디서 값이 변경되는지 추적하기 어려워지므로, 꼭 필요한 경우에만 사용하는 것이 좋습니다.

✍️ 선언, 초기화, 할당, 재할당

이 섹션에서는 변수와 관련된 네 가지 핵심 개념을 명확하게 구분해 살펴보겠습니다.

변수를 다루는 과정에서 네 가지 용어가 등장합니다. 각각의 의미를 정확히 이해하면 코드를 읽고 쓰는 데 훨씬 수월해집니다.

// 1. 선언(Declaration) — 변수 공간을 만듦
let score;

// 2. 초기화(Initialization) — 처음으로 값을 부여
score = 100;

// 선언과 초기화를 한 줄에
let level = 1;

// 3. 재할당(Reassignment) — 이미 있는 변수에 새 값
level = 2;
console.log(level);  // 2

// const는 재할당 불가
const MAX_SCORE = 1000;
// MAX_SCORE = 2000;  // ❌ TypeError

// 4. 선언만 하고 값을 주지 않으면 undefined
let empty;
console.log(empty);  // undefined

선언(Declaration)은 변수 이름만 등록하고 아직 값은 주지 않은 단계입니다. 초기화(Initialization)는 변수에 처음으로 값을 대입하는 것입니다. 보통 선언과 초기화를 let score = 100;처럼 한 줄에 합쳐서 씁니다. 재할당(Reassignment)은 이미 값이 있는 변수에 새로운 값을 넣는 것으로, const로 선언된 변수는 재할당이 불가능합니다. 선언만 하고 초기화하지 않은 변수의 값은 undefined입니다. undefined는 "아직 값이 없음"을 나타내는 자바스크립트의 특별한 값으로, 4강 자료형에서 자세히 다룹니다.

const로 배열이나 객체를 선언할 때는 한 가지 중요한 특성이 있습니다. 변수 자체는 재할당이 불가능하지만, 배열이나 객체의 내용물은 변경할 수 있습니다. 이 내용은 11강 배열과 14강 객체에서 자세히 다루겠습니다.

📛 변수 명명 규칙과 관례

이 섹션에서는 자바스크립트의 변수 이름 규칙과 좋은 변수명을 짓는 관례를 살펴보겠습니다.

자바스크립트 변수 이름에는 반드시 지켜야 하는 문법 규칙과, 강제는 아니지만 모든 개발자가 따르는 관례가 있습니다. 문법 규칙을 어기면 오류가 발생하고, 관례를 어기면 팀에서 협업하기 어려워집니다.

// ✅ 올바른 변수명
let userName = "홍길동";       // 카멜케이스(camelCase)
let totalPrice = 15000;
let isLoggedIn = true;         // boolean 변수는 is/has로 시작
let MAX_SIZE = 100;            // 상수는 대문자 + 언더스코어
let _privateData = "내부용";   // 언더스코어 시작 가능
let $element = document.body;  // 달러 시작 가능 (jQuery 관례)

// ❌ 오류가 나는 변수명
// let 1stUser = "홍길동";  // 숫자로 시작 불가
// let my-name = "홍길동";  // 하이픈(-) 사용 불가
// let let = "예약어";      // 키워드(예약어) 사용 불가

// ❌ 오류는 아니지만 나쁜 변수명
let a = "홍길동";              // 의미 없는 단일 문자
let data = 15000;              // 너무 모호함
let priceOfProductInCart = 0;  // 너무 길고 장황함

자바스크립트에서 강제되는 문법 규칙은 다음과 같습니다. 변수명은 문자, 숫자, 밑줄(_), 달러 기호($)만 사용할 수 있습니다. 반드시 문자, 밑줄, 달러 기호 중 하나로 시작해야 합니다(숫자로 시작 불가). 공백과 하이픈은 사용할 수 없습니다. let, const, if, function처럼 자바스크립트가 이미 사용하는 예약어(Reserved Word)는 변수명으로 쓸 수 없습니다.

관례로는 카멜케이스(camelCase)를 사용합니다. 첫 단어는 소문자로 시작하고, 이후 단어의 첫 글자는 대문자로 씁니다. userName, totalPrice, isLoggedIn처럼 말입니다. 절대 변하지 않는 상수는 모두 대문자에 밑줄로 단어를 구분하는 스네이크케이스(SNAKE_CASE)를 사용합니다. MAX_SIZE, API_URL처럼 씁니다.

좋은 변수명은 코드 자체를 설명합니다. 변수명만 봐도 어떤 데이터가 들어있는지 알 수 있어야 합니다. a나 data보다 userName이나 productPrice가 훨씬 좋은 이름입니다. 변수명을 짓는 데 시간을 조금 더 투자하면, 나중에 코드를 읽고 유지보수하는 데 들이는 시간을 크게 절약할 수 있습니다.

📝 핵심 요약

3강에서 배운 내용을 정리해 보겠습니다.

항목	내용
변수의 정의	데이터를 저장하는 이름이 붙은 메모리 공간
let	재할당 가능한 변수 선언 (블록 스코프)
const	재할당 불가능한 상수 선언 (블록 스코프)
var	구식 방식 — 중복 선언 허용, 함수 스코프, 사용 자제
블록 스코프	{} 안에서 선언된 변수는 블록 밖에서 접근 불가
선언 vs 초기화 vs 재할당	선언=공간 생성, 초기화=첫 값 대입, 재할당=새 값으로 교체
undefined	선언만 하고 초기화하지 않은 변수의 기본값
명명 관례	일반 변수: camelCase / 상수: UPPER_SNAKE_CASE
사용 원칙	기본은 const, 재할당이 필요할 때만 let

다음 강인 4강 — 자료형에서는 자바스크립트 변수에 담을 수 있는 다양한 데이터의 종류를 배웁니다. 숫자, 문자열, 불리언(true/false), null, undefined, 그리고 객체까지 — 각 자료형의 특성과 자바스크립트만의 독특한 동적 타입 시스템을 깊이 있게 다루겠습니다!