1. 얕은 복사

JSP에서 Object, Array, Function의 자료형은 참조형 데이터이다. 주소값만 가져오는 것이 아니라 데이터를 독립적으로 생성하기 위해서는 '복사'라는 개념을 가져와야한다.

const user = {
  name: 'Kim',
  age: 27,
  email: 'yhkim8246@gmail.com'
}
const copyUser = Object.assign({},user)
const copyUser = {...user} //얕은 복사 축약형

위 코드를 보면 Object의 정적 메서드인 assign을 사용하여 새로운 객체를 만들어 user의 값을 할당한다. 이 복사는 '얕은 복사'이다.

const user = {
  name: 'Kim',
  age: 27,
  email: 'yhkim8246@gmail.com'
}
const copyUser = {...user} //얕은 복사 축약형
user.email.push('yhkim8917@naver.com')
console.log(user.email === copyUser.email) //true를 반환한다.

복사를 하여 서로 독립객체로 만들었는데 위 로그는 false가 아닌 true가 뜬다. 그 이유는 user와 copyUser는 독립적인 객체로 만들었지만 그 안의 참조형 자료형인 속성 email에 대해서는 독립적인 객체를 할당해주지 않았기 때문이다. 즉, user와 copyUser는 다른 객체이지만 같은 객체인 email을 할당하고 있다는 의미니다.

---

2. 깊은 복사

깊은 복사란 속성 값은 같지만 서로 공유하는 속성이 없는 완전한 독립 객체로 만드는 것이다. 깊은 복사를 JSP에서 하기는 어렵기 때문에 lodash라는 패키지를 사용해주는 것이 좋다.

import _ from 'lodash'
const user = {
  name: 'Kim',
  age: 27,
  email: 'yhkim8246@gmail.com'
}
const copyUser = _.cloneDeep(user)

Node.js에서 lodash 패키지를 설치에 import해주면 cloneDeep 함수를 사용하면 손쉽게 깊은 복사를 할 수 있다.