[TIS]JS의 메모리할당 공부ing

Violet Lee·2020년 8월 8일

javascript

목록 보기

5/24

먼저, 자바와 JS의 memory 관리는 어떻게 다를까..?

나는 어제, 엔지니어분이 설명해주신 JS의 GC에 대한 간략한 설명을 들으면서, 좀더 JS의 메모리구조를 알고싶어졌다. JS를 튜닝카로 생각하면, 더 많은 기능을 자유롭게 붙일수있다는 것이다. 흠.. 더 자세한 비교를 공부하고싶어졌다. 한때 자바 공부를 할 때도, 메모리구조를 공부하고나면 더 그 언어가 나와 가깝게 느껴지고, 내가 변수 하나를 다루는데에도 이해가 가고 더 소중하게 다루었기 때문이다.(+ 파헤치는 과정이 재밌었다,,)

나는 왜 두 언어의 메모리할당에 대해 비교해봐야 겠다고 생각했을까

이유는 뭐 없다. 내가 헷갈려서이다. 새 언어를 공부할때, 이전에 다른 언어를 공부했다면 장점과 단점이 생긴다. 비슷한 문법구조와 메모리할당방식을 가질때, 익숙한 느낌이 들어서 접근이 쉬워지긴 하지만, 자꾸 다른 언어의 문법대로 생각하게 되서 혼란이 온다. 나는 언젠가 한번 정리를 해야겠다고 생각했다.

우선 내가 자바와 JS의 메모리구조가 비슷하다고 생각했던 이유는..

두 언어가 모두 객체지향적이고, 그러므로 객체들이 문맥 안에서 서로 관계를 갖도록 코딩을 해야 한다. 즉, 두 언어는 모두 상속(inheritance), 캡슐화(encapsulation)등등의 기법을 사용한다. 그리고 객체지향적이기 때문에 immutable, mutable한 객체로 나누어 사용한다는것이다. 사실 제일 주요한 이유는.. "사용하지 않는 메모리의 반환방식" 때문이었다. 그 외에는 세부적으로 달라서..
왜냐면 둘다, 객체가 참조되지 않는 경우 GC의 대상이 되는방식이 비슷하기 때문이다.

그 중, 메모리 생명주기의 공통성

일단, 프로그래밍 언어와 관계가 없어도, 있어도 거의 메모리 생명주기가 이와 비슷하다.

           그림 01. [참고문헌 2> 메모리 생명주기]

간단하게 설명하자면,

메모리 할당(allocate)
: 프로그램이 사용할 수 있도록, OS가 메모리를 자동으로 할당해준다.
저수준 언어에서는 개발자가 처리해줘야 했지만(명시적으로) 고수준언어(JS등)에서는 개발자가 신경쓸 필요가 없는 부분이다.
메모리 사용(use)
: 이제 할당된 메모리를 실제로 프로그램이 사용하는 단계이다. 개발자가 코드상에서 할당된 변수를 사용함으로써, 읽기, 쓰기작업이 이루어진다고 한다. 여기서 읽기, 쓰기 작업이 과연 무엇을 읽고, 쓰는것일까? 궁금해서 검색해보니.. 해당 객체의 속성이나 변수의 값을 해당 메모리안에서 읽거나, 사용할때를 말하는거라고 한다. 이 부분은 함수에 인수를 넘겨줄때에도 일어나는 작업이라고 한다!
메모리 해제(release)
: 프로그램에서 더이상 필요하지 않는 메모리전체를 반환해주어, 재사용이 가능하게 해주는 단계이다. 여기서 GC가 사용될것이다.(+ 자세한건 다음에.) 이 부분 역시, 저수준언어에서는 명시적으로 처리해줘야 한다고 한다.

다른 이유는..

그러나 자바는 JRE와 JDK를 설치하여 JVM을 이용해, JAVA가 OS에 구애받지 않고 메모리 재사용을 가능하게 해 준다.
JVM위에서, GC라는 이름의 소프트웨어를 통해, 더 이상 참조되지 않아 사용안되는 객체 탐색후 삭제하고, 삭제된 객체의 메모리를 반환하면서 재사용하게 되는데,
JAVA는 이 과정이 Heap area에서 또 세부적으로 영역을 나누어 이루어지게 되는것으로 알고있다.
나는 이 과정을 공부하면서, 자바의 런타임 데이터 area가 정말 흥미로웠다.
(나는 stack area에서 임시로 저장되는 값들에 대해 더 공부해야 한다.)

자바스크립트는 JVM을 사용하지 않아도, 웹브라우저 위에서 실행되고, 별도의 환경설정은 필요하지 않다.

JS의 메모리 할당(*Mozila 참고)

값 초기화

var n = 123; // 정수를 담기 위한 메모리 할당
var s = 'azerty'; // 문자열을 담기 위한 메모리 할당

var o = {
  a: 1,
  b: null
}; // 오브젝트와 그 오브젝트에 포함된 값들을 담기 위한 메모리 할당

// (오브젝트처럼) 배열과 배열에 담긴 값들을 위한 메모리 할당 
var a = [1, null, 'abra'];

function f(a){
  return a + 2;
} // 함수를 위한 할당(함수는 호출 가능한 오브젝트이다)

// 함수식 또한 오브젝트를 담기위한 메모리를 할당한다. 
someElement.addEventListener('click', function(){
  someElement.style.backgroundColor = 'blue';
}, false);

.........................................................
var obj1 = {};
var obj2 = obj1;

obj1.value = 100;

console.log(obj1); // { value: 100 }
console.log(obj2); // { value: 100 }

함수 호출을 위한 할당

함수 호출의 결과 메모리 할당이 일어나기도 한다.

var d = new Date(); // Date 개체를 위해 메모리를 할당

var e = document.createElement('div'); // DOM 엘리먼트를 위해 메모리를 할당한다.

메소드가 새로운 값이나 오브젝트를 할당하기도 한다.
immutable한 값을 새로 사용할때에는, 그 값의 공간의 '참조값'만 새 공간에 저장한다.

var s = 'azerty';
var s2 = s.substr(0, 3); // s2는 새로운 문자열
// 자바스크립트에서 문자열은 immutable 값이기 때문에,
// 메모리를 새로 할당하지 않고 단순히 [0, 3] 이라는 범위, 즉 객체의 참조값(주소)만 저장한다. 이렇게 알아간다..

var a = ['ouais ouais', 'nan nan'];
var a2 = ['generation', 'nan nan'];
var a3 = a.concat(a2);
// a 와 a2 를 이어붙여, 4개의 원소를 가진 새로운 배열

하단 부터는 참고문헌 3의 글 중, 변수의 경우를 완전히 인용하였다. 함수부터는 참고문헌3을 참고하길 바란다. 예시를 정말 잘 설명해주셨다. 이후에 예시코드는 내가 다시 써볼 생각이다! *글에 사용된 사진에도 출처 문헌을 적어두었다.

mutable 객체의 메모리 참조

: 자바스크립트에서 변수를 선언하고 값을 할당하면, 값이 메모리의 어딘가에 위치하게 되는데 이곳을, immutable 영역과 mutable 영역이라고 부른다.(자바와 비슷하다.)

String(문자열), Number(숫자), Boolean(참/거짓), undefined, null: immutable(변경불가능한) 객체.
반대로 Function(함수), Array(배열), Object(객체): mutable(변경가능한) 객체.(immutable하지 않은 모든 것들)

ex)

var obj1 = {};
var obj2 = obj1;

obj1.value = 100;

console.log(obj1); // { value: 100 }
console.log(obj2); // { value: 100 }

                    그림 02. [참고문헌 3> mutable 객체]

immutable 객체의 메모리 참조

ex)

var num1 = 0;
var num2 = num1;

num1 = 100;

console.log(num1); // 100
console.log(num2); // 0

                      그림 03. [참고문헌 3> immutable 객체]

사실, GC에 대해 더 알아보고 정리를 하고싶었지만,(사실 객체지향적 언어에서 GC가 하는일은 비슷하다) 그러려면 따로 글을 작성해서 거기에 자세히 푸는게 좋을것 같아, 이후는 다른 포스트에서 다루도록 하겠다. 우선 JS의 메모리할당만 이 글에서 다루고, JS의 메모리구조나 GC가 하는일은 다음 포스트에서 다룰것이다. + 참고문헌3을 통해, 클로저는 외부함수안에 꼭 함수가 들어가지 않는다는 말이 어떤의미인지 알수있었다.

만약 제가 작성한 포스트에 잘못된 정보가 기술되어 있다면, 최대한 피드백을 해주는게 제게 더 도움이 되니, 언제든 댓글을 달아주시면 좋겠습니다..! 저희 같이 공부합시다. ㅎㅎ