1

copy can be achieved in 3 ways :

  1. Object.assign
  2. Lodash library
  3. Using for both 'Spread (operator)' and 'Rest (parameter)'

I need examples for simple usages for both 'Spread (operator)' and 'Rest (parameter)'

Ida Amit
  • 1,411
  • 2
  • 13
  • 27
  • Does this answer your question? [What is the most efficient way to deep clone an object in JavaScript?](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) – iSkore Sep 17 '20 at 10:27
  • 1
    deep copy can't be done using Object.assign/spread/rest. only the first level. for deep copy you need to implement a recursive solution or use lodash.cloneDeep. – Stav Alfi Sep 17 '20 at 10:36
  • 1
    this is not a duplicate. there is no relation between: "what is the best way to ..." to "Spread Operator simple examples" – Stav Alfi Sep 17 '20 at 10:45

1 Answers1

1

Examples for simple usages for both 'Spread (operator)' and 'Rest (parameter)'

var a = {b: 'b', c: ['c1', 'c2'], d: {d1: 'd1', d2: 'd2'}}
    a.log -> {b: "b", c: ["c1", "c2"], d: {d1: "d1", d2: "d2"}}
    //////////////////////////////////////////////////////////////////////////////
    // Copy a and update c to empty array
    var a1 = {...a, c: []}
    a1.log -> {b: "b", c: [], d: {d1: "d1", d2: "d2"}}
    
    a.d === a1.d   // same object
    true
//////////////////////////////////////////////////////////////////////////////
    // Copy a and copy c 
    var a1 = {...a, c: [...a.c]}
    a1.log -> {b: "b", c: ["c1", "c2"], d: {d1: "d1", d2: "d2"}}
    a.c === a1.c    // different object
    false
    a.d === a1.d   // same object
    true
    
    //////////////////////////////////////////////////////////////////////////////
    // Copy a and copy c. Remove element 'c1' add element 'c4'
    var a1 = {...a, c: [...a.c.filter(e => e !== 'c1'), 'c4']}
    a1.log -> {b: "b", c: ["c2", "c4"], d: {d1: "d1", d2: "d2"}}
    
    //////////////////////////////////////////////////////////////////////////////
    // Copy a . replace element d
    var a1 = {...a, d: {}}
    a1.log -> {b: "b", c: ["c1", "c2"], d: {}}
    
    //////////////////////////////////////////////////////////////////////////////
    // Copy a and copy element d 
    var a1 = {...a, d: {...a.d}}
    a1.log -> {b: "b", c: ["c1", "c2"], d: {d1: "d1", d2: "d2"}}
    a.d === a1.d   // different object
    false
    
    //////////////////////////////////////////////////////////////////////////////
    // Copy a and copy element d and replace d1
    var a1 = {...a, d: {...a.d, d1: 'd3'}}
    a1.log -> {b: "b", c: ["c1", "c2"], d: {d1: "d3", d2: "d2"}}
    
    //////////////////////////////////////////////////////////////////////////////
    // Copy a and copy element d and replace d1 add d4
    var a1 = {...a, d: {...a.d, d1: 'd3', d4: 'd4'}}
    
    a1.log -> {b: "b", c: ["c1", "c2"], d: {d1: "d3", d2: "d2", d4: "d4"}}
    
    //////////////////////////////////////////////////////////////////////////////
    // Deep copy for a
    var d = {}
    var d = {...a, c: [...a.c], d: {...a.d}}
    // because element b is enumerable element we do not need to deep copy b
    d.b === a.b
    true
    a.b = 'b1'
    "b1"
    d.b
    "b"
Ida Amit
  • 1,411
  • 2
  • 13
  • 27
  • Deep copy can't be done using Object.assign/spread/rest. only the first level. for deep copy you need to implement a recursive solution or use lodash.cloneDeep.as @stavalfi mentioned – Ida Amit Sep 17 '20 at 10:45