On this page
A program needs names for the information it works with. A shopping page might need a product name, a price, and a value that says whether an item is in stock. In JavaScript, a variable connects a useful name to a value.
const productName = "Desk lamp";
const price = 38;
const isAvailable = true;
The names make the values easier to understand and reuse. JavaScript is case-sensitive, so price and Price are different names.
Start with const
Use const when the name will not be assigned a different value later. A const declaration must receive a value immediately:
const lessonTitle = "JavaScript variables";
console.log(lessonTitle);
The browser console prints:
JavaScript variables
This does not mean every value declared with const is deeply frozen. It means the name cannot be reassigned. An object held by a const can still have a property changed:
const learner = {
name: "Amina",
lessonsCompleted: 1,
};
learner.lessonsCompleted = 2; // Allowed
// learner = {}; // Error: reassignment is not allowed
That distinction becomes clearer with practice. For now, prefer const because it communicates a useful promise: this name keeps pointing to the same value.
Use let when a value must be reassigned
Use let when the program needs to replace a value later. A score, remaining item count, or current step might change:
let currentStep = 1;
console.log(currentStep);
currentStep = 2;
console.log(currentStep);
The first log prints 1 and the second prints 2. Notice that let appears only when the variable is declared. Reassignment uses the existing name without repeating the keyword.
Why var is not the modern default
You will see var in older JavaScript. It is still part of the language, and understanding it matters when maintaining existing code. It should not be the default in a new beginner example.
var is scoped to a function rather than a block, permits redeclaring the same name, and has hoisting behavior that can make the order of code harder to reason about. let and const use block scope and catch several accidental redeclarations.
if (true) {
let message = "Visible inside this block";
console.log(message);
}
// console.log(message); // ReferenceError: message is not defined
The block is the section between { and }. Keeping a name inside the smallest useful block reduces accidental interactions elsewhere.
Common JavaScript values
JavaScript variables can hold many kinds of values. A value’s type affects which operations make sense.
Strings
A string is text wrapped in quotes. Single quotes and double quotes both work; choose one style and use it consistently.
const topic = "Accessible HTML";
const greeting = "Hello";
console.log(greeting + ", " + topic);
The + operator joins these strings. The output is Hello, Accessible HTML.
Numbers
JavaScript uses the number type for ordinary whole and decimal numbers:
const lessonCount = 4;
const completionTime = 12.5;
const total = lessonCount + completionTime;
console.log(total); // 16.5
Quotes change the meaning. "4" is a string, while 4 is a number.
Booleans
A boolean has only two possible values: true or false. Booleans are useful for decisions and states:
const menuIsOpen = false;
const userHasAcceptedTerms = true;
Do not put quotes around boolean values. "false" is a non-empty string, not the boolean false.
Arrays
An array is an ordered list. Square brackets surround its items, and indexes begin at zero:
const technologies = ["HTML", "CSS", "JavaScript"];
console.log(technologies[0]); // HTML
console.log(technologies.length); // 3
Using const prevents assigning a different array to technologies, but array methods can still change the existing array. For data you do not intend to change, simply avoid mutating methods until you learn deliberate immutable patterns.
Objects
An object groups named properties:
const tutorial = {
title: "Variables",
minutes: 16,
published: true,
};
console.log(tutorial.title);
console.log(tutorial.minutes);
The dot syntax reads a property. Objects are useful when several values describe one thing.
Try the values in a browser console
Open your browser’s developer tools, choose the Console panel, and enter this example as one block:
const learnerName = "Sam";
let completedLessons = 2;
const interests = ["CSS", "JavaScript"];
const profile = {
isBeginner: true,
weeklyGoal: 3,
};
completedLessons = completedLessons + 1;
console.log(learnerName);
console.log(completedLessons);
console.log(interests[1]);
console.log(profile.weeklyGoal);
Common errors and what they mean
Assignment to constant variable. You tried to assign a new value to a name declared with const. Keep const and change your design, or use let if reassignment is intentional.
Identifier has already been declared. The same let or const name was declared twice in one scope. Reuse the existing name without redeclaring it, or choose a different name.
ReferenceError: name is not defined. The name is misspelled, outside its scope, or used before it is available.
Unexpected string behavior. If "2" + "3" produces "23", both values are strings. Check where the data came from before converting it deliberately.
Practice
Practice: describe a small project
Create a const string for a project title, a let number for tasks completed, a boolean for
whether the project is public, an array of technologies, and an object that groups a difficulty
and estimated time. Increase the task number once, then log every value.
What to learn next
Variables become useful when functions transform them and conditions make decisions with them. Next, learn comparison operators and if statements, then practice writing a small function that accepts a value and returns a result. If you want more detail now, MDN’s variables lesson is a dependable reference.