Skip to main content

Shallow vs Deep Copy

Check this out before reading

Here's a great video called Deep Copying vs Shallow Copying.

Shallow Copy​

Primative Datatypes

What are Primative Datatypes?​

  • In Javascript, there are 7 Primative Datatypes: string, number, boolean, bigint, undefined, null, and symbol.

  • All primative values are immuntable, meaning the values contained in them cannot be changed.

  • This data is not an object or has no methods or properties.

    • Javascript has Autoboxing, which gives the appearance of methods and properties.

    • In this example, below it looks like toUpperCase() and length are methods and properties of the string primitive.

      let mystring = "lower case string";
      mystring.toUpperCase();
      console.log(mystring);
      // 'LOWER CASE STRING'
      console.log(mystring.length)
      // 17

Are arrays and object Primative?​

  • Arrays and Objects are not primative values, they can store primative values, but are not themselves primative.
  • Since arrays and objects are composite, and not primative, if copied, the values are shared with the new object. So if the information or data within that original array structure is changed the values of the new array will also change or update.

How are Primative values treated in memory?​

  • In the new variable the value is copied from the original variable.
Example:​
// Using a string method doesn't mutate the string
let bar = "baz";
console.log(bar);               // baz
bar.toUpperCase();
console.log(bar);               // baz

// Assignment gives the primitive a new (not a mutated) value
bar = bar.toUpperCase();       
console.log(bar);               // BAZ

// By contrast, using an array method mutates the array
let foo = [];
console.log(foo);               // []
foo.push("plugh");
console.log(foo);               // ["plugh"]

Example: How Shallow Arrays are passed​

let shallowArr1 = [true,null,0.03235401,'tall',100,undefined,'short']
console.log(shallowArr1)
// expected: [true,null,0.03235401,'tall',100,undefined,'short']

let shallowArr2 = shallowArr1
console.log(shallowArr2)
// expected: [true,null,0.03235401,'tall',100,undefined,'short']

shallowArr2[0] = false
console.log(shallowArr2)
// expected: [false,null,0.03235401,'tall',100,undefined,'short']

console.log(shallowArr1)
// expected: [false,null,0.03235401,'tall',100,undefined,'short']

Shallow Copy Methods examples​

Spread Operator (...)
const a = [123,'Test',false]
const b = [...a]
console.log(b)                  // expected: [123, 'Test', false]
console.log(a)                  // expected: [123, 'Test', false]

// Update Values
b[2] = true
b[1] = 'Updated Test'
console.log(a)                  // expected: [123, 'Test', false]
console.log(b)                  // expected: [123, 'Updated Test', true]
Array.from(arrayLike)
const goats1 = ['jordan','bryant','james']
const goats2 = Array.from(goats1)
console.log(goats1)                 // expected: ['jordan','bryant','james']
console.log(goats2)                 // expected: ['jordan','bryant','james']

// Modify Value
goats2[2] = 'curry'
console.log(goat2)                  // expected: ['jordan', 'bryant', 'curry']
Array.slice(0)
const arr1 = [true,null,"Testing"]
const arr2 = arr1.slice(0)
console.log(arr1)                   // expected: [true,null,"Testing"]
console.log(arr2)                   // expected: [true,null,"Testing"]

// Update Values
arr2[2] = 'TEST 123'
arr2[0] = false
console.log(arr1)                   // expected: [true,null,"Testing"]
console.log(arr2)                   // expected: [false,null,"TEST 123"]
Array.concat(array1)
const cat1 = [123,false,null,undefined,"FOO"]
const cat2 = [].concat(cat1)
console.log(cat1)                   // expected: [123,false,null,undefined,"FOO"]
console.log(cat2)                   // expected: [123,false,null,undefined,"FOO"]

// Update Values
cat2[4] = 'BAR'
cat2[1] = true
cat2[0] = 789
console.log(cat1)                   // expected: [123,false,null,undefined,"FOO"]
console.log(cat2)                   // expected: [789,true,null,undefined,"BAR"]
Object.create(, obj)
Object.assign(, obj)

Deep Copy​

Composite Datatypes

What are Composite Datatypes? Are arrays Composite? Are objects Composite? examples links

What is it? When to use it? How to use it?

Examples

Arrays Objects

Explain it to a five-year-old

What happens when a complex object or array is copied?

What is a shallow object?

  • Stores primative values What is a shallow array?
  • Stores primative values

What is a deep object?

  • Stores What is a deep array?
Deep Copy Methods