DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on • Edited on

Deep vs Shallow cloning 2

#javascript #deep #shallow #cloning

OBJECT 

const original = { name: 'John', age: 23, address: { city: 'Tashkent', state: 'Oqqorg\'on', } }
Enter fullscreen mode Exit fullscreen mode

SPREAD: 

// Spread => Shallow copying let copiedObj = {...original} copiedObj.name = 'Alice' copiedObj.address.city = 'Samarkand'; console.log(copiedObj.name) console.log(original.name) console.log(original.address.city) console.log(copiedObj.address.city) // Alice // John // Samarkand // Samarkand
Enter fullscreen mode Exit fullscreen mode

Equal(=): 

// = / very shallow copying it is even copying non-nested properties let copiedObj = original; copiedObj.name = 'Alice' copiedObj.address.city = 'Samarkand' console.log(original.name) console.log(copiedObj.name) console.log(original.address.city) console.log(copiedObj.address.city) // Alice // Alice // Samarkand // Samarkand
Enter fullscreen mode Exit fullscreen mode

Object.assign(): 

// Object.assign() => Shallow copy let copiedObj = Object.assign({}, original) copiedObj.name = 'Alice'; copiedObj.address.city = 'Samarkand' console.log(original.name) console.log(copiedObj.name) console.log(original.address.city) console.log(copiedObj.address.city) // John // Alice // Samarkand // Samarkand
Enter fullscreen mode Exit fullscreen mode

JSON: 

// JSON => Deep copy let copiedObj = JSON.parse(JSON.stringify(original)) copiedObj.name = 'Alice' copiedObj.address.city = 'Samarkand' console.log(original.name) console.log(copiedObj.name) console.log(original.address.city) console.log(copiedObj.address.city) // John // Alice // Tashkent // Samarkand
Enter fullscreen mode Exit fullscreen mode

Top comments (0)