Jun 개발노트

자바스크립트의 메모리 관리

2020-07-14

메모리 관리

  • 객체가 생성되었을 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 자동으로 해제한다(가비지 컬렉션에 의해서)
  • 개발자가 메모리 관리를 하지않고 가비지 컬렉션에 위힘한다.

메모리 생명주기

  • 필요할때 할당된다.
  • 사용한다 (읽기, 쓰기)
  • 필요없어지만 해제한다.
    • 1,3번째 단계는 저수준 언어인 C같은 언어에서는 포인터를 통해 조절 할 수 있지만, 자바스크립트 같은 고수준 언어에서는 2단계만 사용하고 브라우저에게 위임한다.

자바스크립트에서 메모리 할당

  1. 초기화 - 값을 선언할 때 자동으로 메모리 할당
    var n = 123; // 123을 담기 위한 메모리 할당
    var s = 'hello' // 'hello'을 담기 위한 메모리 할당
    
    var o = {
        a : 1,
        b : null
    } // 오브젝트와 오브젝트의 속성값들을 담기 위한 메모리 할당
    
    var a = [1, null, 'hello']; // 객체와 같이 배열과 배열의 값들을 담기 위한 배열 할당
    
    function f(a) {
      return a + 2;
    }   // 함수를 위한 할당( = 호출 가능한 오브젝트 )
    
    // 함수식 또한 오브젝트를 담기위한 메모리를 할당한다. 
    someElement.addEventListener('click', function(){
      someElement.style.backgroundColor = 'blue';
    }, false);
    
  2. 함수 호출시
    • 함수 호출의 결과 메모리 할당이 일어나기도 한다.

      var d = new Date(); // Date 개체를 위한 메모리 할당
      
      var e = document.getElementById('div'); // DOM 엘리먼트를 위해 메모한다
      
    • 메소드가 새로운 값이나 오브젝트를 할당하기도 한다.

      var s = 'abcdef';
      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. 변수 사용시
    • 할당 된 메모리를 사용하는것은 읽기/쓰기
    • 변수나 오브젝트의 속성 값일 읽고 쓸때 메모릴 읽고, 함수 호출시 함수에 인자를 넘길때도 사용한다.

가비지 컬렉션에 대해서

  1. Reference-counting - 더 이상 참조하지 않는 오브젝트를 가비지라 부르며 대상을 메모리 해제 시켜준다. - 단점은 서로 참조가 되있다면 계속해서 참조가 해제가 안되기 때문에 계속해서 남아 있어 메모리 누수가 발생함
    function f(){
      var o = {};
      var o2 = {};
      o.a = o2; // o는 o2를 참조한다.
      o2.a = o; // o2는 o를 참조한다.
    
      return "azerty";
    }
    
    f();
    
  2. Mark And Sweep - 현재 쓰이는 알고리즘