// 얕은 복사 Shallow Copy - 객체는 메모리 주소 전달 (Call by reference)
// 자바스크립트에서 복사할때는 항상 얕은 복사가 이루어짐!
// 아래와 같은 방법은 통해 복사를 해야한다.
// Array.from, concat, slice, spread(...), Object.assign
const pizza = { name: '피자', price: 2, owner: { name: 'Ellie' } };
const ramen = { name: '라면', price: 3 };
const sushi = { name: '스시', price: 1 };
const store1 = [pizza, ramen];
const store2 = Array.from(store1);
console.log('store1', store1);
console.log('store2', store2);
store2.push(sushi);
console.log('store1', store1);
console.log('store2', store2);
// 아이템을 추가하고 삭제할때 object는 메모리주소가 전달이 된다.(메모리 주소가 참조가 된다.)
// 그래서 해당 object를 다른곳에서 수정하면 이 object를 가지고 있는 모든 array에 수정사항이 반영이 된다.
pizza.price = 4;
console.log('store1', store1);
console.log('store2', store2);
[ 참고사항 ]
- Object.assign() 메소드도 spread 연산자 둘 다 완벽한 Deep copy 되지 않는다.
- 객체가 서로 다르다고 깊은 복사가 이루어진건 아니다.
- 1 depth 까지는 확실하게 Deep copy.
- 2 depth 이상이면 Shallow copy.
…(spread) 연산자를 이용해 depth 2까지 복사하는 방법
const obj1 = { a: { b:1, c:1 }, d: 2};
const obj2 = { ...obj1, a:{ ...obj1.a } };
obj1.a.b = 100;
console.log(obj1 === obj2) // false
console.log(obj2.a.b) // 1
'Study > JavaScript' 카테고리의 다른 글
[JavaScript_study] 이터러블(iterable)이란? (0) | 2022.04.12 |
---|---|
[JavaScript_study] 고차함수 (Higher-Order Function) (0) | 2022.04.12 |
[JavaScript_study] 자료구조 및 배열 (0) | 2022.04.11 |
[JavaScript_study] 유용한 함수들 (0) | 2022.04.11 |
[JavaScript_study] 유용한 객체들 (0) | 2022.04.11 |