each day build day!/Day 16/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fundamentals Reference vs Copy</title>
</head>

<body>
    <center>
        <h1> Js Fundamentals : Reference vs Copy</h1>
    </center>
    <script>
        // start with strings, numbers and booleans

        // Let's say we have an array
        const players = ['Mario', 'Luigi', 'Deadpool', 'Poopman'];

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


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

        // however what happens when we update that array?

        // 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
        const players2 = players.slice();
        // or create a new array and concat the old one in
        const player3 = [].concat(players);
        // or use the new ES6 Spread
        const player4 = [...players];
        // now when we update it, the original one isn't changed
        const players5 = Array.from(players);
        // The same thing goes for objects, let's say we have a person object
        players4[3] = "lol";
        console.log("copy", players4, "original :", players);
        // with Objects
        const person = {
            name: 'Mario Bros',
            age: 40
        };

        // and think we make a copy:

        // how do we take a copy instead?
        const shallowCopy = Object.assign({}, person, { number: 11, age: 23 })
        console.log("original :", person, " updated :", shallowCopy);

        // We will hopefully soon see the object ...spread
        const copyOfObject = { ...person }
        // 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 nestedObject = {
            name: 'yuan',
            age: 10,
            social: {
                twitter: '@yuan',
                facebook: 'yuan.player'
            }
        };

        console.clear();
    console.log(nestedObject);
        // cheap trick
    const dev = Object.assign({}, nestedObject);

    const dev2 = JSON.parse(JSON.stringify(nestedObject));
    console.table(dev2);

    </script>


</body>

</html>