4장 변수
출처 모던 자바스크립트 Deep Dive을 보고 정리한 내용입니다.
자바스크립트의 변수
변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙혀진 이름을 말한다. 즉, 변수란 값의 위치를 가리키는 상징적인 이름을 말한다.
변수의 이름은 식별자(identifier)라고 하며 변수뿐만 아니라 함수, 클래스 등의 이름도 식별자이다. 식별자는 값이 아닌 메모리 주소를 기억하고 있다.
Q. 데스크톱 어플리케이션은 사용자의 하드디스크 공간에 값을 저장한다. 웹 어플리케이션에서는 어디에 값을 저장할까?
자바스크립트에서 변수는 var, let, const와 같은 키워드를 통해 선언(declare)할 수 있다. 이 중 var 키워드를 사용하여 선언한 변수의 경우에는 특이하게도 변수를 선언한 후 변수의 값을 할당하지 않아도 undefined이라는 값이 할당된다. 자바스크립트 엔진은 var 키워드를 사용한 변수 선언을 '선언 단계'와 '초기화 단계'로 나누어서 수행한다.
Q. 초기화하지 않은 변수는 어디에 저장되는가?
A. 실행 컨텍스트에 등록된다. 변수 값은 key/value인 객체 형태로 관리한다.
변수 호이스팅
console.log(score); //undefined
var score;위와 같은 명령어를 실행했을 때 쉽게 예측할 수 있는 console.log(score)의 결과는 참조 에러 발생이다. 그러나 undefined이라는 결과를 보여준다. 그 이유는 자바스크립트 엔진은 변수의 선언이 가장 먼저 실행된다. 한 줄씩 소스코드를 읽어 실행시키는 런타임 과정이 아닌 그 이전 단계에서 변수 선언이 이루어진다. 자바스크립트는 실행에 앞서 소스코드를 평가하기 위해 모든 선언문을 찾아내 먼저 실행한다. 그렇기 때문에 변수의 선언이 어디에 있던 변수를 참조할 수 있었던 것이다...!
변수 뿐만 아니라 모든 식별자의 선언이 코드의 선두로 끌어 올려진 것 처럼 동작하는 자바스크립트 고유의 특징을 호이스팅(Hoisting)이라고 한다.
console.log(score);
var score;
score = 80;
console.log(score);위와 같은 코드의 경우 그 결과는 어떻게 될까? 호이스팅은 선언문에만 동작하는 것인가? 초기화 과정 또한 호이스팅이 발생하는가?
결과는 undefined, 80이다. 호이스팅은 선언만 이루어진다. 즉, 위 코드는 다음 코드와 같이 실행된다.
var score;
console.log(score); //undefined
score = 80;
console.log(score); //80만약 호이스팅을 잘 이해했다면 아래 코드의 결과 또한 쉽게 예측할 수 있을 것이다.
console.log(score);
var score = 80;
console.log(score);결과는 undefined, 80이다. 앞서 서술하였듯이 var 키워드로 선언한 변수는 '선언 단계'와 '초기화 단계'로 나누어 실행된다.
식별자를 포함한 모든 선언을 가장 먼저 읽은 후 동작한다고 이해하면 쉽다.
값의 재할당
자바스크립트에서 변수를 재할당할 때 기존의 공간에 다른 값으로 대체하는 것이 아닌 새로운 공간에 값이 할당되고, 식별자는 이 공간을 가리키는 매커니즘으로 동작한다. 즉 var로 변수를 선언 후 초기화하면 undefined이 자동으로 할당된 후 값이 저장되는데 이 undefined이 할당되어 있는 공간에 새로운 값을 저장하는 것이 아닌 새로운 공간에 값을 할당한 후 식별자가 가리키는 주소를 변경한다. 이후에 값을 재할당하여도 똑같이 동작한다. 더 이상 사용되지 않는 기존의 할당된 공간들은 가비지 컬렉터(Garbage Collector)에 의해 삭제된다.
식별자 네이밍 규칙
자바스크립트에서 식별자는 다음과 같은 규칙으로 명명되어야 한다.
- 문자, 숫자, ($, _)인 특수문자를 포함할 수 있다.
- 문자, ($, _)인 특수문자만 식별자의 첫 문자로 사용할 수 있다.
- 예약어는 식별자로 사용할 수 없다.
- ES6부터는 유니코드를 지원한다.
- 대문자와 소문자를 구별한다.
