4장. 변수

4.1 변수란 무엇인가? 왜 필요한가?

10 + 20
// 컴퓨터는 이것을 어떻게 연산할까?

• 사람이 이 식을 계산하기 위해서는 10과 20의 의미, +의 의미를 알고 있어야 한다. '10 + 20'의 의미도 해석할 수 있어야 한다. 자바스크립트 엔진이 이 코드를 계산하려면 먼저 10, 20, +라는 기호의 의미를 알고 있어야 하며, '10 + 20'이라는 표현식의 의미도 해석(parsing)할 수 있어야 한다.

• 사람은 계산과 기억을 두뇌에서 처리하지만, 컴퓨터는 연산과 기억을 수행하는 기관이 CPU, Memory로 나눠져있다.
  -Memory? 데이터를 저장할 수 있는 메모리 셀의 집합체로, 메모리 셀 하나의 크기는 1바이트이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽는다. 메모리에 저장되는 모든 값은 2진수로 저장된다.

• CPU가 연산을 통해 '30'을 도출해내도 그 숫자를 재사용할 수 없다. 재사용을 위해서는 메모리 주소를 통해 연산 결과 30이 저장된 메모리 공간에 직접 접근하는 것 외에는 방법이 없다. 하지만 메모리 주소를 직접 제어하는 것은 치명적인 오류를 발생시킬 수 있다.

프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘을 제공한다.

• 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 매커니즘으로 값의 위치를 가리키는 상징적인 이름이다. 개발자는 직접 메모리 주소를 통해 값을 저장하고 참조할 필요 없이 변수를 통해 안전하게 값에 접근할 수 있다.

// 변수는 기본적으로 하나의 값을 저장(할당)한다.
let userName = 'john';
let userId = 1;

//그러나 객체나 배열을 이용해 여러 개의 값을 하나의 변수로 선언할 수 있다.
const user = { id: 1, name: 'john' };
const users = [{
	id: 1, name: 'john'
}, {
	id: 2, name: 'angela'
}]
;

4.2 식별자

• 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 식별자는 값이 아니라 메모리의 주소를 기억하고 있다.

4.3 변수 선언

변수 선언?
값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것

• 변수를 선언하기 위해서는 var, let, const를 이용한다. 변수의 이름을 비롯한 모든 식별자는 실행 컨텍스트(execution context)에 등록된다. 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다.

let score; 
// score의 값는 아직 할당되지 않았으므로 undefined다.
// 변수뿐만 아니라 모든 선언되지 않은 식별자(함수, 클래스 등)에 접근하면 'ReferenceError(참조 에러)'가 발생한다.

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

console.log(userName);
let userName;

// 로그에는 undefined가 출력된다.

• 변수 선언보다 변수를 참조하는 코드가 앞에 있으므로 ReferenceError가 발생할 것 같으나, undefined이 출력된다. 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임(runtime)이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.

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

4.5 값의 할당

console.log(userName) // undefined

let userName;
userName = 'john'; // let userName = 'john'으로 한 줄로 표현할 수 있다.

console.log(userName) // john이 출력된다.

• 변수 선언과 값의 할당 실행 시점이 다르다. 변수 선언은 런타임 이전에 먼저 실행되고 값의 할당은 런타임에 실행된다.

console.log(userName)

userName = 'john'
const userName;

console.log(userName);  // 결과는 ??

4.6 값의 재할당

let userName = "john";
userName = "ellie";

console.log(userName); // ellie가 출력된다.

• 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수(constant)다.

• 변수에 값을 재할당하면 userName 변수의 값을 이전 값 'john'에서 재할당된 'ellie'로 변경된다. 처음 값을 할당했을 때와 마찬가지로 이전 값 'john'이 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 재할당 값 'ellie'를 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그 메모리 공간에 'ellie'를 저장한다.

• 이전에 저장된 'john'은 아무도 사용하고 있지 않고 필요하지 않은 것인데, 이런 값들은 Gabage Collector에 의해 메모리에서 자동 해제된다.
  

4.7 식별자 네이밍 규칙

• 식별자는 다음 네이밍 규칙을 준수해야 한다.
  1) 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(), 달러 기호($)를 포함할 수 있다.
  2) 단, 식별자는 특수문자를 제외한 문자, 언더스코어(), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.
  3) 예약어(reserved words)는 식별자로 사용할 수 없다.
  
• 4가지 네이밍 컨벤션

let firstName; // camelCase

let first_name; // snake_case

let FristName; // PascalCase

let strFirstName // type + identifier
let $elem = document.getElementById('myId') // DOM노드
let obserable$ = fromEvent(document, 'click') // RxJS 옵저버블

(이 글은 모던자바스크립트 Deep Dive를 요약 및 정리한 것입니다.)