ES6 spread to clone or extend an Object

by Julien Roche

HTML

<h1>Is Object.assign is equivalent to Object spreading to clone (or extend)?</h1>
<pre>
  <code id="my-original-person"></code>
</pre>
<pre>
  <code id="assigned-person"></code>
</pre>
<pre>
  <code id="spreaded-person"></code>
</pre>

<pre>
  <code>-</code>
</pre>

<pre>
  Children array share the same reference:
  <code id="assigned-children"></code>
</pre>
<pre>
  Children array share the same reference:
  <code id="spreaded-children"></code>
</pre>

CSS

body {
  display: flex;
  flex-wrap: wrap;
}

h1 {
  flex: 0 0 100%;
}

pre {
  background-color: #eaeaea;
  flex: 1 1 calc(33% - 4em);
  margin: 2em 2em 2em 2em;
}

Babel + JSX

let myOriginalPerson = {
	'firstName': 'John',
  'lastName': 'Doe',
  'age': 25,
  'children': ['Timmy', 'Johnny']
};

let assignedPerson = Object.assign({ }, myOriginalPerson);
let spreadedPerson = { ...myOriginalPerson };

document.querySelector('#my-original-person').innerHTML = JSON.stringify(myOriginalPerson, null, '\t');
document.querySelector('#assigned-person').innerHTML = JSON.stringify(assignedPerson, null, '\t');
document.querySelector('#spreaded-person').innerHTML = JSON.stringify(spreadedPerson, null, '\t');

document.querySelector('#assigned-children').innerHTML = myOriginalPerson.children  === assignedPerson.children;
document.querySelector('#spreaded-children').innerHTML = myOriginalPerson.children  === spreadedPerson.children;