[데브코스 Day1] 2022.10.17

📖오늘 배운  것

호이스팅

• 호이스팅이란?

     : 코드가 실행되기 전에 변수, 함수 선언이 해당 스코프의 최상단으로 끌어올려진 것 같은 현상

   > 자바스크립트는 코드 실행 전에 실행 컨텍스트를 위해 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다. 그리고 이러한 과정에서 모든 선언이 스코프에 등록된다.

 

  >변수는 선언 - 초기화 - 할당 단계를 거치는데, var 변수의 경우 선언과 함께 undefined로 초기화되어 메모리에 저장되기 때문에 참조에러가 나지 않지만 let, const 변수는 선언과 초기화가 별개로 이루어져 선언만 되고 초기화는 되지 않은 상태에서 메모리에 저장되지 않는다. 따라서 초기화되어 있지 않아 변수를 참조할 수 없다.

 

• 변수 단계

    -선언 단계 : 변수를 실행하여 컨텍스트 변수 객체에 등록한다.

    -초기화 단계 : 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보하여 변수가 undefined로 초기화된다.

    -할당 단계 : undefined로 초기화된 변수에 실제 값을 할당한다.

 

var 변수는 선언과 초기화와 함께 이루어져 변수 선언문 이전에도 접근하면 에러가 나지 않고 undefined를 반환한다. 하지만 let의 경우 선언과 초기화가 분리되어 변수 선언문에 도달했을 때 초기화와 할당이 함께 일어난다. 그래서 스코프 시작 지점부터 초기화 시작 지점(변수 선언문)까지 변수를 참조할 수 없고 이 구간을 일시적 사각지대 Temporal Dead Zone(TDZ)라고 부른다. 

 

 

 

자바스크립트에서 메모리를 다루는 방법

 :메모리는 할당 - 사용 - 해제의 단계를 거친다

   -할당: 변수를 설정하면 변수를 사용할 수 있도록 메모리가 할당된다

   -사용: 할당된 메모리에 값을 넣어 사용한다.

   -해제: 사용을 마치면 변수를 해제하여 메모리를 제거한다.

 

그렇다면 자바스크립트로는 어떻게 메모리를 정리할 수 있을까?

 : 자바스크립트에서는 Garbage Collector를 이용하여 메모리를 정리한다.

    >Garbage Collector란 Garbage Collection 이라는 자동 메모리 관리 알고리즘을 토대로 만들어진 객체로 사용하지 않는 메모리를 해제하는 역할을 한다.

 

#변수를 설정할 때 메모리가 할당되는 과정

let name = 'zero';

이러한 변수를 설정하면 변수 name에 고유 식별자를 생성하고 메모리 주소를 할당한다. 그리고 그 메모리 주소에 'zero'라는 값을 넣는다. 

즉, 우리가 사용하는 변수는 값 그 자체를 가리키는 것이 아니라 값이 저장되어 있는 메모리 주소를 가리키는 것!

 

 

만약 변수를 변경한다면 어떻게 될까?

let name = 'zero';
name = 'yj';

처음에 메모리에 저장된 'zero'가 변경되는 것이 아니다. 

'yj'가 저장된 새로운 메모리 주소가 생기고 name은 이제 'zero'의 메모리 주소가 아니라 'yj'의 메모리 주소를 참조하게 되는 것이다. 

이렇게 값이 변경되는 것이 아니라 새로운 주소에 값이 생성되는 이유는 자바스크립트에서 원시 타입은 값의 변경이 불가능하기 때문이다. 

 

그럼 이제 'zero'의 메모리 주소는 더 이상  참조되지 않는다. 따라서 Garbage Collector에 의해 정리된다. 이렇게 정리될 때 사용되는 알고리즘이 'Mark and Sweep Algorithm'인데 이 알고리즘은 더 이상 해당 주소에 닿을 수 없을 때 그 주소를 제거하는 알고리즘이다. 따라서 이러한 알고리즘에 의해 'zero'가 담겨 있는 메모리가 제거된다.

 

 

 

메모리 구조

프로그램이 운영체제로부터 할당받는 메모리 공간은 4가지가 있다.

1. 코드 영역

2, 데이터 영역

3. 스택 영역

4. 힙 영역

 

-코드 영역 : 실행되는 프로그램의 코드가 저장되는 영역

-데이터 영역: 전역 변수와 정적 변수가 저장되는 영역

-스택 영역: 함수 호출과 관련된 지역변수와 매개변수가 저장되는 영역

 *자바스크립트에서는 정적이고 간단한 값이 할당된 변수도 저장된다.

-힙 영역: 사용자가 관리하는 메모리 참조 타입이 저장되는 영역

 *자바스크립트에서는 객체, 배열과 같이 크기가 동적으로 변할 수 있는 참조 타입의 값을 저장한다.

 

ex) 배열을 생성할 경우

const arr = [];
arr. push(1);
arr. push(2);
arr. push(3);

콜스택에는 arr = (메모리 주소, 힙에서 생성된 배열 메모리 주소 참조) 이렇게 저장되고

힙에서는 (메모리 주소, [])이렇게 배열 영역이 생성된다.

 

이런 식으로! 그리고 이 뒤에 값을 push 하게 되면 힙에 저장된 참조 타입의 값이 변경되는데 이는 콜스택에 저장된 arr자체를 변경하는 것이 아니라 힙에 있는 참조 타입을 변경하는 것이기 때문에 가능하다.

 

 

 

💭배운 점

어렴풋이 알고 있었던 힙과 스택의 개념, 어떤 식으로 메모리를 할당받고 어떻게 해제되는지 알 수 있어서 좋았다. 호이스팅의 경우도 이전에는 var 변수와 함수만 호이스팅되고 let과 const는 안된다! 라고 알고 있었는데 이번 기회에 찾아보면서 사실은 모든 선언이 호이스팅되고 초기화의 여부에 따라 참조에러가 나는가 안나는가로 나뉜다는 것을 알게 되었다.

 

 

 

💻앞으로 배우고 싶은 것

-실행 컨텍스트에 대해 알아보기

-클로저에 대해 알아보기

 

 

참고자료

-프로그래머스 데브코스 강의

-https://url.kr/k8w6vi