모던 자바스크립트 Deep Dive(변수, 식별자)

 

변수란?

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

 

이를 이해하기 위해선 컴퓨터 구조를 알아야 할 필요성이 있다.

우리가 연산을 실행할 때 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용하여 데이터를 기억한다.

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

요렇게 8개(8바이트)의 공간이 메모리 셀 하나에 있다

 

메모리 셀 하나의 크기가 8비트이고, 이를 통해 고유의 메모리 주소를 갖는데 이 위치를 표현하기 위해 메모리의 크기만큼 정수로 표현한다. (0x0000000~0xFFFFFFFF) 8비트이기 때문에 8자리 숫자까지 간다.

참고로 여기서 처리되는 데이터는 모두 2진수로 처리된다.

 

내가 만약 1+2의 연산을 하면, 내가 입력한 숫자 1과 2는 임의의 위치에 기억(저장)되며 메모리 주소를 가진다. CPU는 이 값을 읽어들여서 연산을 하는 것.

이것만 봐도 왜 컴퓨터를 맞출 때 메모리(램)과 cpu가 중요한지 이해할 수 있다.

 

폰 노이만 구조(컴퓨터 구조)

하지만 우리가 프로그래밍 언어로 계산기를 돌리려고 연산을 하는 것은 아닐 것이다.

우리는 연산을 통해 가져온 값을 써야 한다. 1+2의 연산값인 3은 1과 2와 같이 개별적인 메모리 주소를 가지고 있다. 이 저장된 메모리 공간에 직접 접근하는 것 외에는 30을 다시 가져올 방법이 없다.

하지만 이 메모리 공간에 직접적으로 접근하면 가지는 리스크가 크다.

 

---

1. 나중에 운영체제가 사용하고 있는 값을 바꾸거나 하는 등의 변화가 생긴다면 심한 경우에 시스템을 멈추게까지 할 수 있다.

 

2. 값이 가지는 메모리 주소는 임의로 결정되는 것이기 때문에 다시 코드를 실행하면 값이 저장될 메모리 주소가 변경된다.

---

그래서 자바스크립트는 직접적인 메모리 제어를 허용하지 않는다. 대신 해당 값을 기억하기 위해 기억하고 싶은 값을 변수(variable)라는 메커니즘을 통해 저장된 값을 읽어들여 다시 사용할 수 있게 만든다.

 

즉 변수는 값의 위치를 가리키는 이름이라는 것. 우리는 이 변수를 설정하여 컴파일러&인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행되도록 만드는 것이다. 그러면 직접적인 메모리 주소에 대한 접근이 필요가 없기 때문에 안전하다.

 

변수는 하나의 값을 저장하기 위해 사용하지만, 만약 여러 값이 필요하다면 배열이나 객체같은 자료구조를 통해 사용할 수 있다.

var name = 'Minhyung'
var age = 24;

이게 기본적인 변수의 사용

var user = { name : 'Minhyung, age : 24}; //객체
var users = ['minsu','cheolsu','Minhyung']; //배열
var users = [
  {name : 'Minhyung', age : 24},
  {name : 'Minsu', age : 20},
]; //객체배열

이게 한 변수에 여러 개의 값을 넣을 때 사용하는 법. 객체와 배열을 사용하면 된다.

 

var은 변수 선언, 그 뒤에는 변수 이름을 적는다. 저장된 값은 변수 값이라고 한다

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

 

우리는 변수 이름을 우리 입맛에 맞게 마음대로 쓰고 나중에 편하게 사용할 수 있으며, 가독성이 높아지고 값의 의미를 명확하게 적어놓을 수도 있다.

 

식별자

이름대로 해석하자면 어떤 값을 구별해서 식별할 수 있는 고유한 이름이다.

식별자는 저장되어 있는 메모리 주소를 기억하여 나중에 해당 식별자를 불러올 때 메모리 주소에서 값을 가져온다. 즉, 메모리주소와 식별자는 매핑 관계이다.

여기서 중요한 점은 값을 저장하는 개념이 아니라 메모리의 주소를 기억한다는 것이다. 그러니 메모리 주소의 이름인 셈.

 

출처 : TheAILearner

그림으로 이해하면 편하다. 메모리 주소에 값이 있고 우리는 그 주소에 이름을 붙이는 것이다.

주의해야 할 점은 식별자가 변수만을 포함하고 있지는 않다는 점이다.

식별자는 변수,함수,클래스들의 이름이 될 수 있다. 크게 보자면 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름이라고 보면 된다.

식별자는 선언(declaration)을 통해 자신의 존재를 알리고 이를 통해 메모리 주소를 저장할 수 있다.

 

변수 선언

변수를 선언하게 되면 값을 저장하기 위한 메모리 공간을 확보(allocate)하고 변수 이름과 확보된 메모리 공간의 주소를 연결(name binding)하여 값을 저장할 수 있게 준비하는 것이다. 확보된 메모리 공간은 선언을 통해 보호되므로 다른 메모리가 들어올 수 없다.

 

변수 선언은 var, let, const 키워드를 통해 사용한다.

ES5까지는 var만 됐지만 ES6에서는 let, const가 추가되었다.

블록 레벨 스코프(block-level scope)를 지원하지 않고 함수 레벨 스코프(function-level scope)를 지원하여 의도치않게 전역 변수가 선언되는 var의 단점을 보완한 let, const를 쓴다.