The Building Blocks: JS Variables

Discover how to store, manage, and manipulate information—the fundamental building blocks of any program.

Lesson ProgressStep 1 of 10
let score = 10;
const name = "Alex";
let active = true;
const user = { ... };
⭐ 0 EXP

Welcome! Variables are the memory of a program. Think of them as labeled boxes for storing data.

// Welcome to the JavaScript simulator

Declaring Variables: `let`, `const`, & `var`

To store data, you first declare a variable. Modern JavaScript gives you two main keywords:

  • let: Use this for variables whose value will change.
  • const: Use this for variables whose value will not be reassigned. This is the preferred default.
  • var: This is the old way. It has confusing scoping rules and should be avoided in modern code.
const PI = 3.14159; // Cannot be reassigned
let score = 0;        // Can be reassigned
score = 10;

System Check

Which keyword creates a variable that *cannot* be reassigned?

Advanced Holo-Simulations

⭐ 0 EXP

Log in to unlock these advanced training modules and test your skills.

Achievements

🏆
Variable Virtuoso

Correctly declare variables using let, const, and var.

🏗️
Logic Leader

Correctly order variable declarations and operations.

✍️
Syntax Specialist

Prove your mastery of JavaScript variable syntax.

Mission: Declare Your Data

Create three variables: `userName` (a `const` string), `userAge` (a `let` number), and `isStudent` (a `let` boolean). Our AI assistant will provide real-time feedback.

A.D.A. Feedback:

> Awaiting input...

Challenge: Order of Declaration

It's common to declare constants, then variables. Drag the elements into the correct logical order from top to bottom.

let score = 0;
const MAX_PLAYERS = 10;
score = score + 1;

Challenge: Complete the Syntax

Fill in the missing parts to declare a constant object.

const=name: "John";

Consult A.D.A.

Community Holo-Net

Peer Project Review

Submit your "Simple Counter" project for feedback from other Net-Runners.

Support Us

Writing with Meaning: The Power of `let`, `const`, and Data Types

In JavaScript, variables are the most fundamental concept. They are the "memory" of a program—labeled containers that store all the information your application needs to work, from a user's name to the current score in a game. But *how* you create these containers is just as important as what you put in them.

The Great Debate: `var` vs. `let` vs. `const`

In modern JavaScript (ES6+), you have three keywords to declare a variable. Choosing the right one is a key signal of your intent as a developer.

  • const: This should be your **default choice**. It stands for "constant" and creates a variable whose value **cannot be reassigned**. This makes your code more predictable and prevents accidental changes.
  • let: Use `let` when you *know* a variable's value will need to change. A common example is a loop counter or a value that gets updated by a user action (like a score).
  • var: This is the original variable keyword. It is **function-scoped**, not block-scoped, and has quirks like "hoisting" that can lead to bugs. In modern JavaScript, you should **avoid using `var`** in favor of `let` and `const`.

Both `let` and `const` are **block-scoped**, meaning they only exist within the nearest set of curly braces ``, like in an `if` statement or a `for` loop. This is a huge advantage for keeping your variables contained and avoiding conflicts.

What `const` *Doesn't* Do: Understanding Mutability

A critical misunderstanding is that `const` makes a value "immutable" (unchangeable). This is only partially true. `const` prevents **reassignment**. It does *not* prevent changing the *contents* of a complex type like an Object or an Array.

✔️ OK (Mutation)

const user = { name: "Alice" };
user.name = "Bob"; // This is allowed!

We are changing a property *inside* the object, not reassigning the `user` variable itself.

❌ ERROR (Reassignment)

const user = { name: "Alice" };
user = { name: "Bob" }; // TypeError!

We are trying to assign a whole new object to a `const` variable.

The Building Blocks: Primitive vs. Complex Types

Every value in JavaScript has a type. They are split into two main categories:

  • Primitive Types: These are the simple, immutable data types. They include: `String` (text), `Number` (for all math), `Boolean` (true/false), `null` (intentional absence of value), `undefined` (unassigned value), `Symbol`, and `BigInt`.
  • Complex Types (Objects): These are used to store collections of data. The main two you'll use are `Object` (for key-value pairs) and `Array` (for ordered lists).

JavaScript is **dynamically typed**. This means you don't have to declare a variable's type, and it can even change!

let myVar = 10;       // myVar is a Number
myVar = "Hello!"; // Now myVar is a String. This is fine!
Key Takeaway: Always default to `const`. Only use `let` when you *know* a variable needs to be reassigned. Avoid `var`. Understanding the difference between primitive and complex types, and between reassignment and mutation, is the first step to writing bug-free, predictable code.

JavaScript Variables & Types Glossary

Variable
A named container for storing a data value.
Data Type
The classification of a value (e.g., Number, String, Boolean), which determines how it can be used.
Dynamic Typing
JavaScript's feature where a variable's type is determined at runtime and can change during execution.
let
The modern keyword to declare a block-scoped variable that can be reassigned.
const
The modern keyword to declare a block-scoped variable that cannot be reassigned.
var
The legacy keyword for declaring a function-scoped variable. Avoid in modern code.
Primitive Type
A fundamental data type that is not an object and has no methods. Includes `String`, `Number`, `Boolean`, `null`, `undefined`, `Symbol`, and `BigInt`.
Complex Type (Object)
A data type built from other types, used to store collections of data or more complex entities. (e.g., `Object`, `Array`, `Function`).
Scope
The context in which a variable is defined and accessible. Can be Global, Function, or Block scope.
Type Coercion
The automatic or implicit conversion of a value from one data type to another (e.g., `5 + "5"` results in the string `"55"`).

About the Author

Author's Avatar

TodoTutorial Team

Passionate developers and educators making programming accessible to everyone.

This article was written and reviewed by our team of web development experts, who have years of experience teaching JavaScript and building robust web applications.

Verification and Updates

Last reviewed: October 2025.

We strive to keep our content accurate and up-to-date. This tutorial is based on the latest ECMAScript (JavaScript) specifications and is periodically reviewed to reflect industry best practices.

External Resources

Found an error or have a suggestion? Contact us!