ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JS] 콜 스택과 메모리 힙
    카테고리 없음 2024. 4. 15. 11:30

    우리가 평소에 자바스크립트에서 선언하는 변수, 상수, 배열, 객체들은 어디에 저장될까?

     

    콜 스택, 메모리 힙이란?

    자바스크립트 엔진은 Memory Heap과 Call Stack으로 구성되어 있다.

    자바 스크립트는 단일 스레드 언어로 Call Stack도 하나이다.

    즉 하나씩 콜스택이 처리한다는 의미이다.

     

    콜 스택(Call Stack)이란

    원시 타입(숫자, 문자열 등) 데이터가 저장된다.

    실행 콘텍스트를 통해

     

    1) 변수 이름 저장,

    2) 스코프 체인 및 this 관리,

    3) 코드 실행 순서 관리 등을 수행,

     

    원시타입

    콜스택 메모리에는 단순 변수와 같은 원시 타입 데이터가 저장되는데, 자바스크립트에서 원시타입이란

    string, number, boolean, null, undefined을 말한다.

    const a = 'Hello World';

     

    변수 a는 콜스택 영역에 있는 a의 주소를 읽고, 그 콜스택 영역에 그대로 'Hello World'라는 값 자체가 저장되어 있다.

    원시타입은 콜스택 영역에 바로 저장된다.

    메모리 힙(Memory Heap)

    참조 타입(객체, 배열 등) 데이터가 저장된다.

    메모리 할당이 일어나는 곳.

     

    참조 타입

    객테와 배열 같은  참조타입 데이터는 힙 영역에 저장되고, 자바스크립트에서 참조타입은

    Array. Object, Function 등이 있다.

    const b = [1,2,3];
    const c = {id:"이정우",pw:123};
    const d = function() {console.log("하이")};

     

    참조타입 변수들도 원시타입과 마찬가지로 콜스택에 각각의 주소를 읽고 있는데, b를 예로 들어보겠다. 변수 b의 콜스택 값에는 [1,2,3]이라는 배열이 바로 들어있는 게 아닌 메모리 Heap안에 저장된 [1,2,3]의 주소가 들어있다. 다른 블로그에서 쉬운 예시를 발견해 적어보겠다.

    그분은 Heap을 '빌라'라고 표현하고 b의 콜스택 주소를 살펴보니 "Heap빌라의 201호로 가라"라는 데이터가 있고 실제 Heap빌라 201호에는 [1,2,3]이라는 데이터가 있다. 라고 생각하면 이해하기 더 쉬울 것이다

    이해를 돕기위한 사진

    const /  let

    let과 const의 차이는 변수인지 상수인지의 차이인건 대부분 개발하는 사람이라면 알 것이다.

    const obj = {
    	id: '차은우',
        tall: '185'
    };
    
    obj.id = '송강';
    console.log(obj); // ???

     

    위의 코드를 실행했을 때 콘솔에는 어떻게 나올까?

     

    답은 id가 송강으로 바뀌어서 나온다. const로 선언된 obj의 데이터가 변경되었는데도 왜 에러가 발생하지 않고 정상적으로 작동하는 것일까? 그 이유는 변경 유무는 데이터의 값이 아니라, 콜 스택의 값을 기준으로 판단하기 때문이다.

    그렇기 때문에 원시타입의 데이터나 힙영역의 주소는 변경할 수 없지만, 실제 참조되고 있는 값은 바뀔 수 있다.

     

    가비지 컬렉션

    그럼 만약, 변수 a가 let으로 선언되었다고 가정해 보자.

    let a = 'Hello World';
    a = 'This is yoy';

     

    그럼 더 이상 콜스택에 남아있던 원시타입 데이터인 'Hello World'는 사용되지 않으므로, 가비지 컬렉터가 삭제시킨다.

    이와 같은 맥락으로 로컬 스코프를 떠난 후 해당 스코프의 변수가 외부 스코프에서 참조되지 않을 때도 나중에 메모리에서 해제된다.

    우리말이 잘 이해가 가지 않았지만 코드를 보고 금세 이해해 버렸다!!

    function foo() {
        var localVar = "I'm a local variable!";
        return localVar;
    }
    
    function bar() {
        var result = foo();
        console.log(result); 
    
    }
    
    bar();

     

    foo함수가 실행되면 lovalVar라는 변수가 생성된다. 그러나 foo함수가 종료되면 localVar에 대한 참조가 사라지고 이후 실행되는

    bar함수에서 localVar에 더 이상 접근 할 수 없다. 이 시점에서 localVar는 더이상 칠요하지 않은 상태가 되기 때문에 가비지 컬렉터에 의해 삭제된다.

Designed by Tistory.