기본형 데이터와 참조형 데이터

verdantgreeny·2025년 1월 3일

본캠프

목록 보기
16/56

1. 데이터 타입의 종류

1) 복제의 방식

  • 기본형 : 값이 담긴 주소값을 바로 복제
  • 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 조사값을 복제

2) 불변성의 여부

  • 기본형 : 불변성을 띔
  • 참조형 : 불변성을 띄지 않음

2. 변수 선언과 데이터 할당

1) 할당 예시

var str = 'test!';
  • 변수 영역(1002)에 식별자(변수명)를 str로 할당한다.
  • 데이터 영역(5004)에 문자열 'test!'를 할당한다.
  • 식별자 str의 변수 영역에 데이터 영역의 @5004라는 주소로 연결해준다.
  • 사용자가 식별자 str을 호출했을 때, 해당 변수 영역 값에 연결된 @5004에 담긴 데이터가 반환된다.

3. 기본형 데이터와 참조형 데이터

1) 불변값과 불변성(with 기본형 데이터)

데이터 재할당
var str = 'test!';
str = 'Hello!;
  • 불변성은 데이터 영역의 메모리에 대한 것이다.

    • 식별자 str의 변수 영역에 값이 'Hello!'로 재할당이 되면서 주소가 @5003에서 @5004로 변경된다.
    • 변수는 이처럼 데이터 영역의 주솟값이 재할당이 가능하다(반면 상수는 데이터 주솟값 재할당이 안됨).
  • 불변성은 식별자 변수 영역에 해당하는 데이터 값의 재할당이 기준이 아니다.

  • 데이터 영역의 데이터가 변경이 가능한지에 대한 여부이다.

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

    var obj1 = {
          a: 1,
          b: 'bbb,
      };
    
참조형 데이터의 변수 할당
      var obj1 = {
          a: 1,
          b: 'bbb,
      };
      
      obj1.a = 2;
참조형 데이터의 변수 재할당
  • 식별자 obj1의 변수 영역의 값과 데이터 영역의 값은 변경되지 않았지만 객체의 프로퍼티 영역의 데이터 주솟값은 변경이 되었고 이를 가변성을 띈다고 하는 것이다.
  • 즉, 참조형의 경우에 데이터 영역은 불변성을 띄지만 객체의 프로퍼티 영역은 가변성을 띈다는 것을 알 수 있다.

3) 기본형과 참조형 데이터의 복사 후 값 변경

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

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

      b = 15;
      obj2.c = 20;
      
  • 기본형과 참조형의 두드러진 차이는 복사한 후의 값 변경에서 일어난다.
  • 기본형 : a와 b는 서로 다른 데이터 영역의 줏를 바라보고 있기 때문에 영향이 없다.
  • 참조형 : obj1과 obj2가 똑같은 주소를 바라보게 되기 때문에 obj1까지 변경이 일어나게 됨.

4. 불변객체

객체에서 위와 같이 원치 않는 값도 변하는 현상을 방지하기 위해서는 객체를 불변객체로 만들어 값의 변경을 방지하거나, 객체의 변경이 필요한 경우에는 얕은 복사나 깊은 복사를 하여야 한다.

1) 불변객체

: 객체의 프로퍼티에 접근하는 것이 아닌, 아예 새로운 객체를 반환시킨다.

2) 얕은 복사

: for ~ in 구문을 이용하여, 객체의 모든 프로퍼티에 접근한다.

    var copyObject = function (target) {
         var result = {};
         
         for (var prop in target) {
             result[prop] = target[prop];
         }
         return result;
     }

3) 깊은 복사

: 객체의 프로퍼티 중, 기본형 데이터는 그대로 복사 + 참조형 데이터는 다시 그 내부의 프로퍼티를 복사 ⇒ 재귀적 수행!

    var copyObjectDeep = function(target) {
        var result = {};
        if (typeof target === 'object' && target !== null) {
            for (var prop in target) {
                result[prop] = copyObjectDeep(target[prop]);
            }
        } else {
            result = target;
        }
        return result;
    }
    

0개의 댓글