🟨JavaScript copying (by value and by reference)

differences between each kind of copying

In JavaScript, "copying" could mean two different things:

• by value (original doesn't change if copy changes)

• by reference (original does change if copy changes)

Copying by value

When we copy some primitives, we copy by value, so that the original does not change if the copy changes:

let x = 20
let y = x
y = 40
console.log(x)
// 20

Note that despite setting y equal to x, then changing y's value - the value of x does not change!

This happens with:

• a Number

• a String

• a Boolean

• a null

• an undefined

• a Symbol

An analogy of copying by value: copying an image from the internet and then modifying the copy in an image editing software; the original image does not change!

Copying by reference

However, with:

• an Object

• a function

• an Array

...we copy by reference:

let object1 = { 
    prop1: 100, 
    prop2: 'ax', 
    prop3: true 
}

let object2 = object1
object2.prop1 = 400

console.log(object1.prop1)
// 400

Notice how changing object2's property also changed object1's property automatically!

An analogy of copying by reference: editing a post on social media (our edit results in changing the original for all to see, as we change the original data!)