변수

자바스크립트에서 변수란 무엇인가요?

하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말합니다. 값의 위치를 가리키는 상징적인 이름이죠.

자바스크립트에서 변수를 어떤 방식으로 저장하나요?

상징적인 이름 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행됩니다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요없이 변수를 통해 값에 접근할 수 있습니다. 변수를 통해 값에 접근할 수 있는 것은 변수의 이름인 식별자가 값이 아닌 메모리 주소를 기억하고 있어 가능합니다. 그럼이 변수 이름, 식별자는 어디에 등록되는가? 바로 실행 컨텍스트에 등록됩니다. 실행 컨텍스트에 key/value 형식인 객체로 등록되어 관리됩니다. 자바스크립트 엔진이 변수를 관리할 수 있도록 변수의 존재를 알리는 역할도 하는거죠.

변수 호이스팅이 무엇인가요?

자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행합니다. 선언 단계는 변수 이름을 실행 컨텍스트에 등록해서 자바스크립트 엔진에 변수의 존재를 알립니다. 그리고 초기화 단계로 값을 저장하기 위해 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화하죠.

console.log(hola); // undefined

var hola;

변수 선언문보다 변수를 참조하는 코드가 상단에 있는데도 참조 에러가 발생하지 않고 undefined가 출력됩니다. 이는 변수 선언이 소스코드가 한 줄씩 실행되는 시점, 런타임이 아니라 그 이전 단계인 소스코드 평과 과정이 먼저 실행되기 때문입니다. 소스코드 평가 과정에서는 모든 선언문을 소스 코드에서 찾아 먼저 실행합니다. 이 과정이 끝나면 모든 선언문을 제외하고 한 줄씩 순차적으로 실행하죠. 그래서 변수 선언이 어디에 있든 다른 코드보다 먼저 실행되는 것입니다. var, function import 구문이 있습니다.

그러나 undefined가 뜨지 않고 참조 에러가 발생하는 선언문도 존재합니다.

• let, const, class

console.log(Hola); // ReferenceError: qwer is not defined

let hola;

• constructor() 내부 super()

// super()를 호출하기 전까지 this 바인딩은 TDZ에 있다.
class SuperCar extends Car  {
	constructor(color, power) {
		this.power = power;
		super(color);
	}
}

// const myCar = new SuperCar('red', '300HP'); // ReferenceError

• 기본 함수 매개변수

const a = 2;
function multi(a = a) {
	return a * a;
}

multi(); // ReferenceError

기본 매개변수 a는 선언전에는 a = a 표현식의 오른쪽에서 사용되었다. a 에서 참조 에러가 발생한다. 기본 매개변수는 선언 및 초기화 다음에 사용되야 한다.

참조 에러가 발생하는 이유는 바로 TDZ(Temporal Dead Zone) 때문이다.

typeof 연산자로 변수가 현재 스코프 안에 선언되었는지 확인할 때 유용하다.

typeof qwer; // undefined

qwer 이라는 변수가 선언되지 않았기에 undefined로 평가된다.

TDZ에서 typeof 연산자를 사용하면 참조 에러가 발생한다.

typeof qwer; // ReferenceError
let qwer;

가비지 콜렉터가 무엇인가요?

let qwer = 10;

변수를 선언하고 값을 할당하면

변수 선언 단계와 초기화 단계를 거친다. 초기화 단계에서 변수 qwer 은 암묵적으로 undefined가 할당된다. 메모리에 undefined가 저장되고 변수 qwer 은 80이라는 값이 할당되었기에 새로운 메모리 공간에 80을 저장하고 변수 qwer 은 변수 qwer 이 저장되어 있는 메모리 주소를 기억한다. 그렇다면 undefined가 저장되어 있는 메모리 공간을 가리키는 변수는 없는 것이다. 이 때 가비지 콜렉터에 의해 불필요한 값(undefined)은 메모리에서 자동 해제된다.