자바스크립트

변수(variable)

funnyjs 2022. 2. 17. 00:02

 

더보기
더보기

컴퓨터는 모든 데이터를 0과 1로 바꿔서 기억한다. 0 또는 1 하나의 값을 표현할 수 있는 하나의 메모리 조각을 비트(bit)라고 한다. 하지만 비트 단위로만 0과 1 밖에 표현하지 못하므로 매우 비효율적이기 때문에 이를 여러개씩 묶어 표현할 수 있는 바이트(byte)라는 단위가 생기게 되었다. 바이트는 8개의 비트로 총 2⁸(=256) 가지의 값을 표현할 수 있다.

비트와 바이트

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

메모리와 메모리 셀

각 메모리 셀은 고유한 메모리 주솟값을 갖고 이 메모리 주소는 메모리 공간의 위치를 나타낸다. 하지만 메모리 주소를 통해 값에 직접 접근하는 것은 매우 위험한 일이므로 코드가 실행되기 전까지는 값이 어디에 저장될지 알 수 없다. 이 때문에 프로그래밍 언어에서는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 사용하기 위해 변수라는 것을 사용한다.

 

⭐ 변수와 식별자

변수 사용 예시

변경 가능한 데이터가 담길 수 있는 공간변수라고 하고, 이 변수를 식별할 수 있는 고유한 이름식별자(변수 이름), 변수에 저장된 변할 수 있는 값을 변수 값이라고 한다.

변수를 만들고 이 변수의 식별자를 지정하는 것을 선언, 변수에 값을 저장하는 것을 할당, 변수에 저장된 변수 값을 읽어 들이는 것을 참조라 한다.

 

🧷 선언

  1. 값을 저장하기 위한 메모리 공간을 확보
  2. 식별자와 확보된 메모리 공간의 주소를 연결

식별자는 변수를 식별하는 데 사용하는 고유한 이름을 말한다. 이를 위해 식별자는 메모리 주소를 기억하며 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺는다. (이 매핑 정보도 따로 메모리에 저장해야 식별자가 기억하는 메모리 주소로 데이터에 접근할 수 있다.) 

자바스크립트에서 변수를 선언하려면 var, let, const 키워드를 사용해야 한다. 자바스크립트 엔진은 이 키워드를 만나면 뒤에 오는 식별자로 새로운 변수를 선언한다.

 

더보기
더보기

💥호이스팅💥

console.log(b); // undefined
var b;
b = 10;

자바스크립트 엔진에서 소스코드를 한 줄씩 순차적으로 실행한다면 변수를 선언하기 전에 사용한다면 에러가 나지 않을까? 하지만 에러가 나지 않고 변수가 정의되지 않았다는 undefined가 출력된다. 그 이유는 자바스크립트 엔진은 소스코드를 실행하기 앞서 평가 과정을 거치면서 변수 선언을 퐇마한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다. 즉, 변수 선언은 소스코드가 한 줄씩 순차적으로 실행되는 '런타임' 시점이 아니라 그 이전 평가 과정에서 먼저 실행되게 되므로 변수를 선언하기 전에 사용해도 참조 에러가 발생하지 않는 것이다. 이처럼 선언문들이 코드의 맨 위로 끌어올려져 동작하는 것을 자바스크립트의 호이스팅(hoisting)이라고 한다. (hoist라는 단어가 감아올리다 라는 뜻이다.)

 

🧷 할당

  1. 데이터를 저장하기 위한 별도의 메모리 공간을 확보해 데이터를 저장
  2. 데이터를 저장한 주소를 변수 영역에 저장

변수 영역에 값을 직접 대입하지 않고 별도의 메모리 공간을 확보해 데이터를 저장하는 이유는 디에터 변환과 메모리를 더욱 효율적으로 관리하기 위해서이다. 

var animal;
animal = 'dog';
animal = 5;

animal 이라는 변수에 'dog' 라는 값을 할당한 후 5를 재할당하는 과정을 메모리 영역에서 보면

주소 0x00000000 0x00000001 0x00000002 ...
데이터   이름 : animal
값 : 0x000FB154
   
주소 ... 0x000FB153 0x000FB154 0x000FB155 ...
데이터   undefined 'dog' 5  

일단 animal 이라는 변수를 선언하면 임의의 데이터 영역(위 표에서는 0x00000001)에 식별자와 undefined 값이 저장된 주소가 매핑된 정보가 저장된다. 'dog'라는 값을 animal 변수에 할당하면 새 주소에 데이터 'dog'를 저장하고 그 주소를 0x00000001 에 다시 매핑한다. 그리고 숫자 5를 다시 재할당하면 이전 값이 저장되어 있던 메모리 공간을 지우고 새로 저장하는 것이 아니라 다시 새로운 메모리 공간을 확보하고 그 메모리 공간에 숫자 5를 저장하고 다시 매핑한다.

'자바스크립트' 카테고리의 다른 글

자바스크립트의 this  (0) 2022.02.27
var, let, const 비교  (0) 2022.02.24
자바스크립트 연산자  (0) 2022.02.20
자바스크립트 데이터 타입  (0) 2022.02.18
자바스크립트의 역사  (0) 2022.02.15