변수(Variable)란?
➡️ 변수(Variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 뜻합니다.
var result = 20+30;위의 예시에서 20+30 연산을 통해서 새로운 값인 50이 생성됩니다. 이 새롭게 생성된 값은 메모리 공간에 저장이 되고 이 값을 다시 읽어 재사용할 수 있게 해주는 것이 바로 변수입니다.
즉 변수를 통해서 값에 접근하여 재사용할 수 있게 되는 것입니다.
예시에서 result 변수 이름 또는 변수명이라고 하고 이 변수에 저장된 값을 변수 값이라고 합니다.
변수 선언
➡️ 변수 선언이랑 변수를 생성하는 것을 말합니다. 즉, 변수에 할당된 값을 저장하기 위해 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결하는 것입니다.
변수를 사용하기 위해서는 반드시 선언이 필요한데 자바스크립트에서는 var, let, const 키워드를 사용해서 변수를 선업합니다.
🚩 참고사항
var 키워드는 ES6를 사용한다면 쓰지 않는 것을 권장합니다. var 키워드는 여러가지 단점이 있는데 그 중에서도 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원하는 것입니다.
예시를 통해서 변수의 선언에 대해 알아보겠습니다.
var num;
예시는 num이라는 변수 이름을 가진 변수를 선언하는 것을 뜻합니다. 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보합니다.
여기서 변수의 값은 아직 아무 값도 할당되지 않았기 때문에 자바스크립트 엔진에 의해 암묵적으로 undefined 가 할당되고 초기화됩니다.
✅ 자바스트립트 엔진은 변수 선언을 다음과 같이 2단계로 진행합니다.
- 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
- 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로
undefined를 할당해 초기화한다.
var 키워드로 변수를 선언하게 되면 선언 단계와 초기화 단계가 동시에 진행이 됩니다.
변수 선언의 실행 시점과 변수 호이스팅(hoisting)
console.log(num); // undefined
var num; // 변수 선언문
➡️ 변수의 선언문 이전에 변수에 접근해서 출력을 하는 코드입니다. 자바스크립트는 인터프리터에 의해 한 줄씩 코드가 실행되기 때문에 console.log(num);이 가장 먼저 실행됩니다.
따라서 위의 예시 코드는 참조에러가 발생할 것 같지만 undefined가 출력이 된다.
이 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 런타임 시점이 아니라 그 이전 단계에 실행되기 때문입니다.
💡 이렇게 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 특징을 변수 호이스팅(Variable Hoisting)이라고 합니다.
변수 선언뿐만 아니라 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅이 됩니다.
값의 할당
➡️ 변수에 값을 할당할 때는 할당 연산자인 =를 사용합니다.
var num;
num = 10;
// 또는
var num = 10;
변수 선언은 소스 코드가 실행되는 런타임 이전에 이뤄지지만 변수에 값을 할당하는 것은 런타임에 실행됩니다.
⚠️ 변수에 값을 할당할 때는 이전에 초기화된 값인
undefined가 저장되어 있던 메모리 공간을 지우고 그 공간에 새로운 값을 저장하는 것이 아니라 아예 새로운 메모리 공간을 확보하고 그 곳에 저장합니다.
마무리
모던 자바스크립트 Deep Dive 책을 읽으면서 정리를 했습니다. 다음 포스트에서는 문과 식에 대해 살펴보겠습니다.
