[JS] DeepDive 04. 변수

4.1 변수의 개념과 필요성

자바스크립트 엔진의 연산을 수행하기 위해, 피연산자(operand) 기억해야 함.
컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억함.

메모리(memory):

• 데이터를 저장할 수 있는 메모리 셀(memory cell)의 집합체
• 메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기(1바이트) 단위로 데이터를 write/read
• 각 셀은 고유의 메모리 주소(memory address)를 가짐.
• 메모리에 저장되는 데이터는 모두 2진수로 저장됨.

직접적인 메모리 접근의 위험성:
실수로 운영체제 사용하는 값을 변경하면 시스템을 멈추게 하는 치명적인 오류가 발생할 수 있다.
-> 따라서 자바스크립트는 개발자의 직접적인 메모리를 허용하지 않는다.
또한 코드가 실행될 때마다 값이 저장될 메모리 주소는 변경됨.

변수(variable):

• 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름.
• 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 따라서 개발자가 직접 메모리 주소를 통해 값에 접근할 필요 없이 변수를 통해 안전하게 값에 접근할 수 있다.
• 변수 관련 표현:
  • 변수 이름(변수명)
  • 변수 값
  • 할당(assignment)
  • 참조(reference): 변수에 저장된 값을 읽어 들이는 것
• 변수 이름을 잘 짓자! for 가독성

 

4.2 식별자 (identifier)

식별자: 어떤 값을 구별해서 식별할 수 있는 고유한 이름

• 식별자는 값이 아니라 메모리 주소를 기억하고있다.
• 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름이면 모두 식별자다. 따라서 변수 이름 뿐만 아니라 함수, 클래스 등의 이름도 모두 식별자다.
• 식별자는 네이밍 규칙을 준수해야 하며, 선언(declaration)에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

 

4.3 변수 선언 (variable declaration)

• 변수 선언: 변수를 생성하는 것. 값을 저장하기 위한 메모리 공간을 확보(allocate)하고 변수 이름과 확보된 메모리 공간의 주소를 연결(name binding)해서 값을 저장할 수 있게 준비하는 것.
• 확보된 메모리 공간은 해제(release) 되기 전까지 누구도 확보된 메모리 공간을 사용할 수 없도록 보호된다.
• 변수를 선언할 떄는 var, let, const 키워드.
  • var 키워드의 대표적인 단점: 함수 레벨 스코프를 지원. 의도치 않게 전역 변수가 선언될 수 있다.

키워드(keyword): 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어.

• 변수에 값을 할당하지 않으면 확보된 메모리 공간에는 undefined라는 값이 할당되어 초기화 됨. (자바스크립트의 독특한 특징)
• 자바스크립트 엔진의 변수 선언 2단계:
  • 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림
  • 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화함.

모든 식별자는 실행 컨텍스트에 등록된다.

실행 컨텍스트(execution context): 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역. 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리함.
변수 이름과 변수 값은 실행 컨텍스트 내에 key/value 형식인 객체로 등록되어 관리됨. -> 13장과 23장에서 계속.

var : 선언 단계와 초기화 단계 동시에 진행됨. undefined로 암묵적인 초기화 자동 수행됨.
* 초기화(initialization) : 변수 선언 이후 최초로 값 할당.

자바스크립트는 쓰레기 값(garbage value)로부터 안전하다. 초기화 단계를 거치지 않으면 확보된 메모리 간에 이전에 다른 애플리케이션이 사용했던 값이 남아있을 수 있지만, 암묵적으로 초기화해주기 때문.

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

 

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

console.log(score);
var scope;

자바스크립트 코드는 인터프리터에 의해 순차 실행되므로, 위 코드에서 console.log가 먼저 실행되지만 ReferenceError가 발생하지 않고 undefined가 출력된다.
-> 변수 선언이 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.

자바스크립트 엔진은 런타임에 앞서 소스코드의 평가 과정, 준비단계를 거친다. 이때 모든 선언문을 찾아 먼저 실행한다. 그리고 런타임에는 선언문을 제외한 소스코드를 순차 실행한다.

변수 호이스팅(variable hoisting): 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징.

**변수 선언뿐 아니라 var, let, const, function, function*, class 키워드로 선언된 모든 식별자는 호이스팅된다. 모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문.

 

4.5 값의 할당

할당 연산자 =

console.log(score); // undefined 출력
score = 80;
var score; // 변수 선언과 값의 할당
console.log(score); // 80 출력

변수 선언은 런타임 이전에 먼저 실행되지만, 값의 할당은 런타임에 실행됨
변수에 값을 할당할 때는, 새로운 메모리 공간을 확보하고 그곳에 할당 값을 저장한다.

 

4.6 값의 재할당

재할당 시에는 새로운 메모리 공간을 확보하고 그 메모리 공간에 값을 저장한다.

가비지 콜렉터(garbage collector) :
애플리케이션이 할당(allocate)한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제(release)하는 기능. 어떤 식별자도 참조하지 않는 메모리 공간.
자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 가비지 콜렉터를 통해 메모리 누수(memory leak)을 방지한다.
단, 메모리에서 언제 해제될지는 예측할 수 없다.

언매니지드 언어 vs 매니지드 언어 :
언매니지드 언어 like C : malloc(), free() 같은 low-level 메모리 제어 기능 허용.
매니지드 언어: 메모리 제어 허용x. 가비지 콜렉터가 메모리 해제 수행.

 

4.7 식별자 네이밍 규칙

• 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($) 포함 가능
• 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 함. 숫자 시작x
• 예약어는 식별자로 사용 x
• 대소문자를 구별함.

책에서는 알파벳 외의 유니코드 문자의 식별자 사용을 권장하지 않는다고 언급하였다. 반면 흥미롭게도 토스에서는 변수명을 한글로 짓는 컨벤션이 있다!
https://tosspayments-dev.oopy.io/chapters/frontend/posts/hangul-coding-convention

 

자바스크립트 네이밍 컨벤션(naming convention):

• 변수와 함수 이름: 카멜 케이스 (camelCase)
• 생성자 함수와 클래스 이름: 파스칼 케이스 (PascalCase)

변수의 존재 목적을 명확히 드러내자. 변수 선언에 별도의 주석이 필요하다면 변수의 존재 목적을 명확히 드러내지 못하는 것.

 

---

 

🙋 질문: 자바스크립트에서 메모리의 할당 과정을 설명해주세요.

🙋 질문: 아래의 코드 블록에서, 각 console.log의 결과와 그 이유를 설명하세요.

console.log(score);
score = 80;
var score;
console.log(score);

🙋 질문: 자바스크립트는 재할당을 할 때 왜 새로운 메모리 공간에 변수를 할당할까요? Hint: 6장 데이터타입.

 

 

 

『모던자바스크립트 Deep Dive』 를 공부하며 정리한 기록입니다.