변수는 무엇이고 왜 필요할까?
컴퓨터는 CPU로 연산하고, 메모리로 데이터를 저장하는데 메모리는 여러 개의 셀로 되어 있으며, 각 셀은 고유의 메모리 주소를 가진다.
하지만 메모리 주소에 직접 접근하게 되면 오류가 발생할 가능성이 크고, 이 방식만으로는 CPU가 연산한 값을 재사용하기 어렵다.
이 때, 변수를 사용하면 메모리 주소를 직접 다루지 않고도 데이터를 저장하고 사용할 수 있다.
즉, 변수란 다음과 같다.
- 데이터를 저장할 수 있는 메모리 공간
- 메모리 공간을 식별하기 위한 이름
- 저장된 값의 위치를 나타내는 식별자
식별자는 변수명으로, 메모리 주소를 통해 변수나 함수, 클래스 등을 구별하는데 사용된다.
또한, 메모리 주소와 매핑 관계를 맺으며 이 매핑 정보 역시 메모리에 저장된다.
식별자는 값이 아니라 메모리 주소를 가리키며, 선언을 통해 자바스크립트 엔진이 식별자의 존재를 인식하게 된다.
변수 선언
변수를 생성하는 것을 선언이라고 하는데, 이때 var, let, const 키워드를 사용한다.
var는 함수 레벨 스코프를 가지는데, 전역 변수가 선언되는 문제가 있다.
이런 단점을 보완하기 위해let,const가 도입되었다.
자바스크립트 엔진은 변수를 선언할 때 다음 두 단계를 거친다.
1️⃣ 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 해당 변수의 존재를 알린다.
2️⃣ 초기화 단계: 값을 저장할 메모리 공간을 확보하고, 암묵적으로 undefined를 할당한다.
- 초기화 단계를 거치지 않으면, 이전에 할당된 쓰레기 값이 남아 있을 수 있다.
만약 변수를 선언하지 않고 사용하면ReferenceError가 발생한다.
변수 이름이 저장되는 곳은 실행 컨텍스트(Execution Context)라고 한다.
실행 컨텍스트는 코드의 실행 결과를 실제로 관리하는 영역으로, 자바스크립트 엔진이 여기서 식별자와 스코프를 관리한다. 실행 컨텍스트에서 변수 이름과 값은 키-값 형태로 등록되어 관리된다.
이러한 실행 컨텍스트 덕분에 변수의 유효 범위나 참조 방식이 결정되며, 변수를 올바르게 관리할 수 있다.
변수 선언의 실행 시점과 변수 호이스팅
console.log(score); // undefined
var score;위의 코드에서 변수를 선언하기 전에 접근하면, ReferenceError가 발생할 것 같지만, undefined가 출력된다.
변수 선언은 코드 실행 전에 미리 처리되기 때문이다.
자바스크립트 엔진은 실행 전에 코드를 평가하는 과정에서 선언문을 먼저 실행한다.
즉, 자바스크립트 엔진은 변수 선언을 다른 코드보다 먼저 처리하므로, 변수의 위치와 상관없이 어디서든 변수를 참조할 수 있게 된다.
이렇게 변수 선언문이 코드 맨 위로 끌어올려지는 것처럼 동작하는 특징을 변수 호이스팅(Variable Hoisting)이라 한다.
값의 할당 + 재할당
변수 선언은 코드 실행 전에 이루어지지만, 값의 할당은 코드가 실행될 때 이루어진다.
console.log(score); // undefined
var score = 80; // 변수 선언과 값의 할당
console.log(score); // 80변수에 값을 할당할 때는 undefined가 저장되어 있던 메모리에 저장하는 것이 아니라, 새로운 메모리 공간을 확보한 후 값을 저장한다.
✏️ Example
console.log(score); // undefined
score = 80; // 값의 할당
var score; // 변수 선언
console.log(score); // 80- 80이 출력되는 이유는?
변수 선언이 호이스팅되면서 자바스크립트 엔진이 먼저 변수를 등록한 후, 런타임에서 값이 할당되었기 때문에 정상적으로 동작한다.
재할당은 변수에 저장된 값을 새로운 값으로 변경하는 것이다.
값을 재할당할 때도 새로운 메모리 공간에서 이루어지며, 이전 값은 가비지 콜렉터에 의해 자동으로 메모리에서 해제된다.
const 키워드는 단 한 번만 할당할 수 있는 변수를 선언하므로, 재할당이 불가능하다. 따라서, 상수를 사용할 때 사용 가능하다.
