복사
객체복사
낱개복사
코드가 길어져 비효율적이다
그래서 나온 것이 스프레드 연산자이다.
근데 스프레드로 새로 만들어주고 hobby1를 바꿔주었을 때 profile과 profile2의 hobby1이 둘다 바뀌는 경우가 생겼다...
그이유는 hobby1의 경우 객체 안에 담겨 있기 때문에 객체가 담긴 그주소를 가져오기 때문에 바뀐값까지 가져온것이다
이것을 바로 얕은 복사 (Shallow Copy) 라고 한다
JSON 객체의 메소드를 이용해서 Deep Copy를 할 수 있다.
JSON.stringify : 자바스크립트 객체를 JSON 문자열로 변환
JSON.parse : JSON 문자열을 자바스크립트 객체로 변환
JSON 문자열로 변환했다가 다시 객체로 변환해주기 때문에 객체에 대한 참조가 없어지는 것이다.
JSON.stringify를 이용하면 객체가 문자열로 변환된다
그상태에서 JSON.parse (JSON.stringify(profile))해주면
깊은복사(Deep Copy) 가 된다
profile2 hobby1의 값을 바꿔줘도 profile hobby1의 값은 그대로이다
이방식의 단점은 느리다는것이다
이것을 보완하는 라이브러리는 lodash이다
import from 'lodash'
일반적으로 lodash는 언더바로 쓰인다
const clonedeep = require("lodash.clonedeep");
const p1 = {
age: 20,
name: {
first: 'Jessie',
last: 'Jung'
},
sayHello: () => {
console.log('hello world!');
},
}
const p2 = clonedeep(p1);
p1.age = 30;
p1.name.first = 'justin';
console.log(p1); // { age: 30, name: { first: "Justin", last: "Jung" }, sayHello: f };
console.log(p2); // { age: 20, name: { first: "Jessie", last: "Jung" }, sayHello: f };
p2.sayHello(); // hello world!lodash의 clonedeep이라는 메소드를 이용하면 깊은복사가 가능하다
JSON.parse(JSON.stringify()) 방법의 문제점이였던 함수 복사도 가능하다.
배열의 얕은복사
스프레드 연산자로 같은방식으로 사용한다
const 선언이어도 바뀌는 이유
const profile ={} 라는 주소만 저장된것이기 때문에 안의 값은 변경이 가능한 것이다
배열에서의 스프레드 연산자
