JS 데이터 타입, 얕은 복사, 깊은 복사

데이터 타입

• 자바스크립트는 동적 타입의 언어로써, 변수를 선언할 때 데이터 타입을 지원하지 않는다.
  • var, let, const를 사용하여 선언을 하지만 타입을 지정하진 않는다.
• 선언을 할 때 타입을 지정하지 않지만 내부적으로는 원시 타입(Primitive Types)과 객체 타입(Object Types)이있다

원시 타입

• 변경 불가능한(immutable) 값
• 메모리게 고정된 크기로 저장이 된다
• 원시타입 종류
  • Number: 숫자를 나타내는 타입으로, 정수와 실수 모두 포함한다.
  • String: 문자열을 나타내는 타입
  • Boolean: 논리적인 값을 나타내며, true와 false 두 가지 값만 가질 수 있다.
  • Undefined: 값이 할당되지 않은 변수의 타입
  • Null: 명시적으로 값이 없음을 나타내는 타입
  • Symbol: ECMAScript 2015에서 도입되었으며, 유일하고 변경 불가능한 기본 값 타입이다.
  • BigInt: 아주 큰 정수를 표현하기 위한 타입으로, ECMAScript 2020에서 도입되었다.

• 변수에 원시값을 저장하면 변수의 메모리공간에 실제 데이터 값이 저장

const num = 123
const str = 'string'

• 변수에 값을 설정하고 이 값을 직접적으로 가져와 사용

참조 타입(객체 타입)

• 메모리에 직접 저장되는 값이 아니라 메모리 주소를 참조하는 타입을 의미한다.
• 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고 변수에 저장된 메모리 공간의 참조만 저장
• 할당된 변수를 조작하는것은 객체 자체를 조작하는것이 아닌 해당 객체의 참조를 조작하는것
• 탐조타입은 동적 프로퍼티를 추가하거나 변경할 수 있으며, 참조에 의한 복사를 통해 다른 변수와 공유될 수 있다.
• 참조 타입의 종류
  • Object: 키와 값의 쌍을 저장하는데 사용되는 기본 객체 타입
  • Function: 실행 가능한 코드 블록을 나타내는 객체 타입
  • Array: 순서가 있는 값들의 집합을 나타내는 객체 타입
  • Date: 날짜와 시간 정보를 나타내는 객체 타입
  • RegExp: 정규 표현식을 나타내는 객체 타입
• 두 변수가 같은 객체를 참조하고 있을 때 , 한 변수에서 객체의 프로퍼티를 변경하면 다른 변수에서도 그 변경사항이 반영된다.
  • 이러한 문제를 피하기 위해 얕은 복사와 깊은 복사를 사용하기도 한다.

얕은 복사(shallow copy)

• 객체를 복사할 때 해당 객체 값만 복사하여 새 객체를 생성한다
• 얕은 복사를 통해 생성된 새로운 객체의 프로퍼티 중 원시 타입의 값은 원본과 독립적이지만, 참조 타입의 프로퍼티는 원본 객체와 같은 메모리를 참조하게 된다.
• 이러한 이유로 원본 객체나 복사된 객체에서 참조 타입의 프로퍼티를 변경하면 서로에게 영향을 미치게 된다.

    const firstObject = {
        key : 'this is value',
    }

    let secondObj = firstObject

    secondObj.key = 'this is change'

    console.log(firstObj) // 'this is change'
    console.log(secondObj) // 'this is change'

깊은 복사(Deep Copy)

• 객체를 복사할 때 해당 객체와 인스턴스까지 모두 복사
• 데이터 참조가 아닌 객체의 형태를 그대로 복사하기 때문에 하나의 객체가 변경되어도 다른 객체의 데이터에는 영향이 없다

깊은 복사 방법

• JSON.parse, JSON.stringfy
  • 객체를 json 문자열로 변환하는 과정에서 원본 객체와의 참조가 모두 끊어진다
  • 문자열로 변환된 객체를 다시 JSON.parse()를이용하여 객체로 만들어준다
  • 가장 간단하고 쉬운 방법이지만 다른 방법에 비해 느리다
• Object.assign, Spread Operator
  • 깊은 복사가 가능하지만 2차원 객체에서는 깊은 복사가 이루어지 않는다
  • 1 depth까지의 복사만 깊은 복사가 가능

---

참고

https://bbangson.tistory.com/78
https://hanamon.kr/javascript-shallow-copy-deep-copy/