JavaScript Building Blocks: Variables, Primitive Types, and Reference Types

In the vast landscape of JavaScript, having traversed the realms of Node.js and demystified the core concept of Objects, it’s time to delve into the bedrock of the language: variables and data types.

In the previous article, we unveiled the heart of JavaScript, Objects. If you haven’t had a chance to read it, click here to explore the core of JavaScript. With that foundation, let’s move ahead.

What is a Variable?

At the heart of every programming language lies the concept of a variable. Think of variables as labeled boxes in a warehouse, where each box (variable) can contain an item (value). The beauty of these boxes is that you can replace the items inside, allowing for flexibility.

Variables serve multiple purposes:

• Storage: They hold and store data values;
• Reusability: Once defined, a variable can be used throughout your program;
• Manipulation: You can change the value of a variable, a process known as variable re-assignment;

For instance, if a variable initially holds the value “apple” and later you assign “orange” to it, we say the variable has changed. But what happens to the values?

Delving into Data Types

Data values in JavaScript are not just abstract concepts. They have types, and understanding these types is crucial for effective programming. All value types in JavaScript fall into two categories:

1. Primitive Value Types:
2. Reference Type (Object);

Primitive Value Types

There are six primitive data types in JavaScript:

String: A sequence of characters, enclosed within single or double quotes.

let greeting = "Hello World!";
console.log(greeting); // Outputs: Hello World!

Boolean: Represents a true or false value.

let isRaining = true;
console.log(isRaining); // Outputs: true

Number: Represents numerical values.

let age = 25;
let temperature = -5;
let average = 5.2;

console.log(age);        // Outputs: 25
console.log(temperature); // Outputs: -5
console.log(average);    // Outputs: 5.2

Null: Indicates the absence of value.

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

Undefined: Signifies that a variable has been declared, but not assigned a value.

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

Symbol: A unique, immutable primitive value.

const uniqueSymbol = Symbol('description');
console.log(uniqueSymbol); // Outputs: Symbol(description)

Each primitive value is stored directly in the location the variable accesses. They’re stored in the stack, a region of the computer’s memory that is set up in a last-in-first-out manner.

Reference Type: Object

Remember our mention that almost everything in JavaScript is an object? Well, this is where it gets intriguing. The only reference type in JavaScript is the object. But wait, what about arrays or functions? Yes, they’re objects too!

When you create an object, the value isn’t stored in the variable itself. Instead, the variable holds a reference (pointer) to the location in memory where the object is stored. This space in memory is the heap, a larger region of memory where data is stored and can be accessed by references.

For instance, when you have:

let variableA = { 
  a: 10,
  b: 20,
};

let copyOfA = variableA;

Both variableA and copyOfA point to the same memory location. If you change the object via one variable, the change is reflected when accessed via the other variable, because both are pointing to the same location in memory.

Wrapping Up

The concepts of primitive and reference types are fundamental to understanding how data is stored and manipulated in JavaScript. As we’ve seen, the difference lies not in the nature of the data but in how and where it’s stored.

Ready to dive deeper into the nuances of primitive types in JavaScript? Stay tuned for our next article where we’ll explore the world of primitive value types in detail.

Happy coding! 🚀