Simplified Knowledge Blog

Reference and Value: Why you should know the difference

In the following examples emojis are used to name variables and should not be replicated, otherwise your code will return a syntax error.

If for some reason you've tried comparing objects or arrays in JavaScript, you probably went confused by why they weren't the same even having an identical value/content..

This happens because JavaScript compares non-primitive types with their reference and not their actual value, and not knowing that, can cause a headache.

Copy by Value

Primitive data types like String, Number, Boolean, undefined, null, are tagged as Value types, because, when we throw its information or value in some other variable, this new variable will copy its value.

See the following example.

let 🍎 = "Apple"
let 💰 = 0
let 🍏 = 🍎 // "Apple"
let 👜 = 💰 // 0
console.log(🍏 === 🍎) // true
console.log(👜 === 💰) // true

When comparing the new variables using console.log(), it will return true, because JavaScript compares the primitives according to their content.

Copy by Reference

On the other hand, the non-primitives, Arrays, Objects, and Functions, are tagged as Reference types. Because, when we define a new variable with its information, this new variable will have its reference and not its value.

See the following example

const 🚗 = [💺, 💺, 💺, 💺]
const 🚓 = [💺, 💺, 💺, 💺]
const 🚘 = 🚗
console.log(🚓 === 🚗) // false
console.log(🚘 === 🚗) // true

Let's go back to some lines in the text "this new variable will have its reference and not its value". But, if it won't have the value, how did javascript manage to compare the 🚘 with 🚗? And why does 🚓 when compared to 🚗, JavaScript tell us that it's "different"?

The answer is simple, comparison by reference! Primitive data types are copied and compared by value, and non-primitive ones are copied and compared by reference.

So knowing the difference between reference and actual value is critical for learning advanced hooks in React like useEffect(), useCallback() and useMemo().

Ok, but what is Reference?

References are addresses allocated in your computer's memory, and when we compare two non-primitive pieces of information, for example, an object, JavaScript compares its memory address and not its contents. Let's see one more example.

const 👩‍⚕️ = {
  name: "Bia",
  age: 28
};
const 👩‍🍳 = 👩‍⚕️;
console.log(👩‍⚕️.name); // Bia
👩‍🍳.nome = "Patricia";
console.log(👩‍⚕️.name); // Patricia
console.log(👩‍🍳.name); // Patricia

When we set the name of 👩‍🍳 to Patricia, the name of 👩‍⚕️ also changes! That's because the content of 👩‍🍳 is a reference to the content of 👩‍⚕️, so whatever changes there are in any reference to the Object, Array, Function the original one will be affected.

Why knowing this is important?

If you've been using React for a while, we have several hooks and features that help our program's performance, and an important one is the useEffect()'s dependency array. If you put an array or object as a dependency, your page will not work correctly, and that's because useEffect() is comparing non-primitives with their reference.

Another example is the useCallback(), used to memorize functions and not just compare with their reference, preventing the creation of another identical function on every rendering. If you want a post talking about it, let me know!

Remember!

• Value types are Primitives and copied by their value.
• Reference types are non-primitives and are copied by their reference.

• When comparing identical non-primitives, they return false because their reference type.

• Value types → String, Number, Boolean, undefined and null.
• Reference types → Array, Object and Function.