[JavaScript] 모던 자바스크립트 Deep Dive - 04장 변수

 

🚀 본 포스트는 '모던 자바스크립트 Deep Dive' 도서를 바탕으로 핵심 개념 및 내용을 요약한 포스트입니다.

 

04장 변수

 

4.1 변수란 무엇이며 왜 필요할까?

 우리가 사용하는 모든 애플리케이션은 모두 데이터를 다룹니다. 아무리 복잡한 애플리케이션이라도 결국 데이터를 입력 받아 처리하고 결과를 출력하는 것이 전부라고 볼 수 있습니다.

 

 변수는 이러한 데이터를 관리하기 위한 핵심 개념이므로 변수가 무엇이고 왜 필요한지 이해하는 것은 매우 중요합니다. 

 

 그렇다면 아래와 같은 자바 스크립트 코드를 실행하면 컴퓨터에서는 어떤 일이 발생할까요?

10 + 20

 

 컴퓨터(해당 경우에서는 JS 엔진)가 위 식을 평가하기 위해서는 10, 20, +라는 리터럴과 연산자가 가진 의미를 알고 있어야 하며 10 + 20 이라는 표현식의 의미도 파싱할 수 있어야 합니다.

 

 JS 엔진이 표현식 10 + 20을 파싱하면 아래와 같은 순서로 동작하게 됩니다.

 

1. + 연산을 수행하기 위하여 필요한 피연산자(좌변과 우변의 값)을 메모리에 저장합니다.
2. CPU가 피연산자의 값을 읽어들여 연산을 수행합니다
3. 연산 결과로 생성된 숫자 30을 임의의 메모리에 저장합니다.

 

 메모리와 CPU만 있어도 연산은 성공적으로 수행할 수 있고 결과도 메모리에 저장할 수 있지만 CPU가 연산해서 만든 결과값 30을 재사용할 수 없다는 문제점이 있습니다.

 

 위에서 10 + 20이라는 연산을 했다는 것은 해당 결과값인 30을 어딘가에 사용하기 위해서일텐데 해당 값을 재사용하기 위해서는 메모리 주소를 직접 접근하는 방법 이외에는 30이라는 값을 가져올 수 없습니다.

 

 또한, 메모리 주소를 통하여 값에 직접 접근하는 것은 치명적인 오류를 발생시킬 가능성이 있어 권장되지 않는 방식이기도 하여 JS에서는 개발자가 직접적인 메모리 제어를 하는 것을 허용하지 않습니다.

 

만일 JS에서 메모리 접근을 허용하여도 값이 저장될 메모리 주소는 미리 정해지는 것이 아닌 코드 실행 당시 메모리의 상황에 따라 임의적으로 결정되기 때문에 코드 실행마다 주소가 변경되는 문제가 있습니다. --> 메모리 주소를 통한 값 접근은 올바른 시도가 아니라고 볼 수 있습니다.

 

 프로그래밍 언어는 기억하고자 하는 값을 메모리에 저장하고, 저장된 값을 재사용하기 위하여 변수를 사용합니다.

 

변수의 정의는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름 입니다.

 

 즉, 변수는 값을 저장하고 참조하는 메커니즘으로 값의 위치를 나타내는 상징적인 이름으로 볼 수 있습니다. 이러한 변수는 컴파일러나 인터프리터에 의하여 값이 저장된 메모리 공간의 주소로 치환되어 실행되기 때문에 개발자는 직접 메모리 주소를 통하여 값을 저장하고 참조할 필요 없이 안전하게 변수를 통하여 모든 것을 제어할 수 있습니다. 

 

let result = 10 + 20;
console.log(result);

 

변수를 사용하면 위처럼 표현식 10 + 20을 평가한 결과인 30을 result라는 변수를 통하여 저장하고 참조할 수 있습니다.

변수와 관련된 용어와 정의는 아래와 같습니다.

 

변수 이름(변수명) - 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름

변수 값 - 변수에 저장된 값

할당 - 변수에 값을 저장하는 것

참조 - 변수에 저장된 값을 읽어 들이는 것

 

---

4.2 식별자

 변수명을 다른 의미로는 식별자라고도 합니다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 뜻합니다.

 

 값은 메모리 공간에 저장되어 있습니다. 이 경우 식별자는 메모리 공간에 저장되어 있는 어떤 값을 구별하여 식별하기 위하여 '메모리 주소'와 매핑됩니다(메모리 공간에서 값을 식별하기 위해서 메모리 주소를 사용하기 때문).

 

 여기서 주목해야 할 사실은 식별자는 특정 값을 기억하는 것이 아닌 해당 값이 있는 메모리 주소를 기억하고 있다는 것입니다. 식별자로 값을 구별하여 식별한다는 것은 식별자가 기억하는 주소를 통하여 접근하여 해당 값에 도달할 수 있음을 나타냅니다.

 

 즉, 30이라는 값이 메모리 주소 0x0669F913에 저장되어 있다면 관련 변수명 result는 30 쪽이 아닌 메모리 주소(0x0669F913)에 붙인 이름입니다.

 

 식별자라는 용어는 변수에서만 사용되는 것이 아니며 메모리 상 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부릅니다(변수, 클래스, 함수 등). 변수, 함수, 클래스 등의 이름과 같은 식별자는 네이밍 규칙을 준수해야 하며 선언을 통하여 JS 엔진에 식별자의 존재를 알릴 수 있습니다.

---

 

 

4.3 변수 선언

 변수 선언은 변수를 생성하는 것, 더 자세히 값을 저장하기 위한 메모리 공간 확보, 변수 이름과 메모리 주소를 연결하여 값 저장을 위한 준비를 하는 것입니다. 변수 선언을 통하여 확보된 메모리 공간은 해제되기 전까지 누구도 해당 공간을 사용할 수 없도록 보호되기 때문에 안전하게 사용할 수 있습니다.

 

 변수를 사용하기 위해서는 반드시 선언이 먼저 필요합니다. 변수 선언에는 var, let, const의 키워드를 사용하며 ES6에서 let과 const가 도입되기 전까지는 모두 var를 통하여 변수를 선언할 수 있었습니다.

var 키워드는 여러 문제점(대표적으로 함수 레벨 스코프)이 있어 let, const 키워드를 사용하는 것이 권장되고 있습니다.

 

 

아래 코드를 통하여 변수 선언 과정을 설명드리겠습니다.

var score;

 

위 선언문은 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보합니다(편의상 1000이라고 하겠습니다).

 

변수 선언 이후, 값을 할당하지 않았기 때문에 변수 선언에 의하여 확보된 메모리 공간은 비어있을 것 같지만 JS 엔진에 의하여 1000번 주소에는 undefined라는 값이 암묵적으로 할당되어 초기화 됩니다(이는 JS의 특징입니다).

 

JS 엔진은 변수 선언을 다음과 같은 2단계에 거쳐 수행합니다.

 

1. 선언 단계 - 변수 이름을 등록하여 JS 엔진에 변수(식별자)의 존재를 알립니다.

2. 초기화 단계 - 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당하여 초기화합니다.

 

var 키워드를 사용하여 선언한 변수는 선언과 초기화가 동시에 진행됩니다. 일반적으로 초기화는 변수 할당 이후 최초로 값을 할당하는 것을 의미하는데 var 키워드는 암묵적으로 undefined라는 값을 할당하여 초기화하기 때문에 메모리 접근 시에 garbage value가 나오는 위험으로부터 안전하다는 장점도 있습니다.

 

변수를 포함한 모든 식별자 공통으로 사용하기 위해서는 선언이 반드시 필요합니다. 선언되지 않은 식별자에 접근하는 경우에는 Reference Error(참조 에러)가 발생합니다.

 

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

 

 그렇다면 아래 코드의 실행 결과는 어떻게 될까요?

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

 

 변수의 선언 이전에 console.log 메서드를 통하여 score 변수를 참조하기 때문에 Reference Error가 발생할 것 같지만 undefined가 출력됩니다.

 

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

 

 JS 엔진에서는 소스 코드를 한 줄씩 순차적으로 실행하기 앞서 가장 먼저 소스 코드의 평가 과정을 거치면서 실행을 위한 준비를 합니다. 이때 평과 과정에서 JS 엔진은 변수 선언을 포함한 모든 선언문을 소스 코드에서 찾아 먼저 실행하고, 모든 평가 과정이 끝난 뒤에 선언문을 제외한 소스 코드들을 한 줄씩 순차적으로 실행됩니다.

 

 이러한 JS 엔진의 특징으로 인하여 변수 선언은 소스 코드의 위치에 상관 없이 다른 코드보다 먼저 실행됩니다. 그렇기 때문에 선언문의 위치에 상관 없이 어디서든 변수를 참조할 수 있습니다.

 

 이처럼 변수 선언문이 코드의 맨 위로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 호이스팅이라고 합니다. 이러한 호이스팅은 var 뿐만 아닌 let, const, function, function*, class 키워드를 사용한 모든 선언문에 적용됩니다.

 

4.5 값의 할당

변수에 값을 할당할 때는 할당 연산자 = 를 사용합니다. 할당 연산자는 우변의 값을 좌변의 변수에 할당합니다.

 

또한 변수 선언과 값의 할당을 하나의 문으로 단축하여 표현할 수도 있습니다.

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

var x = 30;	// 변수 선언과 값의 할당 함께 진행(단축 표현)

 

위에서 주의해야할 점은 var x = 30 처럼 하나의 문으로 작성하여도 변수 선언과 값의 할당은 따로 진행된다는 것입니다.

 

런타임 이전에 변수 선언이 먼저 이루어지고 런타임에 값의 할당이 진행됩니다. 이러한 특징 때문에 아래와 코드의 출력값은 각각 undefined, 80입니다. 

 

console.log(score);	// undefined

var score = 80;

console.log(score);	// 80

 

 또한, 해당 80이라는 값을 변수 score에 할당할 때는 기존 undefined 저장되어 있던 공간에 80을 덮어씌우는 것이 아닌 새로운 메모리 공간을 확보한 뒤 80이라는 값을 저장한다는 점에 주의해야 합니다.

 

4.6 값의 재할당

재할당은 이미 값이 할당되어 있는 변수에 새로운 값을 또 다시 할당하는 것을 말합니다.

 

var나 let 키워드로 선언한 변수는 값을 재할당할 수 있습니다. 엄밀히 말하자면 var의 경우에는 선언과 동시에 undefined로 초기화되기 때문에 처음으로 값을 할당하는 것도 재할당에 포함된다고 볼 수 있습니다.

 

하지만 const 키워드로 선언한 변수는 재할당이 금지되기 때문에 const 키워드로 선언한 변수는 곧 상수와 같습니다.

 

var score = 80;
score = 20;

 

위와 같은 코드가 있다고 가정하면 아래와 같은 순서로 동작할 것입니다.

 

1. score와 주소 A 매핑, A에는 undefined 값이 저장 (초기화)
2. score와 주소 B 매핑, B에는 80이 저장 (할당)
3. score와 주소 C 매핑, C에는 20이 저장 (재할당)

최종적으로 score 변수의 값은 20입니다. score 변수의 이전 값인 undefined와 80의 경우에는 어떠한 식별자(이 경우에는 변수)와도 연결되어 있지 않습니다. 이는 더 이상 필요 없음을 의미하며 가비지 콜렉터에 의하여 메모리가 자동 해제되게 됩니다.

 

4.7 식별자 네이밍 규칙

앞서 말한 것처럼 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름이며 네이밍 규칙을 준수해야 합니다. 식별자는 다음과 같은 네이밍 규칙을 가지고 있습니다.

 

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
• 식별자는 숫자로 시작할 수 없다.
• 예약어는 식별자로 사용할 수 없다.

 

또한 JS는 대소문자를 구별하기 때문에 abc, ABC, aBc는 각각 별개의 변수입니다.

var x = 3; 		// NG -> x 변수가 의미하는 바를 알 수 없음
var score = 80; // OK -> score 점수는 점수를 의미

// 경과 시간, 단위는 날짜
var d;					// NG
var elapsedTimeInDays; 	// OK

 

 변수는 존재 목적을 쉽게 이해할 수 있도록 의미를 명확히 표현해야 합니다. 특히 JS의 경우에는 동적 타입이기 때문에 어떤 형태의 값을 기대하는 지 변수명에서 나타내는 것도 중요합니다.

 

네이밍 컨벤션은 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성을 높이기 위하여 규정한 명명 규칙입니다. 네이밍 컨벤션을 잘 준수하면 좋은 변수명을 만들 수 있으며 주로 아래 4가지 유형의 네이밍 컨벤션이 자주 사용됩니다.

 

// 카멜 케이스
var firstName;

// 스네이크 케이스
var first_name;

// 파스칼 케이스
var FirstName;

// 헝가리언 케이스
var strFirstName; // 타입 + 식별자 이름
var $elem = document.getElementById('id'); // DOM 노드
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블

 

JS에서는 일반적으로 변수나 함수의 이름에는 카멜 케이스를 사용하며 생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용합니다. ECMAScript 사양에 정의되어 있는 객체 및 함수들도 카멜 케이스와 파스칼 케이스를 사용하고 있으므로 통일하는 것이 코드 전체의 가독성을 향상하는 것에 큰 도움이 됩니다.