14-ref_copy/index-START.html

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

  <script>
    // start with strings, numbers and booleans
    // COPY
    let age = 100;
    let age2 = age;
    console.log(age, age2);
    age = 200;
    console.log(age, age2);

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

    // and we want to make a copy of it.
    const team = players;
    console.log(players, team);

    // You might think we can just do something like this:
    // team[3] = 'lux';
    // console.log(players, team);

    // however what happens when we update that array?
    // changes on both players and team

    // now here is the problem!

    // 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!
    const team2 = players.slice();

    // one way

    // or create a new array and concat the old one in
    const team3 = [].concat(players);

    // or use the new ES6 Spread
    const team4 = [...players];

    // now when we update it, the original one isn't changed
    team4[3] = "yay";
    console.log(team4, players);

    const team5 = Array.from(players);

    // 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:
    const captain = person;
    // captain.number = 99;
    // console.log(person);

    // how do we take a copy instead?
    const captain2 = Object.assign({}, person, {number : 99, age : 12});
    console.log(captain2);

    // We will hopefully soon see the object ...spread
    // const cap3 = {...person}; not available yet

    // 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.
    const wes = {
      name: 'Wes',
      age: 100,
      social: {
        twitter: '@wesbos',
        facebook: 'wesbos.developer'
      }
    }

    console.log(wes);
    const dev = Object.assign({}, wes);
    console.log(dev);
    // dev.social.twitter = "lol" >>> will change wes object too

    // convert to string then object will give full deep clone, but slow?
    const dev2 = JSON.parse(JSON.stringify(wes));

  </script>

</body>
</html>