Understanding Variables and Types in JavaScript

An introduction to Primitive and Reference Types

JavaScript, like many programming languages, uses variables as fundamental building blocks. Understanding the types of variables and how they operate is crucial for mastering JavaScript. In this article, we will explore the differences between primitive and reference types, delve into how variables work, and provide practical examples to illustrate these concepts.

What Are Variables?

Variables are essential components in any programming language. They store values that can be changed and reused throughout your code. In JavaScript, variables can hold different types of values, and their primary purpose is to store data that can be referenced and manipulated.

let age = 30;

// You can later change the value of 'age':
age = 31;

This process is known as variable reassignment.

Primitive Types

In JavaScript, there are six primitive data types:

1. String: Used for text.
2. Number: Used for numbers (both integers and floating-point numbers).
3. Boolean: Represents true or false.
4. Null: Represents the intentional absence of any value.
5. Undefined: Represents a variable that has been declared but not yet assigned a value.
6. Symbol: A unique and immutable value, introduced in ECMAScript 2015.
7. BigInt: Used for arbitrarily large integers.

Here are examples of each primitive type:

let name = "John Doe"; // String
let isStudent = true; // Boolean
let score = 95; // Number
let data = null; // Null
let unassigned; // Undefined
let id = Symbol("id"); // Symbol
let bigNumber = 1234567890123456789012345678901234567890n; // BigInt

Reference Types

JavaScript has only one reference type: Object. This includes arrays and functions, which are both types of objects. Objects are used to store collections of data and more complex entities.

Example of an Object:

let person = {
    name: "John",
    age: 30
};

Example of an Array:

let numbers = [1, 2, 3, 4, 5];

How Primitive Types Are Stored

Primitive values are stored directly in the location that the variable accesses. This means that when you assign a primitive value to a variable, the actual value is stored in the memory space associated with that variable.

For example:

let greeting = "Hello world!";
let count = 42;
let isActive = false;

Each of these values is stored in its own location in memory.

How Reference Types Are Stored

Reference types, on the other hand, are stored differently. When you assign an object to a variable, the variable stores a reference (or pointer) to the memory location where the object is stored, rather than the object itself.

Example:

let car = {
    make: "Toyota",
    model: "Corolla"
};

Here, car does not directly hold the object { make: "Toyota", model: "Corolla" }. Instead, it holds a reference to the memory location where this object is stored.

Practical Example 1: Copying Variables

To illustrate how reference types work, let’s consider copying an object:

let original = { 
  a: 10,
  b: 25,
  c: 40,
};

let copy = original;
copy.a = 20;

console.log(original.a); // Output: 20

In this example, both original and copy point to the same object in memory. Changing the value via copy also affects original.

Practical Example 2: Variable Assignment Without Altering the Original Variable

let originalValue = 42;
let newValue = originalValue;

newValue = 100;

console.log(originalValue); // Output: 42
console.log(newValue); // Output: 100

In this example:

• originalValue is assigned the value 42.
• newValue is assigned the value of originalValue, so it initially holds 42.
• When newValue is changed to 100, it only affects newValue, not originalValue.
• This demonstrates that assigning the value of one variable to another does not link them, changing one does not affect the other.

Conclusion

Understanding the distinction between primitive and reference types in JavaScript is fundamental. Primitive types are stored directly in the variable’s memory location, while reference types store a reference to the object in memory. This difference significantly impacts how variables are assigned and manipulated.

In summary:

1. Primitive Types: Stored directly in memory (string, number, boolean, null, undefined, symbol).
2. Reference Types: Stored as references to memory locations (objects, arrays, functions).

Remember these key points as you continue to explore and write JavaScript code. Mastery of these concepts will enhance your ability to manage data effectively in your applications.

In our next article, “Investigating Primitive Value Types in JavaScript”, we will delve deeper into each of the primitive value types in JavaScript, providing more detailed examples and exploring their unique characteristics. Stay tuned!