04.1. 변수란 무엇인가?

애플리케이션은 데이터를 다룬다. 아무리 복잡한 애플리케이션이라 해도 데이터를 입력받아 처리하고 결과를 출력하는 것이 전부다. 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다.

10 + 20; // 30

컴퓨터는 사람을 모델로 디자인 되었기 떄문에 사람과 유사하게 동작한다. 사람이 위 식을 계산하려면 10,20, +라는 기호의 의미를 알고 있어야 하며, 10 + 20이라는 식의의미도 해석할 수 있어야 한다.

자바스크립트는 해석하고 실행하는 엔진도 사람과 유사하게 자바스크립트 코드를 실행한다. 자바스크립트 엔진이 위 코드를 계산(평가)하려면 먼저, 10, 20, + 라는 기호(리터럴과 연산자)의 의미를 알고 있어야 하며, 10 + 20 이라는 식(표현식)의 의미도 해석(파싱)할 수 있어야 한다.

자바스크립트는 먼저, + 연산자의 좌변과 우변의 숫자 값. 즉, 피연산자를 기억한다. 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다.

메모리(memory)는 데이터를 저장할 수 있는 메모리 셀(memory cell)의 집합체다. 셀 하나의 크기는 1 바이트(8비트) 이며, 컴퓨터는 세르이 크기 즉 1바이트 단위로 데이터를 저장(write)하거나 읽어(read)들인다.

Point! 각 셀은 고유의 메모리 주소(memory address)를 갖는다.

이 메모리 주소는 공간의 위치를 나타내며, 0부터 시작해서 메모리의 크기 만큼 정수로 표현된다. 예를 들어, 4GB 메모리는 0 부터 4,294,967,295(0x00000000 ~ 0xFFFFFFFF)까지의 메모리 주소를 갖는다.

Point! 컴퓨터는 모든 데이터를 2진수로 처리한다.

메모리에 저장되는 데이터는 데이터의 종류(숫자, 텍스트, 이미지, 동영상 등 )상관 없이 모두 2진수로 저장된다.

메모리 주소	메모리
0x00000000	...
0x000000F2	10 (메모리 셀)
...	...
0x00001332	20 (메모리 셀)
...	...
0xFFFFFFFF

위에서 숫자 값 10과 20은 메모리 상의 임의의 위치(메모리 주소)에 기억(저장)되고 CPU는 이 값을 읽어 들여 연산을 수행한다.

연산의 결과로 생선된 숫자 값 30도 메모리 상의 임의의 위치에 저장된다.

Point! 메모리 상의 저장되는 모든 값은 2진수로 저장된다.

메모리 주소	메모리
0x00000000	...
0x000000F2	10
...	...
0x00001332	20
...	...
0x0669F913	30
...	...
0xFFFFFFFF

성공적으로 연산이 끝났고 연산 결과로 메모리에 저장되었지만 문제가 있다.

Point! CPU가 연산해서 만들어 낸 숫자 값 30을 재사용할 수 없다.

10 + 20이라는 연산 뒤에 결과가 필요하여 만약 30을 재사용하면 메모리 주소(0x0669F913)를 통해 연산 결과 30이 저장된 메모리 공간에 직접 접근하는 방법이 있다. 하지만, 메모리 주소를 통해 값에 직접 접근하는 것은 치명적인 오류를 발생시킬 수 있다. 만약 실수로라도 운영체제가 사용하고 있는 값을 변경하면 시스템을 멈추게 하는 치명적인 오류를 야기한다.

Point! 자바스크립트는 개발자가 직접적인 메모리 제어를 허용하지 않는다.

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

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

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

*컴파일러란?

프로그래밍언어로 작성된 소스 코드를 다른 프로그래밍 언어나 기계어로 변환해주는 소프트웨어 도구입니다. 컴파일러는 소스 코드를 입력하고 받아들여 그것을 분석하고, 중간 단계를 거쳐 최종적으로 기계어로 변환하여 실행 파일을 생성합니다.

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

// 변수는 하나의 값을 저장하기 위한 수단이다.
const userId = 1;
const userName = "Lee";

// 객체나 배열 같은 자료구조를 사용하면  여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용할 수 있다.
const user = { id: 1, name: "Lee" };

const users = [
  { id: 1, name: "Lee" },
  { id: 2, name: "Kim" },
];

const result = 10 + 20;

이 떄, 연산을 통해 새로운 값 30을 생성한다. 그리고 연산을 통해 생성된 값 30은 메모리 공간에 저장된다. 이 때 메모리 공간에 저장된 값 30을 다시 읽어 들여 재사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인것이 변수이다.

값의 생성과 변수에 의 한 할당

변수이름 (식별자)	메모리 주소	메모리
	0x00000000	...
	0x000000F2	10
	...	...
	0x00001332	20
	...	...
result →	0x0669F913	30
	...	...
	0xFFFFFFFF

메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수 이름 또는 변수명이라 한다. 그리고 저장된 값을 변수 값이라고 한다. 변수에 값을 저장하는 것을 할당 또는 대입, 저장이라고 한다. 그리고, 변수에 저장된 값을 읽어 들이는 것을 참조라 한다.

요약

• 변수 이름은 사람을 위해 사람이 이해할 수 있는 언어로 값이 저장된 메모리 공간에 붙인 상징적인 이름

• 변수 이름을 사용해 참조하를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근하여 저장된 값을 반환한다.