스프레드 연산자와 데이터 복사

스프레드 연산자

복사?

변수를 복사하려면

let a = "a"
let b = a
console.log(b)
	// a

복사한 b를 수정해도 괜찮을까? 물론 ok

객체는 복사가 안되나?

객체 뿐 아니라 배열도 복사가 불가능함

const profile1 ={
  name : "철수",
  age : 13,
  school : "서울초등학교"
}
const profile2 = profile1
console.log(profile2)

잘 되는것 아닌가?

profile2.name = "영희"
console.log(profile2)

값 수정도 되는데?

console.log(profile1)

복사본을 수정했는데 원본도 수정되어버림

변수의 저장 원리

String, Number, Boolean 은 데이터가 저장이 되지만
객체,배열은 데이터가 저장되어있는 주소값이 저장되어있음.

한 공간의 크기가 좁아서 배열 전체나 객체 전체를 저장할 수가 없음.

![]

객체는 이런식으로 주소를 복사했기에 수정하면 동시에 수정되는것.

그러면 어떻게 복사해야하는가

엄밀히 말하면 복사는 불가능하고 복사를 흉내낼 수 있음.

각 값을 가져와서 새롭게 만듬

그러면 객체속의 객체를 복사하는건 어떨까

const profile1 = {
  name : "철수",
  age : 13,
  hobby : {
    hobby1 : "축구",
    hobby2 : "수영"
  }
} 

const profile2 ={
  name : profile1.name,
  age : profile1.age,
  hobby : profile1.hobby
}

hobby를 이런식으로 복사하면 어떻게 될까
hobby는 값이 아닌 주소가 들어있기에 주소값이 저장된다.

profile2번의 이름과 취미 1번을 수정했는데
이름은 profile2번만 잘 적용되었지만 취미는 profile 1,2 둘다 변경되버렸다.

hobby도 내용을 복사하려면

const profile2 ={
  name : profile1.name,
  age : profile1.age,
  hobby : {
    hobby1 : profile1.hobby.hobby1,
    hobby2 : profile1.hobby.hobby2,
  }
}

이런식으로 하나하나 해줘야함.

스프레드 연산자 ...

위 방법대로면 객체의 항목이 많을수록 너무 불편해짐 사실상 직접 전부 입력하는것과 코드의 양이 다를바없다

이 때 사용하는게 스프레드 연산자 ... 이다
내용을 전부 입력하는게 아닌 ...객체명 으로 가능하다

const profile1 = {
  name : "철수",
  age : 13,
  hobby : {
    hobby1 : "축구",
    hobby2 : "수영"
  }
} 

const profile2 ={
	...profile1
}

하지만 이 방법도 hobby는 얕은 복사가 되버린다 해당 부분을 깊은복사로 하려면

const profile2 ={
	...profile1,
  	hobby: {
  		...profile1.hobby
	}
}

복사가 잘 된모습

문자열로 바꿔서 복사하기

객체의 JSON형태를 전체로 문자열로 만들어서 저장하고
해당 문자열을 다시 JSON형태로 객체로 바꾸는 방법

const profile1 = {
  name : "철수",
  age : 13,
  hobby : {
    hobby1 : "축구",
    hobby2 : "수영"
  }
} 

const string_profile1 = JSON.stringify(profile1)

const profile2 = JSON.parse(string_profile1)

복사도 잘 되고 값변경도 각각 잘 되는 모습

lodash

npm lodash페이지

// Load the full build.
var _ = require('lodash');

라고 써져있는데

import _ from'lodash';

이것과 같은 뜻

추가하고

_.cloneDeep()

을 사용하면된다.