Javascript Shallow Clone & Deep Clone Notes

javascript-shallow-clone-and-deep-clone-notes.jsx

/*
	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 
*/