JavaScript Variables
Comments explain code; they do not store values. This session adds variables — names that hold data so you can reuse the same value without typing it again.
What is a JavaScript variable and how do you declare one?
A variable is a named place that holds a value. You declare it with let or const, then assign a value with =. Later statements can read that name instead of repeating the value. Use let when the value may change; use const when it should stay the same after the first assignment. Older scripts may use var; for new beginner code, prefer let and const.
Keywords at a glance
📊 How beginners should choose a variable keyword
| Keyword | Example | Beginner rule |
|---|---|---|
let |
let score = 10; |
Declare a name; you may assign a new value later |
const |
const city = "Oslo"; |
Declare a name; do not reassign after the first value |
var |
var old = 1; |
Older style; works, but prefer let / const in this course |
Assign = |
score = 15; |
Puts a value into an already declared let name |
| Read the name | console.log(score); |
Uses the stored value — the name stands in for the data |
Declare with let and show the value
let creates the name. The first = stores a value. Then console.log can print what the name holds.
let greeting = "Hello";
console.log(greeting);
Declare with const
const also stores a value, but you should treat that first assignment as final for this name.
const course = "JavaScript";
console.log(course);
Change a let value
With let, you can assign again. The name stays the same; the stored value updates.
let score = 10;
score = 15;
console.log(score);
The Console shows 15 — the later assignment replaced 10.
Declare first, assign later
You may declare with let and assign on a following line. Until you assign, be careful not to use the name as if it already had a useful value.
let status;
status = "Ready";
console.log(status);
Use variables in an expression
Names can appear inside an expression. The engine reads each stored value, then builds the result.
let a = 2;
let b = 3;
console.log(a + b);
Put a variable on the page
Store the text in a variable, then pass that name to textContent. Change the variable’s string and refresh to update the heading.
<!DOCTYPE html>
<html>
<head>
<title>Variables — Page value</title>
</head>
<body>
<h1 id="msg">Waiting…</h1>
<script>
let message = "Variables hold values";
document.getElementById("msg").textContent = message;
</script>
</body>
</html>
The heading shows whatever string message holds. The variable is the reusable holder; the DOM line is the output step you already practiced.
Try it yourself
- Create a
letwith your name as a string; log it; then assign a different string and log again. - Create a
constfor a city name; log it. Do not reassign — if you try, expect an error and undo that line. - Declare
let total;then assigntotal = 5;on the next line; logtotal. - Make two
letnumbers and log their sum with+. - In the HTML demo, change only the string in
message, refresh, and confirm the heading updates.
Common mistakes
- Using a name before you declare it (or before you assign anything useful)
- Writing
const score = 1;and thenscore = 2;—constrejects that reassignment - Putting a value only in a comment and expecting the program to “remember” it — comments are not storage
- Believing every example must use
var— this course prefersletandconst - Illegal or confusing names (spaces, starting with a digit) — revisit Syntax for identifier rules
Summary
- A variable is a named holder for a reusable value
- Declare with
letorconst, assign with= - Reassign with
let; keepconstfixed after the first value - Prefer
let/constover oldervarin new beginner code - Next you will learn Data Types: what kinds of values variables can hold
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top