스프레드 연산자 & deep copy

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

                        // 1. book을 copyBook 으로 카피한후에 copyBook의 price를 바꾸면 book과 copyBook이 같이 바뀐다. 이유가 무엇인가?
                        let copyBook = book;
                        copyBook.price = 20000;
                        console.log(book); // {title: "인사이드 자바스크립트", price: 20000}
                        console.log(copyBook); // {title: "인사이드 자바스크립트", price: 20000}
                    
                
array 와 object는 referencer type 으로 실제 값이 들어가 있는게 아니라 실제 값이 저장된 메모리 주소를 가르킨다.
book을 copyBook에 대입한 것은 값을 카피한것이라 메모리 주소를 카피한 것입니다.
즉, book과 copyBook 은 같은 메모리 주소를 가르키게 된다.
그러므로 book.price 의 의미는 book의 메모리 주소를 참조하여 price 값을 바꾸게 되니 copyBook도 동일한 메모리 주소를 가르키게 되므로 당연히 같이 바뀌게 됩니다.
이러한 카피를 shallow copy 라고 합니다.
es5 deep copy
es5 에서는 Object.assign(target, …src)를 사용하여 deep copy를 수행합니다.
여기서 deep copy라는 의미는 새로운 메모리 주소를 만들어서 복사한다는 의미입니다.

Q. es5 방법으로 book을 copyBook1 으로 deep copy 하고 확인하시오.
                    
                        let book = {title: "인사이드 자바스크립트", price: 18000};
                        let copyBook1 = Object.assign({}, book);
                        copyBook1.price = 20000;
                        console.log(book); // {title: "인사이드 자바스크립트", price: 18000}
                        console.log(copyBook1); // {title: "인사이드 자바스크립트", price: 20000}
                    
                

Q. deep copy 하면서 author: song 을 추가할려면 어떻게 해야 하는가?
                    
                        let book = {title: "인사이드 자바스크립트", price: 18000};
                        let copyBook2 = Object.assign({}, book, {author: 'song'});
                        console.log(book); // {title: "인사이드 자바스크립트", price: 18000}
                        console.log(copyBook2); // {title: "인사이드 자바스크립트", price: 18000, author: "song"}
                    
                
es6 spread 연산자
es6에서 추가된 연산자는 두가지 용도로 사용됩니다.
첫번째는 나머지 연산자이고 두번째는 스프레드 연산자입니다.
여기서는 두번째용도이며 deep copy 하기 위해서 사용됩니다.

Q. es6 방법으로 book을 copyBook3 으로 deep copy 하고 확인하시오.
                    
                        let book = {title: "인사이드 자바스크립트", price: 18000};
                        let copyBook3 = { ...book }
                        copyBook3.price = 20000;
                        console.log(book); // {title: "인사이드 자바스크립트", price: 18000}
                        console.log(copyBook3); // {title: "인사이드 자바스크립트", price: 20000}
                    
                

Q. deep copy 하면서 author: song 을 추가할려면 어떻게 해야 하는가?
                    
                        let book = {title: "인사이드 자바스크립트", price: 18000};
                        let copyBook4 = { ...book, ...{author: 'song'} };
                        copyBook4.price = 20000;
                        console.log(book); // {title: "인사이드 자바스크립트", price: 18000}
                        console.log(copyBook4); // {title: "인사이드 자바스크립트", price: 20000, author: "song"}