스프레드연산자 || 얕은/깊은복사 || REST 파라미터

스프레드연산자 기능

 

1.구조 분해 할당에서 나머지 속성들을 모으는 용도로 사용.
2.객체나 배열을 확장(복사)할 때 사용.

---

객체 복사하는 방법(참조 방식에서 벗어나기 위한 방식 )

 

스프레드 연산자를 통해 객체나 배열의 요소들만을 불러올 수 있다.

 

응용1 스프레드 연산자를 통한 배열 결합 

 let test = () => {

    const aaa = [1,2,3]

    const bbb = [3,4,5]

const arr = [...aaa, ...bbb]

    console.log(arr)

  }

  test()

---

응용2 요소들 한개만 불러오기(객체의 값만 빼옴)(중복이던 3이 없어짐)

let test = () => {

  const aaa = [1,2,3]

  const bbb = [3,4,5]

  const arr = [...aaa, ...bbb]

  const arr2 = [...new Set(arr)]

  console.log(arr2)

}

test()

---

객체 내용수정해고 살펴보기

 

 

profile1 객체와 비교할 profile3객체를 새롭게 만들어주고,

그 객체의 스코프 안에 키의 value값들에 직접 값들을 가져와서 연결시켜준다.

이렇게 하면 profile3을 나중에 바꿔도 원본 profile 객체는 바뀌지 않는다.

 

그런데 이렇게 하면 비효율적.

 

스프레드 연산자 사용! ...객체/변수명 (요소들을 복사해와줌)

 

---

스프레드 연산자의 문제점(얕은 복사 shallow copy)

우리는 참조해오는게 아니라 각 객체나 배열을 독립적으로 운용하고 싶다.

하지만 스프레드 연산자로 객체,배열을 들고오면 참조해서 들고와서..

 

클론의 값을 바꾸면 원본도 바뀐다는 문제가 발생한다.

(객체나 배열이 아닌, 기본타입들(문자열, 숫자, 불리언)은 얕은 복사 해도 괜찮다.)

 

객체를 복사해서 들고와서 바꿔줬더니 원본의 객체안의 객체도 바뀌게 된다.

즉 상위의 객체와 하위의 객체의 저장공간이 각각 따로 되어있다는 것.

 

상위의 객체의 값을 스프레드 연산자를 통해 불러왔다고 해서,

그 하위의 객체의 주소를 한번에 복사해올 수 있는게 아님.

---

얕은복사 극복하기 (참조가 아니라 독립적으로 값만 복사해오기)

JavaScript에서 깊은 복사를 구현하는 방법 중 하나는 JSON.stringify() 와  JSON.parse() 메서드를 사용하는 것입니다:

 

JSON 

정의: 자바스크립트의 객체 표기법(객체와 유사한 형태만 가진 전혀 다른 내용)

 

JSON은 자바스크립트의 객체 리터럴 표기법과 유사한 형태를 가지지만, 순수한 데이터를 나타내는 표준 포맷입니다.

---

방법

1. JSON.stringify() 통해서 객체를 문자열로 변경

2. JSON.parse() 통해서 바뀐 문자열을 객체로 바꿔준다. (기존 객체와 모양만 같은 새로운 객체이다.) 

 

예시

const originalObject = {
    a: 1,
    b: {
        c: 2,
        d: 3
    }
};

const deepCopiedObject = JSON.parse(JSON.stringify(originalObject));

 

혹은

 

npm 사이트의 lodash 에서 라이브러리 다운후 _.cloneDeep() 사용

const _ = require('lodash');

const obj = {
  a: 1,
  b: {
    c: 2
  }
};

const deepClonedObj = _.cloneDeep(obj);
deepClonedObj.b.c = 3;

console.log(obj.b.c);  // 2
console.log(deepClonedObj.b.c);  // 3

 

실제예

---

 const는 객체,배열의 재할당 허용

 

const는 변수의 재할당을 방지하지만, 그 변수가 참조형 데이터(객체, 배열 등)를 가리키는 경우, 그 내부의 값을 변경하는 것은 허용됩니다.

 

하지만 Object.freeze({}) , Object.freeze([]) 를 통해 재할당을 방지할 수 있다. 

물론 중첩 객체는 재할당방지가 안된다.

---

<freeze 선언 전>

  let test = () => {

    const arr = [1,2,3]

    arr[0] = 10

    console.log(arr)

  }

  test()

 

<freeze 선언 후>

  let test = () => {

    const arr = [1,2,3]

    Object.freeze(arr)

    arr[0] = 10

    console.log(arr)

  }

  test()

---

 REST 파라미터

 

구조분해할당에서 원하는 키값들을 묶어서 스프레드 연산자로 따로 한 변수에 모아둘 수 있는데,

이 변수를 REST 파라미터라 한다. (변수명은 뭐든 상관없다.)

// hobby를 뺀 객체를 출력하라.

let test = () => {

  const child = {

    name: "철수",

    age: 8,      

    school: "다람쥐초등학교",

    money: 2000,

    hobby: "수영"

  }

  const {hobby, ...a} = child // 객체를 구조분해할당

  console.log(a)

}

test()

---

??? 왜 ...a가 아니라 a로 출력할까??

 

... (스프레드/나머지 연산자)는 주로 두 가지 문맥에서 사용됩니다:

1.구조 분해 할당에서 나머지 속성들을 모으는 용도로 사용.
2.객체나 배열을 확장할 때 사용.

 

구조 분해 할당에서 ...a를 사용한 경우, hobby를 제외한 나머지 모든 속성들이 a에 할당됩니다. 이것은 나머지 속성들을 모으는 작업입니다.

그런데 console.log에서 ...a를 사용하려고 하면, 이것은 객체 확장을 시도하는 것입니다. 하지만 console.log에는 객체 확장을 시도할 수 있는 문맥이 아닙니다. 따라서 그냥 a를 사용하여 이미 구성된 객체를 출력하는 것이 올바른 방법입니다.