Data Types: Primitive and Reference

Hey Devs!

Welcome back! In our last session, we kicked off our JavaScript journey, learned what a programming language is, and even wrote our very first lines of code. If you haven't checked that out yet, I recommend doing so before diving into this one!

Today, we're going to dig a bit deeper into one of the most fundamental concepts in JavaScript: Data Types. Understanding how data is stored and handled is crucial for writing efficient and bug-free code.

What are Data Types?

Think of data types as categories for the information your program uses. Just like in the real world we have different types of things (numbers, words, dates), programming languages classify data so they know how to work with it.

In JavaScript, every piece of data you interact with - whether it's a number, some text, or even something more complex like a list of items has a specific type.

Why Do Data Types Matter?

Understanding data types is vital because it affects:

• How data is stored in memory: Different types of data require different amounts of space and are handled differently by the computer.
• How operations work: You can add numbers, but what happens when you "add" text? The data type determines the behavior.
• Preventing errors: Knowing the type of data you're working with helps you avoid common pitfalls and unexpected results.
• Code readability and maintainability: Clearly understanding data types helps you write code that's easier to read, debug, and maintain.

Primitive Data Types: The Building Blocks

Let's start with the simplest categories: Primitive Data Types. These are the fundamental, atomic values in JavaScript. When you work with a primitive value, you're working directly with the value itself.

JavaScript has seven primitive data types:

• Number: Used for both integers and floating-point numbers.

  let age = 30; // An integer
  let price = 19.99; // A floating-point number
  

• String: Used for sequences of characters (text). Strings are enclosed in single quotes, double quotes, or backticks.

  let name = "Alice";
  let greeting = 'Hello there!';
  let message = `You are ${age} years old.`; // Template literal with variable
  

  A String written in backtick is known as a template literal as it allows us to include variable values in between with the help of ${variableName} syntax.

• Boolean: Represents a logical entity and can have two values: true or false.

  let isAdmin = true;
  let isLoggedIn = false;
  

• Undefined: A variable that has been declared but has not yet been assigned a value.

  let declaredVariable; // Value is undefined
  console.log(declaredVariable); // Output: undefined
  

• Null: Represents the intentional absence of any object value. It's often used to indicate that a variable has no value.

  let emptyValue = null;
  console.log(emptyValue); // Output: null
  

• Symbol: A unique and immutable data type introduced in ES6 (ECMAScript 2015). A Symbol value is often used to create a unique identifier. Think of it like a special key that is guaranteed to be unique, even if you create two symbols with the same description. They are primarily used as object property keys to avoid naming collisions.

  const uniqueId = Symbol('id');
  const anotherId = Symbol('id');
  
  console.log(uniqueId === anotherId); // Output: false (They are unique!)
  
  let user = {
      name: "Ujjwalit",
      [uniqueId]: 21
  };
  
  console.log(user[uniqueId]); // Output: 21
  // You can't easily iterate over Symbol properties, which makes them great for "private" data.
  

• BigInt: Used for numbers larger than 2^53 - 1 or smaller than -(2^53 - 1).

  const reallyBigNumber = 9007199254740991n; // 'n' indicates a BigInt
  

When you assign a primitive value to a variable, you're essentially putting a copy of that value into the variable's "box." If you then assign that variable to another, a new copy is made.

Try this in your browser console:

let a = 10;
let b = a; // b gets a copy of the value of a

console.log(a); // Output: 10
console.log(b); // Output: 10

a = 20; // Change a

console.log(a); // Output: 20
console.log(b); // Output: 10 (b remains unchanged, it had its own copy)

Notice how changing a didn't affect b. That's the core behavior of primitive data types!

Reference Data Types: Working with Addresses

Now, let's move on to Reference Data Types. Unlike primitives, these types don't hold the actual value directly. Instead, they hold a reference (or an address) to where the value is stored in memory.

The most common reference data types in JavaScript are:

• Object: The most fundamental reference type. Everything else in JavaScript that isn't a primitive is an object. This includes:
  • Plain Objects ({})
  • Arrays ([])
  • Functions (function() {})
  • Dates (new Date())
  • Regular Expressions or Regex (/pattern/)
  • And many more built-in objects.

When you assign a reference type to a variable, you're not assigning the object itself, but rather a reference to its location in memory. If you assign that variable to another, both variables will then point to the same object in memory.

Let's see this in action:

let obj1 = {
    name: "Daksh",
    age: 19
};

let obj2 = obj1; // obj2 gets a copy of the *reference* to the object obj1 points to

console.log(obj1.name); // Output: Daksh
console.log(obj2.name); // Output: Daksh

obj1.name = "Priyanshu"; // Change a property of the object using obj1

console.log(obj1.name); // Output: Priyanshu
console.log(obj2.name); // Output: Priyanshu (obj2 also reflects the change because both point to the same object!)

See the difference? When we changed obj1.name, obj2.name also changed because both obj1 and obj2 were referring to the exact same object in memory. This is a critical concept to grasp when working with objects and arrays.

Why the Distinction Matters: Mutability

One of the biggest implications of primitive vs. reference types is mutability.

• Primitive values are immutable: Once created, their value cannot be changed. If you "change" a primitive variable, you're actually creating a new primitive value and assigning it to the variable.
• Reference values are mutable: The object itself (the data it contains) can be changed even if the reference to it remains the same.

Consider strings (primitive) and arrays (reference):

// String (Primitive - Immutable)
let str = "hello";
str[0] = "H"; // This won't work, strings are immutable
console.log(str); // Output: hello

str = "Hello"; // This creates a *new* string and reassigns it to str
console.log(str); // Output: Hello

// Array (Reference - Mutable)
let arr = [1, 2, 3];
arr[0] = 99; // This modifies the existing array
console.log(arr); // Output: [99, 2, 3]

let anotherArr = arr; // anotherArr now points to the same array
anotherArr.push(4);
console.log(arr); // Output: [99, 2, 3, 4]
console.log(anotherArr); // Output: [99, 2, 3, 4]

This distinction is fundamental to understanding how data flows and changes in your JavaScript applications.

Analogy:

If you have a Pen and a Pen Holder. Then there are two ways to ensure that the pen in the pen holder is always a working pen. If the pen is a variable, then suppose we store a refill, or a cartridge in the pen, and replace it time to time. The pen is the same, but it's ink is changing. This is called reference, you are working on refilling the ink in the pen that you already have.

Other way is that you replace the whole pen. Now this is what happens in primitive data types. The pen holder is assigned a completely new value everytime. There is no modification to the value. It's a completely new entity.

Checking Data Types

You can easily check the data type of a variable using the typeof operator:

console.log(typeof 10);        // Output: "number"
console.log(typeof "hello");   // Output: "string"
console.log(typeof true);      // Output: "boolean"
console.log(typeof undefined); // Output: "undefined"
console.log(typeof null);      // Output: "object" (This is a historical quirk in JS, null is *not* an object)
console.log(typeof Symbol('foo')); // Output: "symbol"
console.log(typeof 123n);      // Output: "bigint"
console.log(typeof {a: 1});    // Output: "object"
console.log(typeof [1, 2]);    // Output: "object"
console.log(typeof function(){}); // Output: "function" (Functions are a special type of object)

While typeof null returns "object," remember that null is a primitive value. It's an old bug in JavaScript that was never fixed to avoid breaking existing code. For checking if something is null, === null is the reliable way.

Wrapping Up

Understanding primitive and reference data types is a cornerstone of mastering JavaScript. It affects how you think about variable assignment, function arguments, and how your data behaves throughout your program. Don't worry if it feels a bit abstract at first; with practice, it will become second nature.

Keep experimenting with different data types in your console, and observe how they behave. The more you play around, the clearer these concepts will become!

Enjoy the content here?

Sign up on our platform or join our WhatsApp channel here to get more hands-on guides like this, delivered regularly.

See you in the next blog. Until then, keep practicing and happy learning!