songin.dev님의 블로그

데이터 타입에 따른 저장 방식 본문

TIL(Today I Learned)

데이터 타입에 따른 저장 방식

songin.dev 2023. 3. 3. 10:48
728x90

목적 : 오늘 배운 내용 요약

데이터 타입에 따른 저장 방식

데이터 타입은 아주 단순하게 나눠보면 String, Number, Boolean, undefined 등은 원시 타입(Primitive),
Object, Array 등은 참조 타입(Reference)으로 나뉜다.
문자열과 숫자 등의 데이터는 변수의 메모리에 그 값이 직접 저장된다.
배열과 객체는 데이터의 주소값이 저장된다.
그렇기 때문에 배열과 객체는 주솟값을 공유하는 변수의 값이 변하게 되면 원본 값도 변하게 된다.
만약 객체나 배열을 원본에 영향을 주지 않는 새로운 복사본으로 만들고자 한다면 얕은 복사 즉, 스프레드 연산자를 사용하면 된다.
스프레드 연산자는 [...array], {...object} 로 사용된다.
하지만 아래와 같은 코드에서는 얕은 복사를 사용하게 될 경우 객체 안에 있는 객체는 여전히 주소값을 참조하고 있기 때문에 원본값이 변한다.

const newProfile = {
  name: '철수',
  age: 13,
  school: '다람쥐초등학교',
  hobby: {
    one: '수영',
    two: '프로그래밍',
  },
};

const newProfile2 = { ...newProfile };

newProfile2;
/*
    {
      name: '철수',
      age: 13,
      school: '다람쥐초등학교',
      hobby: {
        one: '수영',
        two: '프로그래밍',
      }
    };
*/

newProfile.hobby.one = '공부';
newProfile2.hobby.one; // '공부'

이럴 땐 JSON을 사용한 깊은 복사를 사용함으로써 해결할 수 있다.

newProfile
/*
  {
    name: '철수',
    age: 13,
    school: '다람쥐초등학교',
    hobby: {
      one: '수영',
      two: '프로그래밍',
    }
  }
*/

JSON.stringify(newProfile);
// '{"name":"철수","age":13,"school":"다람쥐초등학교","hobby":{"one":"수영","two":"프로그래밍"}}'

JSON.stringify()는 인자로 들어온 데이터를 문자열로 변환시켜준다.
이를 통해 원본 객체와는 전혀 다른, 단지 객체의 모양을 한 문자열을 돌려받게 됨으로써 원본 값이 변하게 되는 걸 막을 수 있다.
문자열로 변환시킨 데이터를 다시 객체 형태로 되돌리기 위해서는 JSON.parse()를 사용하면 된다.

JSON.parse(JSON.stringify(newProfile))
/*
  {
    name: '철수',
    age: 13,
    school: '다람쥐초등학교',
    hobby: {
      one: '수영',
      two: '프로그래밍',
    }
  }
*/

이때 활용되는 JSON 메서드는 객체 뿐만 아니라 배열의 깊은 복사에도 활용할 수 있다.

REST 파라미터

만약 객체에서 특정 키에 해당하는 값을 제외하고 싶다면, delete 메서드를 사용할 수 있다.
하지만 이는 올바른 방법이 아니다. 이런 상황에서는 구조분해할당을 활용할 수 있다.

const { money, hobby, ...rest } = child;

money; // 2000
hobby; // "수영"
rest; // { name: '철수', age: 8, school: '다람쥐초등학교' }

위와 같이 ...rest를 적용해서 나머지 값을 rest라는 변수에 담아줄 수 있다.
rest는 변수명이기 때문에 아무렇게나 입력해도 적용가능하다.
그리고 이러한 Rest parameter를 통해 생성되는 객체는 스프레드 연산자를 사용했을 때와 같이 얕은 복사로 생성된다.

반응형

'TIL(Today I Learned)' 카테고리의 다른 글

[기록하는 습관] TypeORM & Entity  (0) 2023.03.11
[공부 정리] Class & OOP & Design Pattern  (0) 2023.03.06
Comments