Samuel Ojerinde

Posted on May 25

Understanding Primitives and Reference Types in JavaScript.

Introduction

Have you ever wondered why some data types can be changed while others can't? The answer lies in the difference between primitives and reference data types. When working with JavaScript, it’s essential to understand the difference between primitive and reference data types. These types define how data is stored and accessed in your code. In this article, I’ll explore what primitives and reference types are, with examples to help you understand them better.

What are Primitive Types?

Primitive types are the basic data types in JavaScript. They include:

Number:

Represents both integers and floating-point numbers.

const age = 25;
const price = 19.99;

String:

Represents a sequence of characters.

const name = "Samuel";
const greeting = "Hello, world!";

Boolean:

Represents either true or false.

const isStudent = true;
const hasGraduated = false;

Undefined:

Represents a variable that has been declared but not assigned a value.

let job;
console.log(job); // Outputs: undefined

Null:

Represents the intentional absence of any object value.

const car = null;

Symbol:

Represents a unique and immutable identifier.

const sym = Symbol('unique');

Characteristics of Primitive Types:

They are immutable, meaning their values cannot be changed.
They are stored directly in the location that the variable accesses.

Example:

const a = 10;
let b = a;
b = 20;

console.log(a); // Outputs: 10
console.log(b); // Outputs: 20

In this example, changing b does not affect a because they are separate copies of the value. You will also notice that b was declared with let keyword, this is because primitives or variables declared with const keyword cannot be changed.

What are Reference Types?

Reference types, on the other hand, are objects stored as references. This means that when you create an object, the variable doesn't hold the actual object but a reference to it. Reference types include:

Objects:

Collections of key-value pairs.

const person = {
  name: "Samuel",
  age: 30
};

Arrays:

Ordered collections of values.

const colors = ["red", "green", "blue"];

Functions:

Blocks of code designed to perform a particular task.

function greet() {
  console.log("Hello!");
}

Characteristics of Reference Types:

They are mutable, meaning their values can be changed.
They are stored as references, which point to the actual data in memory.

Example:

const person1 = { name: "Sam" };
const person2 = person1;

person2.name = "Sam";

console.log(person1.name); // Outputs: Sam
console.log(person2.name); // Outputs: Sam

In this example, changing person2 also changes person1 because they both reference the same object.

Conclusion

Understanding the difference between primitives and reference types is crucial for effective JavaScript programming. Primitives are simple, immutable data types stored directly in variables, while reference types are complex, mutable data types stored as references to the actual data.

DEV Community