[TIL/모던 자바스크립트 Deep Dive] 2023/03/06

4장. 변수(Variable)

4-4. 변수 선언의 실행 시점과 변수 호이스팅

변수 선언의 실행 시점

자바스크립트 코드는 한 줄씩 순차적으로 실행된다. 소스코드가 한 줄씩 순차적으로 실행되는 시점을 '런타임(runtime)'이라고 한다.

그렇다면 위 코드는 ReferenceError가 발생했어야 마땅하다. 'score'라는 변수의 선언이 실행되기도 전에, 변수를 참조하는 코드가 실행되고 있기 때문이다. 그런데 Error가 아니라 'undefined'가 출력되었다.

변수 선언은 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 runtime이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.

자바스크립트 엔진은 코드를 순차적으로 실행하기 전에, 해당 코드의 '평가 과정'을 거친다. 평가 과정에서 변수 선언을 포함한 모든 선언문을 '먼저' 실행한다. 평가 과정을 마친 이후 선언문을 제외한 나머지 코드를 순차적으로 실행한다.

위 예제 코드를 다시 보면 참조 코드가 먼저 작성되었지만, 자바스크립트 엔진이 내부 평가 과정에서 'score' 변수의 선언문을 먼저 실행했고, 값이 없었기에 'undefined'를 반환했음을 알 수 있다.

변수 호이스팅

이처럼, 변수 선언이 runtime 이전 단계에서 먼저 실행되는(=코드의 선두로 끌어 올려진 것처럼 동작하는) 현상을 '변수 호이스팅(variable hoisting)'이라 한다.

4-5. 값의 할당

변수에 값을 할당(assignment)할 때에는 할당 연산자 '='을 사용한다.

'변수 선언'과 '값의 할당'의 실행 시점이 다르다는 것을 유의해야 한다.

'변수 선언'은 호이스팅 현상에 의해, runtime 이전에 먼저 실행되었기에 'undefined'가 반환되었다. '값의 할당'은 runtime에 실행되기 때문에 '80'이 반환된다.

변수 선언과 값의 할당을 하나의 statement로 축약해도 동일한 방식으로 동작한다.

중요한 것은 변수에 '80'이라는 값을 할당할 때, 'undefined'가 저장되어 있던 메모리 공간을 지우고 해당 공간에 할당 값을 새롭게 저장하는 것이 아니라, '새로운 메모리 공간'을 확보하고 그곳에 '80'이라는 할당 값을 저장한다는 점이다.

4-6. 값의 재할당

'재할당'이란 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 말한다.

80이라는 값을 할당했던 'score'라는 변수에, '90'이라는 새로운 값을 할당했다. 이것이 '재할당'이다. 'var 키워드'로 선언한 변수는 값을 재할당할 수 있다. 바뀔 수 있어서 '변수'이다. 만약 값을 재할당할 수 없다면 변수라고 할 수 없고 상수(constant)라고 불러야 한다.

첫 번째 80이 할당되어 있는 코드도, 엄밀히 말하면 변수 선언과 동시에 'undefined'로 초기화되었던 상태이기에, 80을 할당하는 것은 '재할당'에 해당한다.

마찬가지로, '90'이라는 값으로 재할당 할 때, 이전에 80이 저장되어 있던 메모리를 꿰차는 것이 아니라 '새로운 메모리 공간'을 확보하고 그 공간에 '90'을 저장하게 된다.

'90'이 저장되며, 'undefined'와 '80'은 어떠한 식별자와도 연결되지 않게 된다. 이러한 불필요한 값들은 'garbage collector'라는 기능에 의해 메모리에서 자동 해제된다. 다만 해제되는 시점은 예측할 수 없다.

4-7. 식별자 네이밍 규칙

식별자(Identifier)는 어떤 값을 구별해서 식별해내는 고유한 이름이다. 식별자를 명명할 때에는 크게 3가지 규칙을 준수해야 한다.

1. 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다. 2. 단, 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다. 3. 예약어는 식별자로 사용할 수 없다.

네이밍 컨벤션(naming convention)은 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 '명명 규칙'이다. 대표적으로 4가지 네이밍 컨벤션이 있다.

일반적으로 '변수 또는 함수'의 이름에는 카멜 케이스를 적용하고, '생성자 함수 또는 클래스' 이름에는 파스칼 케이스를 적용한다고 한다.