04장 변수
모던 자바스크립트 Deep Dive : 4장 변수를 알아봅시다.
2025년 6월 24일3분 읽기
마지막 수정: 2025년 6월 24일
1. 변수란 무엇인가?
- 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체를 말합니다.
- 그 메모리 공간을 식별하기 위해 붙인 이름을 말합니다.
- 값의 위치를 가리키는 상징적인 이름입니다.
- 예:
var result = 10 + 20;에서result는 메모리에 30이 저장된 위치를 가리키는 식별자입니다. - 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수 이름이라 합니다.
- 변수에 저장된 값을 변수 값이라고 합니다.
- 변수에 값을 저장하는 것을 할당(assignment) 라 합니다.
- 변수에 저장된 값을 읽어 들이는 것을 참조(reference) 라고 합니다.
2. 식별자
- 변수의 이름을 식별자(identifier) 라고도 합니다.
- 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말합니다.
- 식별자는 값이 아닌 메모리 주소를 기억 하고 있습니다.
- 식별자로 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 의미입니다.
3. 변수 선언과 초기화
- 선언 단계: 변수 이름 등록
- 초기화 단계:
undefined로 초기화 (예:var score) - 할당 단계: 런타임에 실제 값을 저장 (예:
score = 10)
- 변수를 사용하려면 반드시 선언이 필요합니다.
- 변수를 선언할 때는
var,let,const키워드를 사용합니다. - 변수 선언으로 확보된 메모리 공간은
undefined값이 암묵적으로 할당되어 초기화됩니다. - 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록됩니다. 실행 컨텍스트는 js 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역입니다. js 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리합니다.
- 변수 선언과 초기화는 런타임 이전에, 값 할당은 런타임 단계에 이뤄집니다.
- 상수(constant) : 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없는 수를 말합니다.
4. 호이스팅 (Hoisting)
-
변수 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징
-
var,let,const,function,class등 선언은 먼저 실행됩니다.→
console.log(score); var score;는undefined출력
5. 식별자 네이밍 규칙
- 식별자는 문자, 숫자,
_,$로 시작 가능 (단, 숫자로는 시작 불가). - 예약어는 사용 불가.
- 유니코드 식별자 허용(한글, 일본어 등)하지만 권장하지 않습니다.
- 네이밍 컨벤션
// 카멜 케이스
var firstName;
// 스네이크 케이스
var first_name;
// 파스칼 케이스
var FirstName;
// 헝가리안 케이스
var strFirstName;
var $elem = document.getElementById('myId');
var observable$ = fromEvent(document. 'click');
6. var vs let / const
var- 함수 레벨 스코프, 호이스팅으로
undefined가 초기값 되고, 중복 선언 허용.
- 함수 레벨 스코프, 호이스팅으로
let,const- 블록 레벨 스코프, 호이스팅 시 TDZ(Temporal Dead Zone) 적용 → 선언 전에 참조 시 참조 오류.
const는 반드시 선언 시 초기화하며 재할당 불가
요약 정리
| 구분 | 설명 |
|---|---|
| 변수(Variable) | 값을 저장할 수 있는 메모리 공간을 식별하기 위한 이름 |
| 식별자(Identifier) | 값을 구별하는 이름. 내부적으로는 메모리 주소를 기억 |
| 선언 | 변수 이름을 등록하고 메모리 공간을 확보. undefined로 초기화됨 |
| 초기화 | 변수에 암묵적으로 undefined가 할당되는 단계 |
| 할당 | 런타임 중 실제 값을 변수에 저장하는 단계 |
| 참조 | 변수 값을 읽는 과정 |
| 호이스팅(Hoisting) | 변수 선언이 코드 상단으로 끌어올려진 것처럼 동작 (var 기준 undefined 할당) |
| 스코프(Scope) | var는 함수 레벨, let/const는 블록 레벨 스코프 |
| TDZ | let/const는 선언 이전에 접근하면 에러가 발생하는 Temporal Dead Zone 존재 |
주요 포인트
- 변수는 값이 아닌 메모리 주소를 식별하는 식별자이다.
var는 호이스팅과 중복 선언으로 인해 버그 발생 가능성이 높다.let과const를 사용하는 것이 표준이며, 블록 스코프를 가진다.const는 선언 시 반드시 초기화해야 하며 재할당이 불가능하다.TDZ(Temporal Dead Zone)는 선언 전 참조 시 에러가 발생하도록 한다.- 명확하고 일관된 네이밍 컨벤션을 사용하여 가독성과 유지보수성을 높인다.
- 실행 컨텍스트는 식별자 등록, 스코프 관리, 메모리 저장을 담당하는 핵심 개념이다.