Shallow vs. Deep Copying Objects

Shallow Copying Objects:

• Will duplicate the top-level properties but nested object is shared between original and the copy
• Array.prototype.slice()

  const arr = ['peanut', 'butter', 'and', 'jelly'];
   
  arr.slice(1); // ['butter', 'and', 'jelly']
  arr.slice(0, 1); // ['peanut']
  arr.slice(0, 2); // ['peanut', 'butter']
  arr.slice(2, 2); // []
  arr.slice(2, 20); // ['and', 'jelly']
  arr.slice(3, 0);// []
  arr.slice(3, 100);// ['jelly']
  arr.slice(5, 1); // []

• Object.assgin()
  • Object.assign({}, arr)
• will affect 'array inside array' if it modifies since it is shallow copying objects
• Pitfall: 계속 순환 참조

Deep Copying Objects:

• JSON.parse(JSON.stringify(object))
• Pitafall: if you put user's method, it will cause an error.
• 서버 통신에서는 딮카피가 맞음
• 자바스크립트는 객체나 배열이 아니라 그냥 글자임

 

 

 

reference:

https://scotch.io/bar-talk/copying-objects-in-javascript

https://medium.com/watcha/깊은-복사와-얕은-복사에-대한-심도있는-이야기-2f7d797e008a