2023.11.23 TIL - 얕은 복사와 깊은복사

수정기능을 넣는 수업복습도중에 자바스크립트와 nodejs의 특징인 얕은 복사와 깊은 복사에대해 알게되었다.

짧게 찾아보고 이해한부분을 설명해보고자 한다.

// 얕은 복사의 경우
const item = { 
        "id": 1,
        "title": "공부 합시다",
        "status": "new"
        }
        
 const newItem = item
 newItem.status = "done"
 console.log("newItem", newItem) // newItem {id: 1, title : 공부합시다, status:done)
 console.log("newItem", item) // newItem {id: 1, title : 공부합시다, status:done)

얕은 복사의 경우 이런식으로 오브젝트나 배열을가지고 와서  새로운값을 수정해버리면 원본이 바뀌어버리는 특징이있다.

이런경우에는 프론트와 데이터를 주고받을때 에러를 발생할수있는 경우가 있으므로 아래처럼 

//깊은 복사의 경우
const item = { 
        "id": 1,
        "title": "공부 합시다",
        "status": "new"
 	}
 const newItem = {...item}
 
 newItem.status = "done"
console.log("newItem", newItem) // newItem { id: 1, title: '공부 합시다', status: 'done' }
console.log("newItem", item) // newItem { id: 1, title: '공부 합시다', status: 'new' }

스프레드 ...{ }식으로 (전개 연산자)  {}안에 들어있는 오브젝트나 배열을 풀어서 사용하면 

원본은 바뀌지않고 수정요청된 해당변수안의 값만 변해서 가져오므로 원본 데이터값을 지킬 수(?) 있다.