변수(Variable)

1. 변수의 개념

변수는 값을 저장하기 위해 확보한 메모리 공간을 식별하기 위한 이름입니다. 쉽게 말해 데이터를 담는 상자에 이름을 붙인 것과 같습니다.

프로그래밍 언어에서 변수는 데이터를 관리하기 위한 핵심 개념으로, 다음과 같은 특징을 가집니다:

• 값을 저장하고 참조할 수 있는 메커니즘을 제공합니다
• 한번 선언된 변수는 프로그램 내에서 여러 번 사용할 수 있습니다
• 변수에 저장된 값은 재할당을 통해 변경할 수 있습니다(상수 제외)

2. 자바스크립트의 메모리 관리

자바스크립트는 개발자가 직접 메모리를 제어할 필요가 없도록 설계되었습니다. 변수를 선언하면 자바스크립트 엔진이 자동으로 메모리 공간을 확보하고 관리합니다.

변수를 사용할 때는 내부적으로 해당 변수명이 메모리 주소로 치환되어 실행됩니다. 이러한 추상화 덕분에 개발자는 복잡한 메모리 관리 대신 비즈니스 로직에 집중할 수 있습니다.

2.1 가비지 컬렉션

자바스크립트는 가비지 컬렉션을 통해 더 이상 참조되지 않는 메모리를 자동으로 해제합니다. 개발자가 명시적으로 메모리를 해제할 필요가 없어 메모리 누수를 방지할 수 있습니다.

let obj = { name: '임시 객체' };
obj = null; // 이전 객체는 가비지 컬렉션의 대상이 됩니다

3. 식별자(Identifier)

변수명은 식별자라고도 불리며, 다음과 같은 명명 규칙을 따릅니다:

• 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있습니다
• 첫 글자는 숫자가 될 수 없습니다
• 대소문자를 구분합니다
• 예약어는 사용할 수 없습니다(var, let, const, function 등)

3.1 네이밍 컨벤션

가독성과 유지보수성을 높이기 위해 다음과 같은 네이밍 컨벤션을 사용합니다:

// 카멜 케이스(camelCase): 일반 변수, 함수명에 사용
let firstName = '길동';
let lastName = '홍';
 
// 파스칼 케이스(PascalCase): 클래스, 생성자 함수에 사용
class Person {}
function User() {}
 
// 스네이크 케이스(snake_case): 상수에 사용하기도 함
const MAX_SIZE = 100;
const API_KEY = 'abc123';

4. 변수 선언과 할당

4.1 변수 선언 키워드

ES6 이후 자바스크립트에서는 세 가지 방법으로 변수를 선언할 수 있습니다:

• var: 함수 스코프 변수 (ES5까지의 전통적인 방식)
• let: 블록 스코프 변수 (ES6에서 도입)
• const: 블록 스코프 상수 (재할당 불가)

var, let, const 비교

4.2 변수 선언과 초기화

// 변수 선언과 동시에 초기화
var number = 10;
 
// 변수 선언만 한 경우
var number;

변수를 선언하고 값을 할당하지 않았을 경우, 메모리 공간은 확보되지만 undefined 값이 자동으로 할당됩니다.

4.3 다양한 데이터 저장 방식

변수는 기본적으로 하나의 값을 저장하는 메커니즘으로 동작합니다:

// 단일 값 저장
var name = "홍길동";
var age = 25;

배열이나 객체를 사용하면 여러 개의 값을 그룹화하여 하나의 변수에 저장할 수 있습니다:

// 배열을 사용한 다중 값 저장
var numbers = [10, 20, 30];
 
// 객체를 사용한 다중 값 저장
var person = {
    id: 1,
    name: "홍길동",
    age: 25
};

5. 변수 스코프(Scope)

스코프는 변수가 유효한 범위를 의미합니다. 자바스크립트에서는 크게 전역 스코프와 지역 스코프로 나뉩니다.

5.1 전역 스코프(Global Scope)

전역 스코프에 선언된 변수는 어디서든 접근 가능합니다.

var globalVar = "전역 변수";
 
function testScope() {
    console.log(globalVar); // "전역 변수" 출력
}

5.2 지역 스코프(Local Scope)

지역 스코프는 함수 스코프와 블록 스코프로 나뉩니다.

// 함수 스코프
function testFunctionScope() {
    var functionScopeVar = "함수 스코프 변수";
    console.log(functionScopeVar); // "함수 스코프 변수" 출력
}
// console.log(functionScopeVar); // 오류: functionScopeVar is not defined
 
// 블록 스코프 (let, const)
if (true) {
    let blockScopeVar = "블록 스코프 변수";
    const blockConst = "블록 상수";
    console.log(blockScopeVar); // "블록 스코프 변수" 출력
}
// console.log(blockScopeVar); // 오류: blockScopeVar is not defined

6. 호이스팅(Hoisting)

호이스팅은 변수 선언이 코드 실행 전에 메모리에 먼저 저장되는 현상입니다.

6.1 var 호이스팅

console.log(hoistedVar); // undefined (오류가 발생하지 않음)
var hoistedVar = "호이스팅된 변수";

위 코드는 내부적으로 다음과 같이 해석됩니다:

var hoistedVar; // 선언이 최상단으로 끌어올려짐
console.log(hoistedVar); // undefined
hoistedVar = "호이스팅된 변수"; // 할당은 원래 위치에서 실행

6.2 let, const 호이스팅과 TDZ(Temporal Dead Zone)

let과 const도 호이스팅되지만, 선언부터 초기화까지의 구간이 TDZ(일시적 사각지대)로 관리됩니다.

// console.log(letVar); // ReferenceError: Cannot access 'letVar' before initialization
let letVar = "let 변수";

7. 변수 사용 시 주의사항

7.1 암묵적 타입 변환

자바스크립트는 동적 타입 언어로, 변수에 다른 타입의 값을 할당할 수 있습니다.

let value = 10;      // 숫자
value = "문자열";    // 문자열로 타입 변경
value = true;        // 불리언으로 타입 변경

7.2 변수 선언 시 권장사항

• 의미있는 이름 사용하기
• 변수는 최소한으로 사용하기
• 상수는 const로 선언하기
• 가능한 var 대신 let과 const 사용하기
• 전역 변수 사용 최소화하기

// 나쁜 예
var a = 10;
var b = 20;
 
// 좋은 예
const MAX_USERS = 10;
let currentUserCount = 20;