Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archives
Today
Total
관리 메뉴

pgg-dev

[JavaScript] 자바스크립트 메모리와 데이터 본문

JavaScript

[JavaScript] 자바스크립트 메모리와 데이터

pgg-dev 2020. 3. 3. 00:14

메모리 영역에서 자바스크립트의 데이터가 처리되는 과정을 살펴보자.

 

메모리와 데이터에 관한 배경 지식

비트와 바이트

컴퓨터는 모든 데이터를 0 또는 1로 변환하여 기억한다.

0 또는 1로 표현할 수 있는 하나의 메모리 조각을 비트(bit) 라고 한다.

메모리는 매우 많은 비트로 구성되어 있고, 각 비트는 고유한 식별자를 통해 위치를 확인한다.

그런데 0과 1만 표현할 수 있는 비트 단위로 위치를 확인하는 것은 비효율적이다.

비트를 몇개씩 묶어 하나의 단위로 만들면 표현할 수 있는 값의 범위도 늘어남과 동시에 검색 시간도 줄일 수 있다.

하지만 너무 많은 비트를 한 단위로 묶으면 낭비되는 비트가 생길 수도 있다.

이런 고민의 결과로, 크게 문제 되지 않을 적정한 공간을 묶은 것이 바이트(byte) 이다.

1바이트는 8비트로 구성되어있다.

 

식별자와 변수
  • 변수(variable) : 변할 수 있는 무언가, 무언가란 데이터를 말한다.
  • 식별자(identifer) : 데이터를 식별하는 데 사용하는 이름, 즉 변 수명이다.

각 비트는 고유한 식별자를 지닌다.

바이트 역시 시작하는 비트의 식별자로 위치를 파악할 수 있다.

모든 데이터는 바이트 단위의 식별자, 더 정확하게는 메모리 주소 값을 통해 서로 구분하고 연결한다.

 

 

변수 선언과 데이터 할당의 동작 원리

변수 선언
1
var a;

위와 같이 변수 선언을 통하여, 변할 수 있는 데이터를 만든다.

이 데이터의 식별자는 a로 한다.

변할 수 있는 데이터이기 때문에, 선언할 때 undefined 이더라도 나중에 값을 할당할 수 있다.

즉, 변수란 변경 가능한 데이터가 담길 수 있는 공간이다.

 

주소 1003 1004
데이터  

이름 : a

값 :

   

명령을 받은 메모리는 비어있는 공간을 확보한다.

임의로 1003번으로 정하고, 이 공간의 이름(식별자)을 a라고 지정한다.

여기까지 변수 선언 과정이며, 이후에 사용자가 a에 접근하고자 하면 컴퓨터는 메모리에서 a라는 이름을 가진 주소를 검색해 해당 공간에 담긴 데이터를 반환한다.

 

데이터 할당
1
2
3
4
var a;
= "abc";
 
var a = "abc";

1행, 2행과 같이 선언과 할당을 나누어 명령하든, 4행처럼 한 문장으로 명령하든 자바스크립트 엔진은 결국 같은 동작을 수행한다.

메모리에서 비어있는 공간을 확보하고 그 공간의 이름을 설정하는 선언 과정은 앞부분과 같다.

그리고 a라는 이름을 가진 주소를 검색해서 그곳에 문자열을 할당할 것 같지만, 실제로는 문자열을 직접 저장하지 않는다.

데이터를 저장하기 위한 별도의 메모리를 다시 확보한다.

그 공간에 문자열 'abc' 를 저장하고 그 주소를 변수 영역에 저장한다.

 

변수 영역 주소 1003 1004 1005
데이터  

이름 : a

값 : @5004

     
데이터 영역 주소 5003 5004 5005
데이터     'abc'    
  1. 변수 영역에서 빈 공간(@1003)을 확보한다.
  2. 확보한 공간의 식별자를 a로 지정한다.
  3. 데이터 영역의 빈 공간(@5004)에 문자열 'abc'를 저장한다.
  4. 변수 영역에서 a라는 식별자를 검색한다. (@1003)
  5. 저장된 문자열의 주소(@5004)를 @1003 공간에 대입한다.
변수와 데이터 영역을 분리하는 이유

데이터 변환을 자유롭게 할 수 있게 함과 동시에 메모리를 더욱 효율적으로 관리하기 위해서이다.

숫자형 데이터는 8바이트를 확보하지만 문자열은 규격이 없다.

한 글자마다 영어는 1바이트, 한글은 2바이트 등으로 각각 필요한 메모리 용량이 가변적이며, 글자 수 또한 가변적이다.

각 영역을 분리하지 않았다고 가정하면, 변환된 데이터의 크기에 맞게 해당 공간을 늘려야 한다.

해당 공간이 중간에 있다면 뒤에 저장된 데이터를 전부 뒤로 옮기고 이동시킨 주소를 식별자에 다시 연결해야 한다.

이처럼 컴퓨터가 처리해야 될 연산이 많아 지므로 비효율적이다.

즉, 미리 확보된 공간(변수 영역)에 데이터가 맞지 않으면 비효율적으로 처리되기 때문에 별도의 데이터 영역 공간을 나누어 처리하는 것이 최적이다.

 

변수 영역 주소 1003 1004 1005
데이터  

이름 : a

값 : @5005

     
데이터 영역 주소 5003 5004 5005
데이터     'abc' 'abcdef'  

문자열을 'abcdef'로 변경하면 'abc;가 저장된 공간에 재할당하지 않고 새로운 공간에 변경된 문자열을 저장한다.

그 주소를 변수 공간에 연결한다. 

기존 데이터(@5004)는 연결된 변수 영역이 없으면 가비지컬렉터(garbage collector)의 수거 대상이 된다.

 

또 다른 예시로, 중복 값 처리에 있어서도 영역 분리를 통해 데이터의 처리 효율을 높일 수 있다.

500개의 변수를 생성해서 모든 변수에 숫자 5를 할당한다고 가정하자.

각 변수를 별개로 인식하려면 500개의 변수 공간을 확보해야 한다.

(자바스크립트에서 숫자의 경우 64비트, 즉 8바이트를 확보한다.)

각 변수 공간마다 숫자 5를 할당하려면 8바이트씩 500개의 공간, 즉 4000바이트가 필요하다.

대신 5를 별도의 공간(데이터 영역)에 한번 저장하고 해당 주소를 변수 공간에 입력하면?

주소 공간 크기를 2바이트라고 한다면 1008바이트가 필요하다. (500 *2+8)

즉, 변수 영역과 데이터 영역을 분리하면 중복 데이터에 대한 처리 효율성 이 높아진다.

'JavaScript' 카테고리의 다른 글

[JavaScript] 스코프(Scope)  (0) 2020.02.04
[ECMAScript6 / ES6] Map , Set  (0) 2020.01.22
[JavaScript] 이벤트 루프(Event Loop)  (0) 2020.01.13
[JavaScript] 호이스팅(Hoisting)  (0) 2020.01.09
[ECMAScript6 / ES6] Promise  (0) 2020.01.08
Comments