JavaScript에서의 데이터타입 2 _기본형과 참조형

JavaScript에서의 데이터타입 2 _기본형과 참조형

코어 자바스크립트(정재남 저) 책을 기본으로 하여 자바스크립트를 공부하면서 내용을 정리하고자 한다.


01 데이터타입



기본형 데이터


기본형 데이터는 모두 불변값이다!

  • 변수와 상수

    • 바꿀수 있는 값 = 변수
    • 바꿀수 없는 값 = 상수

자바스크립트를 공부하면서 변수와 상수 얘기는 많이 들었지만 정확하게 어떤 차이가 있는지에 대해 알지 못했다.

위의 정의대로 변경 가능 유무 정도만으로 이해하고 넘어갔는데 좀 더 알아보고자 한다.


변수와 상수를 구분하는 기준 : 변수 영역의 값의 재할당 여부

변수와 상수를 구분하는 것의 핵심은 변수를 선언할 때 변수 영역의 공간을 생성하고 이름과 값을 저장하는데

이 과정에서의 의 변경 가능 여부이다.

변수

let name = "Harry";
name = "Harry Potter";


변수

  • 다음과 같이 값을 ‘Harry Potter’로 변경하는 경우, 변수 영역의 값이 새로운 데이터의 주소값으로 재할당된다.

    변수는 변수 영역의 값을 재할당 할 수 있다.

상수

const name = "Harry";
name = "Harry Potter";
  • 위의 구문은 에러를 발생시킨다.


상수 에러


상수

  • 상수는 변수와 다르게 한 번 선언한 후 변수 영역의 값을 변경할 수 없다.

    데이터 주소값의 재할당을 할 수 없는 것이다.


변수와 상수의 구분 : 변수는 데이터 주소값의 재할당이 가능한 반면 상수는 한 번 선언하면 그 데이터 주소값을 변경할 수 없다.

변수 영역의 차이


불변값

자, 그럼 불변값은 무엇일까?


 불변성의 여부를 판단하는 것은 `데이터 영역` 부분이다.
let name = "Harry";
name = name + " Potter";


불변성1

  • name 이란 변수를 선언하고 ‘Harry’ 라는 데이터를 할당하였다.

    그 후 Potter를 추가하면 기존의 데이터에 추가하여 변경할까?

    
      아니다.
    
    


  • 새로운 ‘Harry Potter’ 문자열이 만들어지고 새로운 주소값이 할당된다.

불변성2

두 개의 데이터는 완전 별개의 데이터로 인식된다.

컴퓨터는 새로운 데이터를 무조건 새로운 데이터 영역에 공간을 만들어 저장한다. 그 값은 변경할 수 없으며 사용되지 않으면 일정기간이 지난 후 삭제된다. (GC 대상 - 참조하는 변수가 없다면)

즉, 불변성이라는 것은 데이터 영역의 데이터를 변경할 수 없다는 뜻이 된다. 저 영역의 값은 한 번 저장되면 변경할 수 없고 사용되지 않으면 추후 가비지 컬렉터에 의해 삭제될 뿐이다.



참조형 데이터

참조형 데이터는 가변값이다?


let gryffindor = {
  room: 1,
  name: "Harry Potter",
};


참조형데이터 할당

참조형 데이터를 변수에 할당하는 과정을 살펴보자.

  1. gryffindor 변수를 선언하면 컴퓨터는 변수 영역의 빈 공간(@1004)에 자리를 만들어 그 공간의 이름을 `gryffindor`로 명명한다.

  2. 변수의 데이터를 데이터 영역(@5001)에 저장하려고 보니 여러 개의 프로퍼티로 만들어진 데이터 그룹이다.
      이 그룹의 데이터를 저장하기 위해서 별도의 변수 영역을 만들고, 그 영역의 주소(@7000~ ?)를 데이터 영역(@5001)에 저장한다.

  3. @7000과 @7001의 공간에 프로퍼티의 식별자인 room과 name의 이름을 지정한다.

  4. 데이터 영역에서 @7000의 데이터 값인 1을 검색하고 같은 것이 없으니 새로운 공간(@5003)을 만들어 저장한 후
     그 주소값을 @7000에 저장한다.

    마찬가지로 @7001의 데이터 값 'Harry Potter'를 @5004에 저장한 후 @7001에 주소값을 저장한다.

참조형 데이터가 기본형 데이터와 차이를 보이는 것은 객체의 변수(프로퍼티) 영역이 별도 존재한다는 사실이다.



프로퍼티(Property)

    자바스크립트의 객체는 (key) (value)으로 구성된 `프로퍼티(Property)`들의 집합이다.


앞서 본 것과 같이 데이터 영역의 값은 불변값이다.

변하지 않는 값이다.

그러나 참조형 데이터는 별도의 변수 영역을 가지는 특성 때문에 값을 변경할 수 있다.

변수 영역의 값은 변경이 가능하기 때문이다.

참조형 데이터가 불변하지 않다는 것은 별도의 변수 영역을 가진 특성 때문이라고 할 수 있다.


  • 다음을 살펴보자.
let gryffindor = {
  room: 1,
  name: "Harry Potter",
};

gryffindor.room = 2;


참조형데이터 프로퍼티 재할당


gryffindor의 room 프로퍼티에 값을 변경하려고 2를 새로 할당하였다.

어떤 변화가 일어날까?

1. 컴퓨터는 데이터 영역에서 새로운 값인 2를 검색하고, 없다고 확인되면 새로운 공간(@5005)을 만들어 저장한다.

2. 그리고나서 room 프로퍼티의 값을 2의 주소값인 @5005로 변경한다.

변수 gryffindor의 값을 살펴보면, 여전히 그대로이다.

변경되지 않았다.

gryffindor의 room 프로퍼티의 값을 변경하면 해당 값만 변경되고 gryffindor가 참조하는 값인 @5001은 변하지 않는다.

그럼, 참조형 데이터의 프로퍼티에 참조형 데이터를 할당해보면 어떻게 될까?

let gryffindor = {
  password: 1234,
  passwords: [1234, 4679, 5342],
};


중첩 참조형데이터 할당


1. 컴퓨터는 변수 영역의 빈 공간(@1004)를 확보하고 주소의 이름을 `gryffindor`로 지정한다.

2. 변수의 데이터를 데이터 영역(@5001)에 저장하려고 보니 여러 개의 프로퍼티로 만들어진 데이터 그룹이다.
   이 그룹의 데이터를 저장하기 위해서 별도의 변수 영역을 만들고, 그 영역의 주소(@7000~ ?)를 데이터 영역(@5001)에 저장한다.

3. @7000과 @7001의 공간에 프로퍼티의 식별자인 `password`과 `passwords`의 이름을 지정한다.

4. 데이터 영역에서 1234를 검색해보고 없으면 @5002에 값을 저장하고 주소값을 @7000에 저장한다.

5. @7001의 값을 보니 이 역시 데이터 그룹이다. 그룹 내부의 프로퍼티들을 저장하기 위해 새로운 변수 영역(@8100~ ?)을 만들고
   그 영역의 값을 데이터 영역(@5003)에 저장한 후 @5003을 @7001의 값으로 저장한다.

6. 배열의 요소는 3개. @5003의 변수 영역에 3개의 공간을 마련하여 각각의 인덱스 번호를 이름으로 부여한다.

7. 데이터 영역에서 첫번째 값 1234 검색하여 같은 데이터를 찾아 (@5002) 주소값을 @8100에 저장한다.

8. 데이터 영역에서 두번째 값 4679 검색해보니 같은 데이터가 없어 새로운 공간(@5004) 만들어 저장한 후 그 주소값을 @8101에 저장한다.

9. 마찬가지로 5342 검색하고 새로운 공간(@5005)에 저장 후 @8102에 주소값 저장한다.

이 상태에서 passwords 변수의 값을 문자열로 바꾸면 재할당하면 무슨 일이 벌어질까?

gryffindor.passwords = "Hogwarts";


중첩 참조형데이터 할당(GC대상)


새로운 데이터 ‘Hogwarts’를 기존 변수의 프로퍼티 passwords의 값으로 재할당하면 새 데이터의 공간(@5006)을 만들어 값을 저장하고 @7001의 값을 @5006으로 변경한다.


그럼, 데이터 영역은 불변성을 가지기 때문에 변경할 수 없고 새로운 데이터가 할당될 때마다 공간을 확보하는데 공간이 무한한 것이 아니기에 언젠가는 가득 차 버리지 않을까?

위의 상황에서 @5003의 데이터 영역은 @7001의 값이 @5003에서 @5006으로 변경됨에 따라 더 이상 참조하는 변수가 없는 상황이 된다.



참조카운트 : 어떤 데이터에 대해 자신의 주소를 참조하는 변수의 개수

    @5003의 참조카운트는 @7001의 값이 @5003 이었을 때 1인 상태였지만
    지금은 @7001의 값이 @5006으로 바뀌어 @5003의 참조카운트는 0이 된다.

    이로 인해 @5003의 데이터 공간은 필요없는 상황이 되고
    이는 `GC(garbage collection)` 대상이 된다.


GC (garbage collection)

    `쓰레기 수집(garbage collection 가비지 컬렉션, GC)` 메모리 관리 기법 중의 하나로,
    프로그램이 동적으로 할당했던 메모리 영역 중에서 필요없게  영역을 해제하는 기능이다.

데이터 영역의 공간은 새로운 데이터가 들어올 때마다 확보되고 불변성을 가지지만 무한한 공간은 아니기에 메모리를 관리하는 것이 필요하다.

위에서의 예시처럼 @5003의 공간이 필요없는 공간이 되어 수거대상 즉, GC대상이 되면 담겨 있던 데이터가 정리되고 이에 따라 연결되어 있던 변수 영역(@8100 ~ ?)의 공간도 같이 사라지게 된다.

이와 같은 가비지컬렉션의 메모리 관리를 통해 데이터 영역에 새로운 빈 공간이 생겨날 수 있는 것이다.



👉🏻 다음 장에서 이어서 설명 👉🏻 Next Page


참고자료