[Deep Dive] 4장 - 변수

이 카테고리는 모던 자바스크립트 Deep Dive 책을 공부하며 정리한 글을 포스팅하는 공간입니다.

---

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

연산 결과를 재사용하려면 메모리 주소를 통해 메모리 공간에 직접 접근하는 것 외에는 방법이 없다.

하지만 이는 치명적 오류를 발생시킬 가능성이 높은 매우 위험한 일이므로 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.

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

 

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 간단히 말해 값의 위치를 가리키는 상징적인 이름

 

변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다.

 

• 변수명 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름. 사람이 의미를 알기 쉽게 명명해야 함
• 변수 값 : 변수에 저장된 값
• 할당 : 변수에 값을 저장하는 것
• 참조 : 변수에 저장된 값을 읽어들이는 것

 

 

4.2 식별자

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

 

식별자는 어떤 값이 저장되어 있는 메모리 주소를 기억(저장)해야 한다.(값이 아니다)  즉, 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다.

식별자라는 용어는 변수 이름에만 국한되지 않는다. 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부른다. (ex. 변수, 함수, 클래스.)

 

 

4.3 변수 선언

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

 

변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다.

 

키워드 : 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어. 자바스크립트 엔진은 키워드를 만나면 자신이 수행
해야 할 약속된 동작을 수행한다

 

 

[예제]

var score; // 변수 선언(변수 선언문)

위 변수 선언문은 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보한다. 변수에 값을 아직 할당하지 않은 상태이기 때문에 확보된 메모리 공간은 비어 있는 것이 아니라, 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다.

 

 

자바스크립트 선언 단계

• 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
• 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.
  • 이전에 다른 애플리케이션이 사용했던 값을 초기화 함으로 쓰레기 값을 출력할 오류로부터 보호

var 키워드로 변수 선언시, 선언과 초기화가 동시에 진행된다.

초기화란 변수가 선언된 이후 최초로 값을 할당하는 것을 말한다. var로 선언한 변수는 어떠한 값도 할당하지 않아도 암묵적으로 undefined라는 값을 갖는다.

 

 

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

[예제] 변수 선언문보다 변수를 참조하는 코드가 앞에 있는 경우

console.log(score); // undefined

var score; // 변수 선언문

자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(score);가 가장 먼저 실행된다.

아직 score 변수의 선언이 되지 않은 상태이기 때문에 에러가 참조 에러가 발생할 것 같지만, 에러가 발생하지 않고 undefined가 출력된다.

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

 

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

 

변수 선언뿐 아니라 var. let, const, function, function* class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅된다.

모든 선언문은 런타임 이전 단계에서 먼저 실행된다.

 

 

4.5 값의 할당

변수에 값을 할당할 때는 할당 연산자 =를 사용한다.

 

[예제]

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

// 다음과 같이 하나의 문으로 단축 표현할 수도 있다.
var score = 80;

 

변수 선언은 런타임 이전에 실행되지만 값의 할당은 런타임에 실행된다.

하나의 문으로 단축 표현해도 동작하는 것은 변함 없다.

 

[예제]

console.log(score); // undefined

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

console.log(score); // 80

score 변수에 값을 할당하는 시점에는 이미 변수 선언이 완료된 상태이며, 이미 undefined로 초기화되어 있다.

따라서 score 변수에 값을 할당하면 score 변수의 값은 undefined에서 새롭게 할당한 숫자 값 80으로 재할당된다.

하나의 문으로 표현해도 항상 변수 선언이 이뤄지면 그 값은 undefined로 초기화된 뒤 값을 재할당하는 방식으로 동작한다.

 

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

 

 

[예제] 아래의 코드는 어떻게 동작할까?

console.log(score); // undefined

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

console.log(score); // ??

먼저, 런타임이 실행되기 전 var 선언문이 호이스팅에 의해 변수가 선언되어 그 메모리에는 undefined 값이 할당된 상태로 런타임이 실행된다. 그 다음, var 선언문을 제외한 모든 코드가 순차적으로 실행된다.

 

최초의 console.log(score); 에서는 값이 할당되지 않은 상태이기 때문에 undefined, 그 다음 score = 80; 에서는 var로 선언한 score의 메모리 공간에 80이라는 값이 할당되고, 마지막 console.log(score);에서는 재할당된 값 80이 출력된다.

 

 

4.6 값의 재할당

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

재할당 : 현재 변수에 저장된 값을 버리고 새로운 값을 저장하는 것.

 

var로 선언한 변수는 선언과 동시에 undefined로 초기화되기 때문에 엄밀히 말하자면 변수에 처음으로 값을 할당하는 것도 사실은 재할당이다.

 

상수 : 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없는 상태. 오직 한 번만 할당할 수 있는 변수.

 

변수에 값을 재할당하면 처음 값을 할당했을 때와 마찬가지로, 이전 값 80이 저장되어 있던 메모리 공간을 지우는 것이 아니라 새로운 메모리 공간을 확보하고 그 메모리 공간에 숫자 90을 저장한다. 이전에 입력되었던 undefined, 80은 더 이상 필요하지 않기 때문에 가비지 콜렉터에 의해 메모리에서 자동 해제된다.

 

가비지 콜렉터 : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능.

 

 

4.7 식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
• 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.
• 예약어는 식별자로 사용할 수 없다.
• 변수는 쉼표로 구분해 하나의 문에서 여러 개를 한번에 선언할 수 있다.
• ES5부터 유니코드 문자를 허용하므로 한글이나 일본어 식별자도 사용 가능하나 권장하진 않는다.
• 자바스크립트는 대소문자를 구별하므로 apple과 Apple은 각각 별개의 변수이다.
• 변수 이름은 변수 목적을 쉽게 이해할 수 있도록 의미를 명확히 표현해야 한다. (가독성)

 

[자바스크립트 예약어]

await	break	case	catch	class	const
continue	debugger	default	delete	do	else
enum	export	extends	false	finally	for
function	if	implements	import	in	instanceof
interface	let	new	null	package	private
protected	public	return	super	static	switch
this	throw	true	try	typeof	var
void	while	with	yield

 

 

[네이밍 컨벤션]

// 카멜 케이스(camelCase)
var firstName;

// 스네이크 케이스(snake_case)
var first_name;

// 파스칼케이스(PascalCase)
var FirstName;

// 헝가리언 케이스(typeHungarianCase)
var strFirstName; // type + identifier
var $elem = document.getElementById('myId'); // DOM 노드
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블

ECMAScript 사양에 정의되어 있는 객체와 함수들도 카멜 케이스와 파스칼 케이스를 사용하고 있기 때문에, 코드 전체의 가독성을 높이려면 이를 따르는 것이 유리하다.