JavaScript: JavaScript Variables

Last updated: 2026-10-13

Variables are boxes for storing data — you label each box with a name, then put data in, take data out, or swap it anytime.

Related Statements：function const let var for

1. What Are Variables

Imagine a row of labeled boxes: one called "name" holds "John," another called "age" holds 25. The contents can change, but the label stays the same — that's a variable.

In JS, you create variables using declaration keywords (var / let / const) and assign values with the equals sign:

<script>
var name = "John";
let age = 25;
const PI = 3.14;
</script>

2. The Problems with var

var was the only way to declare variables before ES6. It has two headache-inducing behaviors:

1. Function scope — a variable declared with var inside an if or for block is accessible outside, which is counterintuitive
2. Hoisting — var declarations are "hoisted" to the top of their scope, but assignments are not. You can use a variable before its declaration (its value will be undefined) without errors, which leads to subtle bugs

These two behaviors make var a breeding ground for bugs. In modern JS, var has been largely replaced by let and const.

3. let — Block Scope, Recommended Default

let was introduced in ES6 (2015) and fixes both problems with var:

• Block scope — only accessible within {}, cannot be accessed outside the block
• No hoisting — using a variable before its declaration throws an error (temporal dead zone)

In daily development, use let for variables that need to be reassigned.

4. const — Constants, Cannot Be Reassigned

const also has block scope, but it must be assigned at declaration and cannot be reassigned afterward.

Note: const restricts "reassignment," not "mutation." If a const holds an object or array, you can modify object properties or array elements — you just can't point the variable to a different object.

Use const by default; switch to let when you need to reassign — this is the best practice.

5. Variable Naming Rules

• Must start with a letter, underscore _, or dollar sign $
• Subsequent characters can be letters, digits, underscores, or dollar signs
• Cannot start with a digit
• Cannot use JS keywords (var, let, function, etc.)
• camelCase is recommended: firstName, totalPrice

6. Declaring Multiple Variables

You can declare multiple variables at once, separated by commas:

<script>
let a = 1, b = 2, c = 3;
</script>

However, for readability, one variable per line is preferred.

▶ Example: var Hoisting and Function Scope

▶ Example: let Block Scope

▶ Example: const Constants

▶ Example: var / let / const Comparison

Related Statements：function const let var for

❓ FAQ

📖 Summary

• Variables are boxes for storing data, created with a declaration keyword + variable name + assignment
• var has function scope and hoisting issues — avoid it in modern JS
• let has block scope and no hoisting — use it when reassignment is needed
• const has block scope and cannot be reassigned — must be assigned at declaration
• const prevents reassignment, but object/array properties and elements can still be modified
• Priority: const first, let second, avoid var

📝 Exercises

1. Basic: Declare a constant SITE_NAME with your name using const, and a variable visitCount set to 0 using let, then display both values on the page.
2. Intermediate: Create a page with a button that simulates a "visit counter" — each click increments visitCount by 1 and displays the current value. Notice how let allows reassignment while const doesn't.
3. Challenge: Create a page with a const student object { name: "John", scores: [80, 90, 75] }. Then add a new score of 85, calculate the average, and change the name to "Jane" — all without reassigning the const, proving that object contents can be modified.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us