Deep copy in ES6 using the spread syntax

Question

I am trying to create a deep copy map method for my Redux project that will work with objects rather than arrays  I read that in Redux each state should not change anything in the previous states   export const mapCopy    object  callback    gt        return Object keys object  reduce function  output  key         output key    callback call this      object key          return output                  It works       return mapCopy state  e   gt                 if  e id     action id                     e title    new item                              return e               However it does not deep copy inner items so I need to tweak it to   export const mapCopy    object  callback    gt        return Object keys object  reduce function  output  key         let newObject       object key        newObject style       newObject style       newObject data       newObject data        output key    callback call this  newObject        return output                  This is less elegant as it requires to know which objects are passed   Is there a way in ES6 to use the spread syntax to deep copy an object

User · Answer

Here is the deepClone function which handles all primitive, array, object, function data types

_x000D_

function deepClone(obj){_x000D_
 if(Array.isArray(obj)){_x000D_
  var arr = [];_x000D_
  for (var i = 0; i < obj.length; i++) {_x000D_
   arr[i] = deepClone(obj[i]);_x000D_
  }_x000D_
  return arr;_x000D_
 }_x000D_
_x000D_
 if(typeof(obj) == "object"){_x000D_
  var cloned = {};_x000D_
  for(let key in obj){_x000D_
   cloned[key] = deepClone(obj[key])_x000D_
  }_x000D_
  return cloned; _x000D_
 }_x000D_
 return obj;_x000D_
}_x000D_
_x000D_
console.log( deepClone(1) )_x000D_
_x000D_
console.log( deepClone('abc') )_x000D_
_x000D_
console.log( deepClone([1,2]) )_x000D_
_x000D_
console.log( deepClone({a: 'abc', b: 'def'}) )_x000D_
_x000D_
console.log( deepClone({_x000D_
  a: 'a',_x000D_
  num: 123,_x000D_
  func: function(){'hello'},_x000D_
  arr: [[1,2,3,[4,5]], 'def'],_x000D_
  obj: {_x000D_
    one: {_x000D_
      two: {_x000D_
        three: 3_x000D_
      }_x000D_
    }_x000D_
  }_x000D_
}) )

_x000D_

User · Answer

No such functionality is built-in to ES6  I think you have a couple of options depending on what you want to do   If you really want to deep copy    Use a library  For example  lodash has a cloneDeep method  Implement your own cloning function    Alternative Solution To Your Specific Problem  No Deep Copy   However  I think  if you re willing to change a couple things  you can save yourself some work  I m assuming you control all call sites to your function    Specify that all callbacks passed to mapCopy must return new objects instead of mutating the existing object  For example   mapCopy state  e   gt      if  e id     action id        return Object assign     e          title   new item              else         return e            This makes use of Object assign to create a new object  sets properties of e on that new object  then sets a new title on that new object  This means you never mutate existing objects and only create new ones when necessary   mapCopy can be really simple now   export const mapCopy    object  callback    gt      return Object keys object  reduce function  output  key        output key    callback call this  object key        return output                 Essentially  mapCopy is trusting its callers to do the right thing  This is why I said this assumes you control all call sites

User · Answer

use  clone   lt thing to copy gt    returns  lt new copy gt     untested use at own risk function clone o  m        return non object values   if  object     typeof o  return o      m  a map of old refs to new object refs to stop recursion   if  object     typeof m    null    m  m  new WeakMap     var n  m get o    if  undefined     typeof n  return n      shallow leaf clone object   var c  Object getPrototypeOf o  constructor      TODO  specialize copies for expected built in types i e  Date etc   switch c           shouldn t be copied  keep reference     case Boolean      case Error      case Function      case Number      case Promise      case String      case Symbol      case WeakMap      case WeakSet        n  o       break         array like collection objects     case Array        m set o  n  o slice 0            recursive copy for child objects       n forEach function v i           if  object     typeof v  n i   clone v  m                  break      case ArrayBuffer        m set o  n  o slice 0         break      case DataView        m set o  n  new  c  clone o buffer  m   o byteOffset  o byteLength         break      case Map      case Set        m set o  n  new  c  clone Array from o entries     m          break      case Int8Array      case Uint8Array      case Uint8ClampedArray      case Int16Array      case Uint16Array      case Int32Array      case Uint32Array      case Float32Array      case Float64Array        m set o  n  new  c  clone o buffer  m   o byteOffset  o length         break         use built in copy constructor     case Date      case RegExp        m set o  n  new  c  o         break         fallback generic object copy     default        m set o  n  Object assign new  c     o            recursive copy for child objects       for c in n  if  object     typeof n c   n c   clone n c   m        return n

User · Answer

const a       foods        dinner   Pasta        let b   JSON parse JSON stringify a   b foods dinner    Soup  console log b foods dinner     Soup console log a foods dinner     Pasta   Using JSON stringify and JSON parse is the best way  Because by using the spread operator we will not get the efficient answer when the json object contains another object inside it  we need to manually specify that

User · Answer

function deepclone obj        let newObj            if  typeof obj      object             for  let key in obj                let property   obj key                   type   typeof property              switch  type                    case  object                       if  Object prototype toString call  property         object Array                               newObj key                                for  let item of property                                newObj key  push this deepclone item                                                   else                           newObj key    deepclone property                                             break                  default                      newObj key    property                      break                                   return newObj       else           return obj

User · Answer

I often use this   function deepCopy obj        if typeof obj      object     obj     null            return obj             if obj instanceof Date            return new Date obj getTime                if obj instanceof Array            return obj reduce  arr  item  i    gt                arr i    deepCopy item               return arr                             if obj instanceof Object            return Object keys obj  reduce  newObj  key    gt                newObj key    deepCopy obj key                return newObj

User · Answer

Here s my deep copy algorithm  const DeepClone    obj    gt         if obj   null  typeof obj     object  return null      let newObj        obj         for  let prop in obj          if           typeof obj prop       quot object quot             typeof obj prop       quot function quot                    newObj prop    DeepClone obj prop                       return newObj

User · Answer

I myself landed on these answers last day  trying to find a way to deep copy complex structures  which may include recursive links  As I wasn t satisfied with anything being suggested before  I implemented this wheel myself  And it works quite well  Hope it helps someone   Example usage   OriginalStruct deep copy   deep copy     attach the function as a method  TheClone   OriginalStruct deep copy      Please look at https   github com latitov JS DeepCopy for live examples how to use it  and also deep print   is there   If you need it quick  right here s the source of deep copy   function   function deep copy          use strict        required for undef test of  this  below         Copyright  c  2019  Leonid Titov  Mentions Highly Appreciated       var id cnt   1      var all old objects           var all new objects           var root obj   this       if  root obj     undefined            console log  deep copy   error  wrong call context            return             var new obj   copy obj root obj        for  var id in all old objects            delete all old objects id    temp id             return new obj              function copy obj o            var new obj               if  o   temp id     undefined                o   temp id   id cnt              all old objects id cnt    o              all new objects id cnt    new obj              id cnt                  for  var prop in o                    if  o prop  instanceof Array                        new obj prop    copy array o prop                                      else if  o prop  instanceof Object                        new obj prop    copy obj o prop                                      else if  prop        temp id                         continue                                    else                       new obj prop    o prop                                                     else               new obj   all new objects o   temp id                     return new obj            function copy array a            var new array               if  a   temp id     undefined                a   temp id   id cnt              all old objects id cnt    a              all new objects id cnt    new array              id cnt                  a forEach  v i    gt                    if  v instanceof Array                        new array i    copy array v                                     else if  v instanceof Object                        new array i    copy object v                                     else                       new array i    v                                                      else               new array   all new objects a   temp id                     return new array            Cheers

User · Answer

From MDN     Note  Spread syntax effectively goes one level deep while copying an array  Therefore  it may be unsuitable for copying multidimensional arrays as the following example shows  it s the same with Object assign   and spread syntax     Personally  I suggest using Lodash s cloneDeep function for multi-level object array cloning   Here is a working example    x000D   x000D  const arr1       a   1     x000D   x000D  const arr2       arr1   x000D   x000D  const arr3     clone arr1   x000D   x000D  const arr4   arr1 slice    x000D   x000D  const arr5     cloneDeep arr1   x000D   x000D  const arr6           arr1       a bit ugly syntax but it is working  x000D   x000D   x000D     first level x000D  console log arr1     arr2      false x000D  console log arr1     arr3      false x000D  console log arr1     arr4      false x000D  console log arr1     arr5      false x000D  console log arr1     arr6      false x000D   x000D     second level x000D  console log arr1 0      arr2 0       true x000D  console log arr1 0      arr3 0       true x000D  console log arr1 0      arr4 0       true x000D  console log arr1 0      arr5 0       false x000D  console log arr1 0      arr6 0       false x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 4 lodash js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Instead use this for deep copy  var newObject   JSON parse JSON stringify oldObject      x000D   x000D  var oldObject     x000D    name   A   x000D    address    x000D      street   Station Road   x000D      city   Pune  x000D      x000D    x000D  var newObject   JSON parse JSON stringify oldObject    x000D   x000D  newObject address city    Delhi   x000D  console log  newObject    x000D  console log newObject   x000D  console log  oldObject    x000D  console log oldObject   x000D   x000D   x000D

User · Answer

const cloneData    dataArray    gt        newData         dataArray forEach  value    gt            newData push     value              return newData      a     name  siva     name  siva1       b   myCopy a   b     a    false

[javascript] Deep copy in ES6 using the spread syntax

Examples related to javascript

Examples related to ecmascript-6

Examples related to redux

Examples related to spread-syntax