4장 변수

4장 변수

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

10 + 20

 위와 같은 코드를 실행하면 컴퓨터는 10과 20을 메모리 상의 임의의 위치(메모리 주소)에 저장하고 CPU를 통해 연산한다. 연산 결과로 생성된 숫자 값 30도 메모리 상의 임의의 위치에 저장된다. 연산도 끝났고 연산 결과도 메모리에 저장되었지만 문제가 있다. CPU가 연산해서 만들어낸 숫자 값 30을 재사용할 수 없다는 것이다.

 연산 결과를 한 번만 사용한다면 문제가 없지만, 재사용하고 싶다면 메모리 주소를 통해 연산 결과 30이 저장된 메모리 공간에 직접 접근하는 것 외에는 방법이 없다. 하지만 메모리 주소에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 있는 매우 위험한 일이다. 만약 운영체제가 사용하고 있는 메모리 값을 변경하게 된다면 시스템을 멈추게 할 수 있는 치명적인 오류가 발생할 수도 있다. 따라서 자바스크립트는 개발자의 직접적인 메모리 접근을 허용하지 않는다.

 만약 메모리에 직접 접근 할 수 있다고 해도, 값이 저장되는 메모리 주소는 코드가 실행될 때 마다 임의로 결정되기에, 동일한 코드를 실행한다 해도 메모리의 상황에 따라 값이 저장될 메모리 주소는 변경된다.

 이처럼 메모리주소를 통해 값에 직접 접근하는 것은 올바른 방법이 아니다.

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

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

간단히 말하면, 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로 값의 위치를 가리키는 상징적인 이름이다. 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다.

따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다.

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

변수에 값을 저장하는 것을 할당(assignment)이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다.

자바스크립트는 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 저장된 값을 반환한다.

값의 의미를 파악할 수 있는 변수 이름은 가독성을 높이는 부수적인 효과가 있다. 코드는 컴퓨터에게 내리는 명령이지만 개발자를 위한 문서이기도 하다. 개발자의 의도를 나타내는 명확한 네이밍이 중요하다.

식별자

식별자란 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 식별자는 메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별해낼 수 있어야 하기에 어떤 값이 저장되어 있는 메모리 주소를 기억해야 한다. 또 해당 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어야 한다.

 이처럼 식별자는 값이 아니라 메모리 주소를 기억하고 있기에 메모리 주소에 붙인 이름이라고 할 수 있다. 

식별자라는 용어는 변수 이름에만 국한해서 사용하지 않는다. 변수, 함수, 클래스 등의 이름은 모두 식별자이다.

변수 선언

변수 선언이란 변수를 생성하는 것을 말한다. 좀 더 자세히 말하면 값을 저장하기 위한 메모리 공간을 확보(allocate)하고 변수 이름과 확보된 메모리 공간의 주소를 연결(name binding)해서 값을 저장할 수 있게 준비하는 것이다. 변수 선언에 의해 확보된 메모리 공간은 확보가 해제될 때 까지 누구도 해당 메모리 공간을 사용할 수 없도록 보호된다.

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

var score;

다음과 같이 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보한다.

하지만 var로 선언하였기 때문에, 아직 변수에 값을 할당하지 않았지만 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다. 이것은 자바스크립트의 독특한 특징이다.

자바스크립트 엔진은 변수 선언을 다음과 같은 2단계에 걸쳐 수행한다.

1. 선언 단계 : 변수 이름 등록을 통해 엔진에 변수의 존재를 알림
2. 초기화 단계 : 값을 저장하기 위한 메모리를 확보하고, var로 선언된 변수는 암묵적으로 undefined를 할당해 초기화

변수 이름은 어디에 저장될까?
변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다. 실행 컨텍스트란 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 실행 결과를 실제로 관리하는 영역이다. 변수 이름과 변수 값은 key/value 형식인 객체로 등록되어 관리된다.

var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행된다. 이는 초기화를 진행하지 않고 메모리 공간만 확보한 채로 값을 참조했을 때 이전에 남아있던 쓰레기 값(Garbage Data)을 반환하는 문제를 막기 위함이다.

변수를 사용할 때 반드시 선언이 필요하다. 만약 선언되지 않은 식별자에 접근하면 ReferenceError가 발생한다.

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

console.log(score);

var score;

위 코드를 보면 변수의 선언문 보다 참조하는 코드가 앞서있다. 하지만 참조 에러(Reference Error)가 발생하지 않고 undefined가 출력된다.

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

자바스크립트 엔진은 소스코드의 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 하는데, 이때 변수 선언을 포함한 모든 선언문이 실행된다. 따라서 변수 선언이 소스코드에 어디에 있든 상관 없이 다른 코드보다 먼저 실행되기에 어디서든지 변수를 참조할 수 있다.

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

값의 할당

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

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

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

위 처럼 두 방법으로 선언과 할당을 표현할 수 있으며 정확히 동일하게 동작한다.

중요한 점은 앞서 언급했듯이 변수 선언은 런타임 이전에 실행되고, 값의 할당은 런타임에 실행된다.

console.log(score); // undefined

var score; // 변수 선언 -> 런타임 이전 시점
score = 80; // 값의 할당 -> 런타임 시점

console.log(score); // 80

따라서 위 코드를 보면 주석에 적어놓은 것 처럼 동작한다. 선언과 할당을 하나의 문장으로 표현해도 선언 시점과 할당 시점은 분리된다.

값의 재할당

var나 let으로 선언한 변수는 재할당이 가능하다. 재할당이란 변수에 저장된 값을 다른 값으로 변경하는 것이다. 변수라는 이름도 변경될 수 있는 값이라서 변수인 것이다. 만약 재할당 할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수라 한다.

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

기존의 있던 메모리는 어떻게 될까? 아무도 사용하고 있지 않으니 가비지 컬렉터에 의해 주기적으로 메모리에서 해제된다. 이 해제되는 시점은 예측할 수는 없다.

자바스크립트는 매니지드 언어이다. 매니지드 언어와 언매니지드 언어(대표적으로 C)의 차이는 메모리 관리를 언어 차원에서 해주느냐 개발자가 직접하느냐의 차이이다.

식별자 네이밍 규칙

자바스크립트의 식별자 네이밍 규칙은 다음과 같다.

• 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
• 단, 식별자는 문자, 언더스코어, 달러 기호로만 시작가능하며 숫자로 시작하는 것은 허용하지 않는다.
• 예약어(프로그래밍 언어에서 사용되고 있는 단어들)는 식별자로 사용할 수 없다

하나의 문장에서 여러 식별자를 선언할 수는 있지만 가독성이 나빠지므로 권장하지 않는다.

ES5 부터 식별자를 만들 때 유니코드 문자를 허용하였지만 아직 까진 영어를 활용한 표기를 권장한다

자바스크립트는 대소문자를 구별한다.

변수 이름은 변수의 존재 목적을 쉽게 이해할 수 있도록 의미를 명확히 표현해야 합니다. 즉 변수의 별도의 주석이 필요하다면 변수의 존재 목적을 명확히 드러내지 못하는 것이다.

네이밍 컨벤션은 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙이다. 일관성을 유지한다면 어떤 네이밍 컨벤션을 사용해도 좋지만 ECMAScript 사양에 정의 되어 있는 객체와 함수들은 카멜 케이스와 파스칼 케이스를 사용하고 있다. 따라서 카멜 케이스와 파스칼 케이스를 따르는 것을 권장한다.

---

마치며

 변수에 대한 개념을 다시금 짚어보니 대학교 때 배웠던 내용들이 새록새록 떠올랐다. 자바스크립트에선 런타임 시점 이전에 소스코드 평가가 이루어진다는 점을 알 수 있었다. 따라서 설명하기 어려웠던 호이스팅에 대해 정확히 이해할 수 있었다. 카멜 케이스와 파스칼 케이스를 권장한다는 사실도 앞으로의 개발에 참고해야겠다.

참고 문헌

- 이웅모. 『모던 자바스크립트 Deep Dive』. 위키북스, 2020.