14-References-VS-Copying/index.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
      // let age = 100;
      // let age2 = age;
      // console.log(age, age2);
      // age = 200;
      // console.log(age, age2);

      // let name = "akshay";
      // let name2 = name;
      // console.log(name, name2);
      // name = "akshay sharma";
      // console.log(name, name2);

      // Let's say we have an array
      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";

      // however what happens when we update that array?

      // 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];
      team4[3] = "hee haaw";
      console.log(team4);

      const team5 = Array.from(players);

      // 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:
      // const captain = person;
      // captain.number = 99;

      // how do we take a copy instead?
      const cap2 = Object.assign({}, person, { number: 99, age: 23 });
      console.log(cap2);

      // 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.
      const akshay = {
        name: "akshay",
        age: 23,
        social: {
          instagram: "akshay.creator",
          twitter: "@akshay"
        }
      };

      console.clear();
      console.log(akshay);

      // Only 1 level deep
      const dev = Object.assign({}, akshay);

      // Alternate way to copy an object is
      const dev2 = JSON.parse(JSON.stringify(akshay));
    </script>
  </body>
</html>