모던 자바스크립트 Deep Dive 책의 4장을 읽고 정리한 글이다.

변수(Variable)

🎯 1. 변수란 무엇이고, 왜 필요한가

• 애플리케이션은 데이터를 입력받아 처리하고 그 결과를 출력하는 과정을 거침.
• 이때, 프로그래밍 언어에서 데이터를 효율적으로 관리하기 위해 변수를 사용함.

🔍 변수가 없는 경우

10 + 20

• 10과 20은 메모리 상의 임의의 주소에 저장된 뒤, CPU가 이 값을 읽어와 연산을 수행함.
• 연산 결과인 30도 메모리의 임의 주소에 저장됨.
• 만약 이 값을 재사용하려면 메모리 주소를 직접 알아야 하지만, 자바스크립트는 개발자에게 이러한 직접 메모리 제어를 허용하지 않음.

💡 따라서, 변수를 통해 명명된 식별자로 값을 읽고 쓸 수 있는 메커니즘을 제공하며, 직접 주소를 다루는 위험을 방지함.

📦 2. 식별자 (Identifier)

• 식별자란 어떤 값을 구별(식별)할 수 있는 고유한 이름임. 변수, 함수, 클래스 등의 이름을 모두 식별자라고 부름.
• 식별자는 실제 값이 저장된 메모리 주소를 기억함. 결과적으로 식별자가 값을 찾을 수 있도록 매핑 관계를 형성함.
• 식별자는 선언을 통해 자바스크립트 엔진에 그 존재를 알림. 선언하지 않은 식별자에 접근하려고 하면 ReferenceError가 발생.

⚙️ 식별자 네이밍 규칙

1. 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($) 사용 가능
2. 숫자로 시작할 수 없음
3. 예약어(예: let, class, return 등)는 식별자로 사용할 수 없음
4. 네이밍 컨벤션:
   • 일반 변수/함수: 카멜 케이스(camelCase)
   • 생성자 함수/클래스: 파스칼 케이스(PascalCase)

// 카멜 케이스 (camelCase)
var firstName;

// 스네이크 케이스 (snake_case)
var first_name;

// 파스칼 케이스 (PascalCase)
var FirstName;

// 헝가리언 케이스 (typeHungarianCase)
var strFirstName; // type + identifier
var $elem = document.getElementById('myId'); // DOM 노드
var observable$ = fromEvent(document, 'click'); // RXJS 옵저버블

🔨 3. 변수 선언(Variable declaration)과 값의 할당(Assignment)

3.1 변수 선언

변수 선언이란 값을 저장하기 위한 메모리 공간을 확보하고, 그 공간을 특정 이름(식별자)에 연결해 사용할 수 있게 준비하는 과정

자바스크립트에서 변수 선언 시 사용할 수 있는 키워드는 var, let, const

📌 자바스크립트 엔진의 처리 순서

1. 선언 단계: 변수 이름을 등록해 엔진에 “이 변수가 있다”라고 알림.
2. 초기화 단계: 메모리 공간을 확보하고, 암묵적으로 undefined를 할당해 초기화함.

이때, 변수의 이름과 값은 실행 컨텍스트라는 곳에 등록되어 관리됨.

실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 구성하고, 그 결과를 실제로 관리하는 영역임.

🔸 var 키워드

• var로 선언된 변수는 선언 단계와 초기화 단계가 동시에 진행됨.
• 초기화 과정에서 암묵적으로 undefined가 할당되어 가비지(쓰레기) 값을 방지함.

3.2 변수 호이스팅(Hoisting)

console.log(score); // undefined

var score; // 변수 선언문

• 위 코드를 보면 선언문 이전에 변수를 참조해도 에러가 발생하지 않고 undefined가 출력됨.
• 이는 자바스크립트 엔진이 런타임(실제 코드가 한 줄씩 실행되는 시점) 전에, 먼저 소스코드의 평가 과정을 거치며 모든 선언문을 먼저 실행하기 때문임.
• 이렇게 선언이 코드의 최상단으로 끌어올려진 것처럼 보이는 현상을 변수 호이스팅이라 부름.

3.3 값의 할당(Assignment)

console.log(score); // undefined
var score = 80; // 변수 선언과 값의 할당
console.log(score); // 80

• 변수 선언은 런타임 이전에 이루어져 undefined로 초기화가 끝난 상태임.
• 런타임에 80이 할당되며 변수의 값이 undefined에서 80으로 변경됨.
• 이미 값이 있는 변수에 새 값을 넣는 과정을 재할당이라고 부름.

💡 const 키워드로 선언한 변수는 재할당이 금지되어, 사실상 상수로 사용함.

3.4 값의 재할당

• 재할당 전의 값은 다른 식별자와 연결이 끊겨 가비지 콜렉터에 의해 메모리에서 자동 해제됨.
• 자바스크립트는 개발자가 메모리를 직접 해제할 필요가 없는 매니지드 언어로서, 주기적으로 GC가 사용되지 않는 메모리를 정리함.

📝 정리

1. 변수는 값을 저장하고 참조하기 위한 핵심 메커니즘
2. 자바스크립트는 식별자를 통해 메모리 주소와 값을 매핑하여 안전하고 직관적으로 접근할 수 있게 해 줌.
3. 변수 선언 시에는 호이스팅에 유의하며, var, let, const 키워드를 상황에 맞춰 사용
4. let과 const는 var의 단점을 해결하기 위해 ES6에서 도입
5. 자바스크립트 엔진은 가비지 콜렉터를 통해 사용되지 않는 메모리를 자동 관리