JSFiddle - React, Tailwind, and code Playground

by ktstowell

HTML

<h4> Shallow reference copy with nested objects</h4>
<p>Foos: [
    <br>
    <span id='foo1'></span>
    <br>
    <span id='foo2'></span>
    <br>
    ] 
</p>
<button onclick="updateFoos()">Update foos!</button>

JavaScript

var foo = {
    bar: {baz: 'bing'},
    bear: 'hug'
};

var foo2 = {};

for(var prop in foo) {
    foo2[prop] = foo[prop];
}

var foo1Ele = document.getElementById('foo1');
var foo2Ele = document.getElementById('foo2');

foo1Ele.textContent = 'Foo 1: '+JSON.stringify(foo);
foo2Ele.textContent = 'Foo 2:' + JSON.stringify(foo2);

window.updateFoos = function() {
    foo.bar.baz = 'bang';
    foo.bear = 'claw';
    foo1Ele.textContent = 'Foo 1: '+JSON.stringify(foo);
    foo2Ele.textContent = 'Foo 2:' + JSON.stringify(foo2);
}