본문으로 건너뛰기

변수

변수란?​

데이터는 메모리에 저장된다. 메모리는 1바이트로 이루어진 메모리 셀의 집합체이다. 변수는 '데이터 값'이 아니라 데이터가 저장된 메모리의 주소에 식별자를 매핑한 것일 뿐이다.

  1. 사람이 변수명을 참조하면
  2. 자바스크립트 엔진은 변수명과 매핑된 메모리 주소를 통해
  3. 해당 메모리에 저장된 값을 반환

식별자 (identifier)​

변수명만 식별자인 것은 아니다. 함수명도 식별자다. (자바스크립트에서 함수는 값이다.) 값을 메모리에 저장하고, 해당 메모리 위치에 함수명을 부여한 것이기 때문이다. 어떤 값을 다른 값과 구별할 수 있는 고유한 이름이면 식별자다.

변수 선언​

자바스크립트의 엔진은 변수 선언을 2단계에 거쳐 수행한다.

  1. 선언 단계: 변수명을 등록한다.
  2. 초기화 단계: 값을 저장하기 위해 메모리 공간을 확보하고, 암묵적으로 undefined를 할당해 초기화한다.
var foo;

var로 변수를 선언하면 선언 단계와 초기화 단계가 동시에 진행된다. 즉, foo를 선언하기만 해도 곧장 undefined라는 값이 할당되는 것이다.

변수 호이스팅​

자바스크립트 엔진은 소스 코드 평가 과정을 먼저 수행한 뒤, 런타임을 실행한다.

  1. 소스 코드 평가 과정: 모든 선언문(변수 선언문, 함수 선언문 등)을 찾아내서 먼저 실행
  2. 런타임 실행: 나머지 코드를 한 줄씩 순차적으로 실행

따라서 아래 코드를 실행하면 1번 줄에서 ReferenceError가 발생하지 않는다.

1 console.log(foo); // undefined
2 
3 var foo;
해설
  • 평가 과정
    • 3번 줄 실행: var 키워드를 썼으므로 선언과 동시에 undefined 할당됨.
  • 런타임
    • 1번 줄 실행: undefined

이와 같은 특징을 변수 호이스팅(variable hoisting)이라고 한다.
모든 선언문은 이에 해당된다. var뿐만 아니라 let, const, function, function*, class 등으로 선언된 모든 경우도 그렇다.

값의 할당​

1 var foo;
2 foo = 10;
1 var bar = 200;

아래처럼 선언과 할당을 동시에 해도 자바스크립트 엔진은 위처럼 선언과 할당을 나누어서 실행한다.
즉 undefined가 먼저 할당된 뒤 200이 재할당된다.

(재할당하면 새로운 메모리 공간에 값을 저장하고, 바뀐 메모리 위치로 식별자가 옮겨 간다. 이전 메모리 공간에 저장된 값은 가비지 콜렉터가 청소한다.)

따라서 아래와 같이 동작한다.

1 console.log(foo); // undefined
2
3 var foo = 10;
4
5 console.log(foo); // 10
해설
  • 평가 과정
    • 3번 줄 실행: var 키워드를 썼으므로 선언과 동시에 undefined 할당됨.
  • 런타임
    • 1번 줄 실행: undefined
    • 3번 줄 실행: 10 재할당
    • 4번 줄: 통과(평가 과정에서 실행됐으므로)
    • 6번 줄: 10
1 console.log(foo); // undefined
2
3 foo = 10;
4 var foo;
5
6 console.log(foo); // 10
해설
  • 평가 과정
    • 4번 줄 실행: var 키워드를 썼으므로 선언과 동시에 undefined 할당됨.
  • 런타임
    • 1번 줄 실행: undefined
    • 3번 줄 실행: 10 재할당
    • 4번 줄: 통과(평가 과정에서 실행됐으므로)
    • 6번 줄: 10