[Javascript] 배열과 객체 복사 (얕은 복사, 깊은 복사)

값에 의한 전달 (Copy by Value)

• 값에 의한 전달
• 기본적으로 모든 primitive 값은 copy by value
• 원본 데이터와 복사본의 데이터가 서로 따로 제어 됨

let origin = 'hi'
let clone = origin

clone +=' john'

console.log(origin); // hi
console.log(clone); // hi john

참조에 의한 전달(Copy by Reference)

• 참조에 의한 전달
• 원본 데이터와 복사본의 데이터가 같이 제어 됨

const newObj = {
	name  :'john'
}

originObj.name = 'Mike'
console.log(originObj.name); // Mike
console.log(cloneObj.name);  // Mike

console.log(originObj === cloneObj); // true

// 값이 같다 할지라도 해당 주소값이 다르므로 서로 다름
console.log(originObj === newObj); // false
console.log(cloneObj === newObj); // false

 

---

얕은 복사 (Shallow Copy)

• 객체를 복사할 경우 값이 아닌 같은 메모리 주소를 참조하고 있는 것으로 완전히 동일한 데이터로 관리 됨
• 원본 데이터 변경 시 복사본의 데이터도 변경
• 얕은 복사의 경우라도 새로운 배열 객체로 반환될 경우 원본 데이터가 변경되지 않음
  concat(), map(), filter(), recuce(), from(),slice()
• 스프레드 연산자 역시 얕은 복사에 해당

얕은 복사 유형

1. concat()
2. slice()
3. map() 
4. filter()
5. reduce()
6. from()

---

깊은 복사 

• 원본 데이터가 변경 되어도 복사본의 데이터가 변경되지 않음

깊은 복사 유형

1. JSON.parse()
2. JSON.stringify()

---