[JavaScript] 변수

 
지난번 포스팅에서 변수를 선언하는 var, let, const 키워드와 호이스팅을 다뤘습니다.
이에 대한 배경지식을 더 잘 다져놓으면 좋을 것 같아 변수라는 좀 더 포괄적인 파트로 한번 더 정리해봅니다.
 

---

1. 변수 선언

(1) 변수 선언이란?

①값을 저장하기 위한 메모리 공간을 확보하고
②변수 이름과 확보된 메모리 공간의 주소를 연결해서
③값을 저장할 수 있게 준비하는 것입니다.
 
변수 선언에 의해 확보된 메모리 공간은 확보가 해제되기 전까지는 누구도 그 공간을 사용할 수 없도록 보호되므로 안전합니다.
 

(2) 변수 선언 키워드

변수를 사용하려면 반드시 선언이 필요합니다.
변수를 선언할 때는 var, let, const 키워드를 사용합니다.
 
ES6에서 let, const가 도입되기 이전까지 var 키워드가 유일했습니다.
let, const가 도입된 이유를 정확히 파악하려면 먼저 var 키워드의 단점부터 정확히 이해해야 합니다.
대표적인 단점으로는 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다는 점입니다.
이로 인해 의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생하기도 합니다.
 
그러나 var 키워드가 폐기 된 것은 아닙니다.
ES6 이전 사양으로 구현된 코드도 ES6 기반의 자바스크립트 엔진에서 모두 정상작동 하기 때문입니다.
즉, ES6은 기본적으로 하위 호환성을 유지하면서 ES5 기반 위에 새로운 기능을 추가한 것입니다.
 
▶ var

다음 코드를 통해 변수 선언과 할당, 메모리 공간에 대해 이해해보겠습니다.

var score; //변수 선언​

 

① undefined
위 코드에서는 변수를 선언한 이후, 아직 변수에 값을 할당하지 않았습니다.
그렇기에 변수 언언에 의해 확보된 메모리 공간은 비어 있을 것이라 생각할 수 있으나
확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined 라는 값이 암묵적으로 할당되어 초기화 됩니다.
→ ★ 자바스크립트의 독특한 특징
→  var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행

② 쓰레기 값
만약 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아 있을 수 있으며, 이러한 값을 쓰레기 값(garbage value)이라 합니다.
따라서 값을 할당하지 않은 상태에서 곧바로 변수 값을 참조하면 쓰레기 값이 나올 수 있습니다.
var 키워드는 암묵적으로 초기화를 수행하므로 이러한 위험으로부터 안전합니다.

③ ReferenceError
선언하지 않은 식별자에 접근하면 ReferenceError(참조에러)가 발생합니다.

 

---

 

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

console.log(score);  //undefined
var score;  //  변수 선언문

 
자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 
위의 코드를 보면 console.log(score);가 실행되는 시점에는 아직 선언이 실행되지 않았으므로
ReferenceError를 발생할 것처럼 보입니다.
그러나, 실제로는 undefined가 출력됩니다.
Why? 자바스크립트는 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다! (소스코드 평가 과정)
 
이렇듯,
변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을
변수 호이스팅(variable hoisting)이라 합니다.
 

---

3. 값의 할당

var score;  //변수 선언
score = 80;  //값의 할당

var score = 80;  //변수 선언과 값의 할당 동시에

 
변수 선언과 값의 할당의 실행 시점이 다르다는 것에 주의해야 합니다!
변수 선언은 런타임 이전에 먼저 실행되고 값의 할당은 런타임에 실행됩니다.
 
위의 코드처럼 두 가지 방식으로 할당해도 모두 변수에 undefined가 할당되어 초기화되는 것은 변함이 없습니다.
 

 
왼쪽의 그림처럼 변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 80을 새롭게 저장하는 것이 아니라, 새로운 메모리 공간을 확보하고 그곳에 할당 값 80을 저장한다는 점에 주의해야 합니다.
→ New!!코린이는 처음 알게된 사실입니다...
 
 
 

---

4. 값의 재할당

var score = 80; 
score = 90; //값의 재할당

 
재할당이란 말 그대로 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 말합니다.
3. 값의 할당에서 설명했듯이 이때도 이전 값인 80이 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 90을 채우는 것이 아니라,
새로운 메모리 공간을 확보하고 그 메모리 공간에 90을 저장합니다. 
 
즉, score 변수 이전 값인 undefined와 80은 어떤 변수도(어떤 식별자와도 연결되지 않은) 값으로 갖고 있지 않습니다.
이러한 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제되며, 그 시점은 예측할 수 없습니다. 
 
자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 이를 통해 메모리 누수(memory leak)를 방지합니다.
 

*매니지드 언어: 자바스크립트, 메모리 기능을 언어 차원에서 담당, 개발자의 직접적인 메모리 제어를 허용하지 않음
*언매니지드 언어: C, 개발자가 명시적으로 메모리를 할당하고 해제하기 위한 malloc()과 같은 저수준 제어 기능을 제공

---

5.식별자 네이밍 규칙

(1) 기본 규칙

 

①  알파벳, 숫자, $, _만 사용할 수 있음

• 식별자는 반드시 알파벳(A-Z, a-z) 또는 특수 문자 $, **_**로 시작해야 합니다.
• 숫자(0-9)는 이름의 첫 글자로 올 수 없습니다.

②  대소문자를 구분함

• 자바스크립트에서 식별자는 대소문자를 구분합니다.

③  예약어 사용 금지

• class, return, if 등 자바스크립트의 예약어는 식별자로 사용할 수 없습니다.

(2) 잘못된 식별자 예시

다음과 같은 식별자는 자바스크립트에서 사용할 수 없습니다:

• 숫자로 시작: 123variable (잘못된 예)
• 공백 포함: my variable (잘못된 예)
• 특수문자 포함: my-variable! (잘못된 예)
• 예약어 사용: let return = 5; (잘못된 예)

 

---

 
 
 
 

모던 자바스크립트 Deep Dive

해당 게시물은 위 도서를 통해 공부한 내용입니다.

~ 오류나 보완할 점에 대한 조언과 응원은 언제나 감사합니다! ~