Photo by Gabriel Heinzer on Unsplash
Why you must understand the difference between Reference and Value in JS
2 categories of data types in JavaScript
There are two types - primitives and objects or (data types passed by Value and passed by Reference.
Values
Passing by value occurs when assigning primitives.
Value types:
- Number
- Boolean
- Undefined
- Null
- String
- Symbol
References
Passing by reference occurs when assigning objects.
Reference types:
- Objects
- Functions
- Arrays
- Class instances
The difference between value and reference
When you want to compare objects understanding the difference between values and references is important!
When you use the strict comparison operator "===", two variables having values are equal if they have the same value.
let a = 1
let b = 1
a === b //true
a == b // true
a === 1 //true
When you assign variable b to a JS copies the value, you have two different "1", they are indepentent!
let a = 1
let b = a //copies the same value to variable b
function add(element){
element++
}
add(a) // a = 2
// b = 1
What about reference? The comparison operator "===" works differently when comparing 2 references. References are equal only if they reference exactly the same object.
const person1 = { name: Adrian }
const person2 = { name: Adrian }
const person1Ref = person1
console.log(person1 === person2) // false
console.log(person1 === person1Ref) // true
The comparison operator returns true only when comparing references pointing to the same object: person1 === person1Ref or person1 === person1.
Why you must understand the difference?
You must understand it when comparing objects. It will make your work easier and avoid mistakes.
You can also compare their structure rather than their reference.