Course: JavaScript Beginner

Lesson 2: Variables with const and let

Level

Beginner

Estimated Reading Time

10–15 minutes

Goal

By the end of this lesson, the learner will be able to:

• Declare variables using const and let and explain when to use each
• Understand why const is preferred by default in modern JavaScript
• Apply correct naming conventions when creating variables

Frontend Development Context

Every piece of data your JavaScript code works with needs a name. Whether you're storing a user's input, tracking how many items are in a cart, or holding a reference to a button on the page, variables are how you give values a label so you can use them later. Without variables, you would have to repeat values everywhere in your code, making it impossible to update or maintain.

In modern frontend development, choosing between const and let is not just a syntax decision — it communicates intent. When another developer (or your future self) reads const, they know that value is not meant to change. When they read let, they know it will. This expressiveness makes codebases easier to understand and safer to modify.

Explanation

A variable is a named container for a value. In JavaScript, you create variables using const or let (and in older code, var, which you should generally avoid). The name you give a variable is called an identifier, and the value you assign to it can be a number, a string, a boolean, an object, an array, or many other types.

const declares a variable that cannot be reassigned after it is created. This does not mean the value is frozen — if it is an object or array, its contents can still change — but the variable itself cannot point to a different value. Because most values in frontend code do not need to be reassigned (DOM references, configuration values, labels), const is the right default choice.

let declares a variable that can be reassigned. Use it when a value genuinely needs to change over time — for example, a counter that increments, a score that updates, or a status that toggles. Using let unnecessarily suggests to other developers that a value might change when it actually never does, which is misleading.

Variable naming follows a convention called camelCase in JavaScript: the first word is lowercase and each subsequent word starts with an uppercase letter. Names like userName, totalPrice, and isLoggedIn are clear and conventional. Avoid single-letter names (x, n) except in short loops, and avoid vague names (data, value, thing) that say nothing about what the variable holds.

Both const and let are block-scoped, meaning they only exist within the curly braces {} where they are declared. This is different from older var declarations, which are function-scoped and can leak out of blocks like if statements and for loops in surprising ways.

Code Example

This example shows both const and let being used appropriately in a small feature that tracks a user's reading progress:

const courseName = "JavaScript Beginner"; // will never change
const totalLessons = 20;                  // fixed value

let completedLessons = 0; // starts at 0, will increase

function markLessonComplete() {
  completedLessons += 1;
  const progress = `${courseName}: ${completedLessons} of ${totalLessons} lessons done`;
  document.querySelector("#progress-bar-label").textContent = progress;
}

markLessonComplete();
markLessonComplete();

Code Explanation

courseName and totalLessons are declared with const because they represent fixed values that will not change during the lifecycle of this feature. Using const here signals clearly that these are stable reference points.

completedLessons is declared with let because it starts at 0 and increases each time a lesson is marked complete. This is exactly the use case for let — a value that changes over time through reassignment with +=.

Inside the function, progress is declared with const even though it holds a freshly computed string each time the function runs. This is fine because within each call to the function, that variable does not get reassigned — a new const is created each call.

The final two lines call markLessonComplete twice, which would update completedLessons to 2 and set the label to "JavaScript Beginner: 2 of 20 lessons done". This pattern — const for stable references, let for changing values — is the standard approach across modern JavaScript codebases.

Pattern Highlights

✅ Positive Pattern: Default to const for every variable. Only switch to let when you know the value needs to be reassigned later in the code.

⚠️ Neutral Note: const does not make objects or arrays immutable — it only prevents the variable from being reassigned to a different value. The contents of a const array can still be pushed to or modified.

❌ Negative Pattern: Using var in modern JavaScript code introduces function-scoping behavior and hoisting quirks that are harder to reason about. Stick to const and let.

Common Mistakes

Mistake 1: Trying to reassign a const variable

A very common beginner error is declaring a variable with const and then trying to change it with =.

const score = 0;
score = 10; // TypeError: Assignment to constant variable

If a variable needs to change, declare it with let instead. If it genuinely does not need to change, keep it as const — the error is telling you something useful about your design.

Mistake 2: Using let for everything by default

Some beginners use let for all variables to avoid the reassignment error. This technically works but loses the communicative benefit of const.

let apiUrl = "https://api.example.com/data"; // never changes
let maxRetries = 3;                           // never changes
let username = "alice";                       // never changes

When everything is let, nothing signals intent. A reader cannot tell which values are stable and which are dynamic. Use const unless reassignment is actually needed.

Mistake 3: Declaring variables without initializing them when using const

const requires an initial value at the point of declaration. You cannot declare it first and assign it later.

const greeting; // SyntaxError: Missing initializer in const declaration
greeting = "Hello";

If you need to declare a variable and assign it later based on some condition, use let. const must be initialized immediately when declared.

Quick Recap

• const declares a variable that cannot be reassigned — use it by default for most values
• let declares a variable that can be reassigned — use it when the value genuinely needs to change
• Both const and let are block-scoped, which makes their behavior predictable and safe
• Variable names in JavaScript use camelCase and should clearly describe what the value represents