본문 바로가기
카테고리 없음

Javascirpt 데이터 타입

by riversun1 2024. 4. 24.

 

1. 데이터 타입 심화

 

(1) 데이터 타입의 종류(기본형과 참조형)

자바스크립트에서 값의 타입은 크게 기본형(Primitive Type)과 참조형(Reference Type)으로 구분됩니다.

기본형과 참조형의 구분 기준은 값의 저장 방식과, 불변성 여부입니다.

 

💡 [기본형과 참조형의 구분 기준]

  1. 복제의 방식
    1. 기본형 : 값이 담긴 주소값을 바로 복제
    2. 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제
  2. 불변성의 여부
    1. 기본형 : 불변성을 띔
    2. 참조형 : 불변성을 띄지 않음

자, “불변성을 띈다” 이 말을 이해하기 위해서 우리는 메모리와 데이터에 대한 내용을 이해해야만 합니다.

 

 

(2) 메모리와 데이터에 관한 배경지식

  1. 메모리, 데이터
    1. 비트
      1. 컴퓨터가 이해할 수 있는 가장 작은 단위죠
      2. 0과 1을 가지고 있는 메모리를 구성하기 위한 작은 조각을 의미한다고 보면 될 것 같아요!
      3. 이 작은 조각들이 모여서 여러분들이 흔히 들으시는 **‘메모리’**가 만들어지는 것이죠.
    2. 바이트
      1. 0과 1만 표현하는 비트를 모두 찾기는 부담
      2. 1개 → 2개 → … → 8개(새로운 단위 : byte)
      3. ✨자바스크립트에서 숫자하는 항상 8 byte로 고정이지만 문자는 아니다.(영문 1byte, 한글 2byte)
  2. 식별자, 변수
  1. var testValue = 3
  2. 변수 = 데이터
  3. 식별자 = 변수명

(3) 변수 선언과 데이터 할당

// 선언과 할당을 풀어 쓴 방식
var str;
str = 'test!';

// 선언과 할당을 붙여 쓴 방식
var str = 'test!';

 

✨ 값을 바로 변수에 대입하지 않는게 좋다! (= 무조건 새로 만들자)

    1. 자유로운 데이터 변환

    2. 메모리의 효율적 관리

 

 

 

 

 

 

(4) 기본형 데이터와 참조형 데이터

  1. 메모리를 기준으로 다시한번 생각해보는 두 가지 주요 개념
    1. 변수 vs 상수
      1. 변수 : 변수 영역 메모리를 변경할 수 있음
      2. 상수 : 변수 영역 메모리를 변경할 수 없음
    2. 불변하다 vs 불변하지 않다
      1. 불변하다 : 데이터 영역 메모리를 변경할 수 없음
      2. 불변하지 않다 : 데이터 영역 메모리를 변경할 수 있음

 

  1. 불변값과 불변성(with 기본형 데이터)
// a라는 변수가 abc에서 abcdef가 되는 과정을 통해 불변성을 유추해봅시다!

// 'abc'라는 값이 데이터영역의 @5002라는 주소에 들어갔다고 가정할게요.
var a = 'abc';

// 'def'라는 값이 @5002라는 주소에 추가되는 것이 아니죠!
// @5003에 별도로 'abcdef'라는 값이 생기고 a라는 변수는 @5002 -> @5003
// 즉, "변수 a는 불변하다." 라고 할 수 있습니다.
// 이 때, @5002는 더 이상 사용되지 않기 때문에 가비지컬렉터의 수거 대상이 됩니다.
a = a + 'def';

 

 

 3. 가변값과 가변성(with 참조형 데이터)

  1. 참조형 데이터의 변수 할당 과정
// 참조형 데이터는 별도 저장공간(obj1을 위한 별도 공간)이 필요합니다!
var obj1 = {
	a: 1,
	b: 'bbb,
};

 

 

 

 

2. 기본형 데이터의 변수 할당 과정과 차이점 : 객체의 변수(프로퍼티) 영역의 별도 존재 여부

 

3. 참조형 데이터가 불변하지 않다(가변하다)라고 하는 이유

var obj1 = {
	a: 1,
	b: 'bbb',
};

// 데이터를 변경해봅시다.
obj1.a = 2;

  1. 과정은 아래와 같아요.
    1. 변경할 값인 숫자 2를 데이터 영역에서 검색합니다.
    2. 없네요! 2를 새로 추가하고, 해당 주소(ex : @5003)를 obj1을 위한 별도 영역에 갈아껴줍니다.
  2. 데이터 영역에 저장된 값은 여전히 계속 불변값이지만, obj1을 위한 별도 영역은 얼마든지 변경이 가능해요. 이것 때문에 참조형 데이터를 흔히, **‘불변하지 않다(=가변하다)’**라고 합니다.

 

4.중첩객체의 할당

  1. 자바스크립트에서 중첩객체란, 객체 안에 또 다른 객체가 들어가는 것을 말해요. 이번 주차 초반에 살펴보았듯이 객체는 배열, 함수 등을 모두 포함하는 상위개념이기 때문에 배열을 포함하는 객체도 중첩객체라고 할 수 있답니다.
var obj = {
	x: 3,
	arr: [3, 4, 5],
}

// obj.arr[1]의 탐색과정은 어떻게 될까요? 작성하신 표에서 한번 찾아가보세요!

 

 

 

 

5. 참조 카운트가 0인 메모리 주소의 처리

  1. 참조카운트란 무엇일까요? 👉 객체를 참조하는 변수나 다른 객체의 수를 나타내는 값입니다. 참조 카운트(몇번 참조되는지)가 0인 객체는 더 이상 사용되지 않으므로, 가비지 컬렉터에 의해 메모리에서 제거됩니다.
  2. 가비지컬렉터(GC, Garbage Collector) 👉 더 이상 사용되지 않는 객체를 자동으로 메모리에서 제거하는 역할을 합니다. 자바스크립트는 가비지 컬렉션을 수행함으로써 개발자가 명시적으로 메모리 관리를 하지 않아도 되도록 지원합니다. 자바스크립트 엔진에서 내부적으로 수행되며, 개발자는 가비지 컬렉션에 대한 직접적인 제어를 할 수 없습니다.

 

4. 변수 복사의 비교

  1. 우리가 지금까지 작성했던 방법과 상당히 유사합니다. 먼저 기본형 및 참조형 데이터의 선언과 할당을 해보고, 변수 복사까지 진행해봅시다.
// STEP01. 쭉 선언을 먼저 해볼께요.
var a = 10; //기본형
var obj1 = { c: 10, d: 'ddd' }; //참조형

// STEP02. 복사를 수행해볼께요.
var b = a; //기본형
var obj2 = obj1; //참조형

 

 

5. 복사 이후 값 변경(객체의 프로퍼티 변경)

// STEP01. 쭉 선언을 먼저 해볼께요.
var a = 10; //기본형
var obj1 = { c: 10, d: 'ddd' }; //참조형

// STEP02. 복사를 수행해볼께요.
var b = a; //기본형
var obj2 = obj1; //참조형

b = 15;
obj2.c = 20;

 

기본형과 참조형의 변수 복사 시 주요한 절차의 차이점은 다음과 같아요!

  • 기본형
    • 숫자 15라는 값을 데이터 영역에서 검색 후 없다면 생성
    • 검색한 결과주소 또는 생성한 주소를 변수 영역 b에 갈아끼움
    • a와 b는 서로 다른 데이터 영역의 주소를 바라보고 있기 때문에 영향 없음
  • 참조형
    • 숫자 20이라는 값을 데이터 영역에서 검색 후 없다면 생성
    • 검색한 결과주소 또는 생성한 주소 obj2에게 지정되어 있는 별도 영역(7103~)에 갈아끼움
    • obj1도 똑같은 주소를 바라보고 있기 때문에 obj1까지 변경이 됨
    • 바로 아래와 같은 현상이 생기는 것입니다!
// 기본형 변수 복사의 결과는 다른 값!
a !== b;

// 참조형 변수 복사의 결과는 같은 값!(원하지 않았던 결과😭)
obj1 === obj2;

 

 

 

6. 복사 이후 값 변경(객체 자체를 변경)

  1. 만약, 객체의 프로퍼티(=속성)에 접근해서 값을 변경하는 것이 아니라 객체 자체를 변경하는 방식으로 값을 바꾼다면 어떨까요?
//기본형 데이터
var a = 10;
var b = a;

//참조형 데이터
var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1;

b = 15;
obj2 = { c: 20, d: 'ddd'};

 

이렇게 되면 obj1과 obj2는 완전 다른 값을 바라보게 된다.

티스토리툴바