Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ccurtin/08c4214000305bcbce5fe8f604eb762d to your computer and use it in GitHub Desktop.
Save ccurtin/08c4214000305bcbce5fe8f604eb762d to your computer and use it in GitHub Desktop.
Javascript Shallow Clone & Deep Clone Notes
/*
Javascript Shallow Clone & Deep Clone Notes
--------------------------------------------
"Variables that are assigned a non-primitive value are given a reference to that value.
That reference points to the object’s location in memory.
The variables don’t actually contain the value."
*/
/*===================================================================================================*/
/*
Create an Object
*/
a = {
likes: {
color: ["red", "blue", "green"],
food: "pizza"
}
}
/* Now create a copy BUT any keys that are NOT Primitive Types (ie: string, number, boolean, null, undefined, symbol)
are created as references to the original objects, that is they share the same memory address as the original.
Reference Types include "Arrays, Objects & Function"
Object.assign() will ONLY "clone" the first level of properties
The same applies for shallow level clones of Arrays.
*/
b = Object.assign({}, a)
// To clone an Array(shallow copy):
// b = a.slice()
// OR
// b = [...a]
/*
So this means we can set `b.likes = {color: ["red"], food: "steak"}` and
`a.likes` will stay in its original form but `b.likes` will be updated.
*/
b.likes = {color: ["red"], food: "steak"}
// Results of `a`:
// {
// likes: {
// color: ["red", "blue", "green"],
// food: "pizza"
// }
// }
// Results of `b`:
// {
// likes: {
// color: ["red"]
// food: "steak"
// }
// }
/*===================================================================================================*/
/*
BUT if we update a Reference Type within the copied object, that is update the ACTUAL object data that
`b.likes` refers to(ie:`{color: ["red", "blue", "green"], food: "pizza"}`), then both the original AND copied objects are updated!
This is because Reference Types quite literally "refer" to their original memory address.
*/
b.likes.color = "orange"
// Results of `a`:
// {
// likes: {
// color: "orange",
// food: "pizza"
// }
// }
// Results of `b`:
// {
// likes: {
// color: "orange"
// food: "steak"
// }
// }
/*===================================================================================================*/
/*
You "can" deep-clone objects using JSON.stringify() but ONLY when the Object
contains parsable data-types, ex: Can't parse a Date() object, RegExp, or other functions
Note: "Date()" object will be converted to String(ISO format ex:"2018-05-20T01:42:54.354Z")
*/
var b = JSON.parse(JSON.stringify(a));
/*===================================================================================================*/
/*
Need more advanced cloning?
Probably best to use a package like : https://www.npmjs.com/package/clone-deep
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment