스프레드 연산자 and deep copy - 풀스택개발 EastFlag

shallow copy

let book = {title: "인사이드 자바스크립트", price: 18000};

// 1. book을 copyBook 으로 카피한후에 copyBook의 price를 바꾸면 book과 copyBook이 같이 바뀐다. 이유가 무엇인가?
let copyBook = book;
copyBook.price = 20000;
console.log(book);
console.log(copyBook);

let book = {title: "인사이드 자바스크립트", price: 18000};

// 1. book을 copyBook 으로 카피한후에 copyBook의 price를 바꾸면 book과 copyBook이 같이 바뀐다. 이유가 무엇인가?

let copyBook = book;

copyBook.price = 20000;

console.log(book);

console.log(copyBook);

array 와 object는 referencer type 으로 실제 값이 들어가 있는게 아니라 실제 값이 저장된 메모리 주소를 가르킨다. book을 copyBook에 대입한 것은 값을 카피한것이라 메모리 주소를 카피한 것입니다. 즉, book과 copyBook 은 같은 메모리 주소를 가르키게 된다. 그러므로 book.price 의 의미는 book의 메모리 주소를 참조하여 price 값을 바꾸게 되니 copyBook도 동일한 메모리 주소를 가르키게 되므로 당연히 같이 바뀌게 됩니다. 이러한 카피를 shallow copy 라고 합니다.

let book = {title: "인사이드 자바스크립트", price: 18000};

1	let book = {title: "인사이드 자바스크립트", price: 18000};

es5 deep copy

es5 에서는 Object.assign(target, …src) 를 사용하여 deep copy를 수행합니다. 여기서 deep copy라는 의미는 새로운 메모리 주소를 만들어서 복사한다는 의미입니다.

Q: es5 방법으로 book을 copyBook1 으로 deep copy 하고 확인하시오.

let copyBook1 = Object.assign({}, book);
copyBook1.price = 20000;
console.log(book);
console.log(copyBook1);

let copyBook1 = Object.assign({}, book);

copyBook1.price = 20000;

console.log(book);

console.log(copyBook1);

Q: deep copy 하면서 author: song 을 추가할려면 어떻게 해야 하는가?

let copyBook2 = Object.assign({}, book, {author: 'song'});
console.log(copyBook2);

1 2	let copyBook2 = Object.assign({}, book, {author: 'song'}); console.log(copyBook2);

spread 연산자

es6에서 추가된 … 연산자는 두가지 용도로 사용됩니다. 첫번째는 나머지 연산자이고 두번째는 스프레드 연산자입니다. 여기서는 두번째용도이며 deep copy 하기 위해서 사용됩니다.

Q: es6 방법으로 book을 copyBook3 으로 deep copy 하고 확인하시오.

let copyBook3 = { ...book }
copyBook3.price = 20000;
console.log(book);
console.log(copyBook3);

let copyBook3 = { ...book }

copyBook3.price = 20000;

console.log(book);

console.log(copyBook3);

Q: deep copy 하면서 author: song 을 추가할려면 어떻게 해야 하는가?

let copyBook4 = { ...book, ...{author: 'song'} };
console.log(copyBook4);

1 2	let copyBook4 = { ...book, ...{author: 'song'} }; console.log(copyBook4);

CodePen

See the Pen es6 – spread operator example by LeeDongKee (@eastflag) on CodePen.default