JavaScript: Primitive & Reference Data Types

Programming languages have built-in data types. A data type defines the type of data held in variables. The latest ECMAScript standard defines nine types of data in JavaScript.

In this post, we will be covering the most common types and understanding the difference between primitive and reference types.

Primitives

Primitive types in JS are data types that are not objects and have no methods. They are immutable, meaning they cannot be altered.

From MDN:

Six Data Types that are primitives, checked by typeof operator:

• undefined : typeof instance === "undefined"
• Boolean : typeof instance === "boolean"
• Number : typeof instance === "number"
• String : typeof instance === "string"
• BigInt : typeof instance === "bigint"
• Symbol : typeof instance === "symbol"

The typeof operator simply returns a string indicating the type of the unevaluated operand.

When a primitive type is assigned to a variable, the variable copies or "becomes" the value that was assigned.

For example:

let a = 1
let b = 1

a === b //true

Variable 'a' and variable 'b' copied their assigned value and so we were simply comparing the number 1 to the number 1.

let x = 'Marzbarz'
let y = 'Marzbarz'

x === y //true

Variable 'x' and variable 'y' copied their assigned value and so we were simply comparing the string 'Marzbarz' to the string 'Marzbarz'.

Reference

Reference types in JS are:

• Objects
• Arrays

When a reference type is assigned to a variable, JS stores a reference in memory to the value so that when it is used it can refer back to it.

Let's look at a common code challenge:

function greet(person) {
    if (person === { name: 'Marzbarz' }) { 
        console.log('Hi Marzbarz!');
    } else {
        console.log('Who dis?');
    }
}


let input = { name: 'Marzbarz' };
greet(input);

What will the output be?

// Who dis?

Quick digression: When doing one of my first mock technical interviews, I got this little piece of advice which I considered to be as blunt as it is helpful.

When comparing data types (== or ===) you can never compare a reference data type to anything else.

That's it! If we review the code snippet above, notice that our function is attempting to compare two JS objects, which will be false because JS has stored the values as a reference in memory not as the object itself. Essentially we are asking the function to compare the stored location of one variable to the stored location of the other.

function greet(person) {
    if (person === { name: 'Marzbarz' }) { //ref2
        console.log('Hi Marzbarz!');
    } else {
        console.log('Who dis?');
    }
}


let input = { name: 'Marzbarz' }; //ref1
greet(input);

So with all that being said, how could we get our function to work? Well, we know that we can't compare objects, but we can compare the primitive types like strings. What if we did:

function greet(person) {
    if (person.name === 'Marzbarz') { 
        console.log('Hi Marzbarz!');
    } else {
        console.log('Who dis?');
    }
}


let name = { name: 'Marzbarz' };
greet(name);

//Hi Marzbarz!

By simply changing our conditional statement, we are now comparing two strings which in this case is true.

Conclusion

Hopefully, this helps you understand how JavaScript handles primitive and reference data!

I am always learning and open to feedback, discussions, and collaboration!