This is the 16th day of my participation in Gwen Challenge

Object and Arrays – Reference VS Copy

Today the content of this module can be said to be a review summary, as a knowledge point to consolidate the study of it. Objects and arrays – reference VS copy. Let’s just go with that and start today’s review.

1. Effect display

Today’s content does not want what effect, pure record and practice mainly.

After all, when I first saw the display of the final result, I was a little bit dumbstruck, wasn’t it? Then I pulled the code, emmmmmm… Treat me honestly.

Second, the implementation

The final code

<! DOCTYPE html><html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Reference VS Copy</title>
</head>
<body>

  <script>
    // First we start with strings, numbers, and booleans
    let a = 'A';
    let b = a;
    a = 'B';

    console.log(a,b);  //B,A

    let c = 0;
    let d = c;
    c++;

    console.log(c,d);  / / 1, 0

    let e = true;
    letf = e; e = ! f;console.log(e,f);  //false,true

    let g = "A";
    let h = "A";
    let i = "A";
    (h = "B"),(i = "C"),(g += h),(g += i);
    console.log(g,h,i);  //ABC,B,C

    // Let's say we have an array
    const players = ['Wes'.'Sarah'.'Ryan'.'Poppy'];

    // and we want to make a copy of it.


    // You might think we can just do something like this:

      // let players2 = players;

    // however what happens when we update that array?

      // players2[0] = "alxe";

    // now here is the problem!

      // console.log(players,players2);

    // oh no - we have edited the original array too!

    // Why? It's because that is an array reference, not an array copy. They both point to the same array!

    // So, how do we fix this? We take a copy instead!

    // one way

    let players2 = players.slice();
    players2 = [].concat(players);
    players2 = [...players];
    players2[0] = 'alex';
    console.log(players,players2);

    function createObj(name) {
      return {
        name:name
      };
    }

    let p1 = createObj('alex');
    let p2 = createObj('jone');
    let p3 = createObj('tony');
    let p4 = createObj('thor');

    let f1 = [p1,p2,p3,p4];
    let f2 = f1.slice();
    // let f2 = [].concat(f1);
    // let f2 = [...f1];

    f2[0].name = "alixesss";

    console.log(f1[0].name);
     

    // or create a new array and concat the old one in

    // or use the new ES6 Spread

    // now when we update it, the original one isn't changed

    // The same thing goes for objects, let's say we have a person object

    // with Objects
    const person = {
      name: 'Wes Bos'.age: 80
    };

    // and think we make a copy:

    // how do we take a copy instead?

    // We will hopefully soon see the object ... spread

    // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.

  </script>

</body>
</html>

Copy the code

Iii. Summary and review

Process decomposition

1. First we’ll start with strings, numbers, and booleans

    // First we start with strings, numbers, and booleans
    let a = 'A';
    let b = a;
    a = 'B';

    console.log(a,b);  //B,A

    let c = 0;
    let d = c;
    c++;

    console.log(c,d);  / / 1, 0

    let e = true;
    letf = e; e = ! f;console.log(e,f);  //false,true
Copy the code

To illustrate this with a legend:

So it’s pretty straightforward to see what the values of a and B are.

Let’s do a more complicated one

    let g = "A";
    let h = "A";
    let i = "A";
    (h = "B"),(i = "C"),(g += h),(g += i);
    console.log(g,h,i);  //ABC,B,C
Copy the code

Four steps to work out the value of the four parts (h = “B”), (I = “C”), (g + = h), (g + = I) :

  1. So let’s say we have an array
    // Let's say we have an array
    const players = ['Wes'.'Sarah'.'Ryan'.'Poppy'];

Copy the code

  • and we want to make a copy of it.

  • You might think we can just do something like this:

 let players2 = players;
Copy the code
  • however what happens when we update that array?
players2[0] = "alxe";
Copy the code
  • now here is the problem!
console.log(players,players2);
Copy the code

  • oh no – we have edited the original array too!

  • Why? It’s because that is an array reference, not an array copy. They both point to the same array!

  • So, how do we fix this? We take a copy instead!

  • one way

    let players2 = players.slice();
    players2[0] = 'alex';
    console.log(players,players2);
Copy the code

    let players2 = players.slice();
    players2 = [].concat(players);
    players2 = [...players];
    players2[0] = 'alex';
    console.log(players,players2);

    function createObj(name) {
      return {
        name:name
      };
    }

    let p1 = createObj('alex');
    let p2 = createObj('jone');
    let p3 = createObj('tony');
    let p4 = createObj('thor');

    let f1 = [p1,p2,p3,p4];
    let f2 = f1.slice();
    // let f2 = [].concat(f1);
    // let f2 = [...f1];

    f2[0].name = "alixesss";

    console.log(f1[0].name);
     
Copy the code

let players2 = players.slice();
    players2 = [].concat(players);
    players2 = [...players];
    players2[0] = 'alex';
    console.log(players,players2);

    function createObj(name) {
      return {
        name:name
      };
    }

    let p1 = createObj('alex');
    let p2 = createObj('jone');
    let p3 = createObj('tony');
    let p4 = createObj('thor');

    let f1 = [p1,p2,p3,p4];
    let f2 = f1.slice();
    // let f2 = [].concat(f1);
    // let f2 = [...f1];

    //f2[0].name = "alixesss";
    
    f2[0] = { name:"alexsss"};

    console.log(f1[0].name);
     
Copy the code

  • or create a new array and concat the old one in

  • or use the new ES6 Spread

The above can be summarized as slice, concat and ES6 deconstruction methods.Copy the code

  • now when we update it, the original one isn’t changed

  • The same thing goes for objects, let’s say we have a person object

There’s a lot to explore in the array section, but for the object section, I think we can do a separate study and eat some of it first.