[Javascript]Variable

변수




변수 왜 사용하는 것일까?

사람은 계산과 기억을 모두 두뇌에서 하지만, 컴퓨터는 연산을 CPU에서, 기억을 메모리해서 수행한다. 컴퓨터는 메모리 1바이트 단위로 데이터를 저장하고 읽어들인다. 1바이트 단위의 메모리셀마다 고유의 메모리 주소 값을 가지고 있으며, 인간의 주소와 마찬가지로 공간의 위치를 나타낸다. 이 메모리에 저장되는 데이터는 종류(숫자, 텍스트, 이미지, 동영상 등)와 상관없이 모두 2진수로 변환되어 저장된다.

일반적으로 프로그래밍에서는 CPU가 메모리에 저장되어 있는 데이터를 읽어서 연산한 결과로 생성된 결과 값도 또 다른 메모리에 저장된다. 자바스크립트의 경우 개발자가 직접적인 메모리 제어를 허용하지 않기때문에 우리는 어느 메모리 셀에 해당 값이 저장되어 있는지 모른다. 그러므로 결과 값을 재사용할 수 없다.

1. 변수 = 저장된 데이터의 메모리 위치(주소)를 가리키는 것

프로그래밍 언어에서 값을 메모리에 저장하고, 저장된 값을 재사용하기 위해 변수라는 매커니즘을 제공한다. 결국 변수란, 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름이다.

let result = 100 + 200;

//데이터 메모리
메모리 1 : 100,
메모리 2 : 200,
메모리 3 : 300,

//식별자 메모리
result : 메모리 3

위 예제에서 보면 변수 이름은 result이고 변수 값은 메모리3의 데이터, 즉 300이다. 변수 이름 result에 메모리3을 저장하는 것을 할당이라고 한다.

2. 식별자

식별자?

어떤 값을 구별해서 식별할 수 있는 고유한 이름. 식별자는 어떤 값이 저장되어 있는 메모리 주소를 기억해야 한다(위 예제에서 result가 메모리3을 기억하고 있는 것 처럼).


위 정의에 따라 변수 이름은 식별자라고 할 수 있다. 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보(ex/ result: 메모리3)도 메모리에 저장되어야 한다. 즉, 식별자는 특정 값을 직접적으로 기억하는 것이 아니라 해당 값이 있는 주소를 기억한다.

식별자는 변수 이름만을 말하는 것이 아니다. 변수, 함수, 클래스 등의 이름은 모두 식별자이다(자바스크립트에서 함수는 값이기 때문에).

3. 자바스크립트 식별자 네이밍 규칙

자바스크립트 엔진이 식별자를 인식하기 위해서는 자바스크립트의 네이밍 규칙을 준수하여 선언해야 한다.

//네이밍 규칙

//식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)포함 할 수 있다.
let *human //불가능
let $human //가능
let _human //가능

//단 식별자는 숫자로 시작할 수 없다
let 1human //불가능

//예약어(프로그래밍에서 이미 사용되고 있거나 예정인 단어)는 사용할 수 없다.
let await //불가능
let this //불가능

//변수의 이름은 존재 목적을 알 수 있도록 의미를 명확히 표현한다
let number;
let phoneNumber; // number보다 의미 명확

//한글이나 다른 언어(유니코드)도 사용할 수 있지만, 권장하지 않는다.

//자바스크립트는 대소문자를 구분한다.(phonenumber !== phoneNumber)

4. 네이밍 컨벤션

하나 이상의 영어 단어로 된 식별자(즉, 띄어쓰기가 있는)를 만들때, 코드에서는 식별자에 띄어쓰기를 할 수 없으므로 아래와 같은 규칙을 사용한다.

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

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

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

변수 선언과 할당

1. 선언

선언이란 값을 저장하기 위한 메모리 공간을 확보하고 값이 있는 메모리 공간의 주소를 연결해 저장하기 위한 준비단계이다. 변수로 사용할 이름 앞에 var,let,const와 같은 키워드를 사용한다.

var answer;
let result;

이때, 위 예제에서 answer이나 result 변수에 아무것도 할당되지 않는 것이 아니라 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다. 즉 아래와 같다고 보면 된다.

var answer;
let result;

//아래와 같다
var answer = undefined;
var result = undefined;

undefined를 할당하여 초기화하는 이유는 이전에 다른 곳에서 사용했던 값(쓰레기 값이라고 함)이 해당 메모리에 남아 있을수 있으므로 undefined를 할당하여 이러한 위험을 막는 것이다.

2. 할당

할당 연사자 = 을 이용하여 좌변의 변수에 우변의 값을 할당하며, 한 줄로 단축 표현할 수도 있다.

var phoneNumber; //선언
phoneNumber = "010-1234-4567"; //할당

var phoneNumber = "010-1234-4567"; //단축표현

** 변수의 값에 다른 값을 재할당할때 원래 있던 값의 메모리에 바뀐 값을 저장하는 것이 아니라, 변수에 연결되어 있는 원래 메모리에서 다른 메모리 값으로 메모리 주소가 바뀐다는 점을 명심해야 한다. **

let phoneNumber;
phoneNumber = "010-1234-5678";

//메모리 1 : undefined
//phoneNumber : 메모리 1
//재할당
//메모리 2 : "010-1234-5678"
//phoneNumber : 메모리 2

이때 예전에 phoneNumber와 연결되어 있던 메모리1 값은 더 이상 변수와 매핑되어 있지 않고, 이것은 필요하지 않은 값이란 뜻이다. 불필요한 값은 나중에(언제인지는 모르지만) 가비지 콜렉터에 의해 자동으로 해제(삭제,정리)된다.

Reference

모던 자바스크립트 deep dive
MDN Variable