JavaScript Variables -

Variables are one of the most important concepts in JavaScript. Almost every JavaScript program needs variables to store and work with information.

A variable can store different types of values, such as text, numbers, Boolean values, arrays, objects, and more.

For example:

let userName = "Alex";
let age = 25;

console.log(userName);
console.log(age);

In this example, userName stores "Alex" and age stores 25.

JavaScript provides three main keywords for declaring variables:

var
let
const

Although all three can be used to create variables, they behave differently. In modern JavaScript, let and const are generally preferred, while var is mainly encountered in older JavaScript code.

What Is a Variable?

A variable is a named reference used to store or access a value in a JavaScript program.

Think of a variable as a labeled container.

For example:

let age = 25;

Here:

let declares the variable.
age is the variable name.
25 is the value.
= assigns the value to the variable.

You can then use the variable elsewhere:

console.log(age);

Output:

Variables allow your programs to work with information dynamically.

For example:

let price = 100;
let quantity = 3;

let total = price * quantity;

console.log(total);

Output:

Instead of writing 100 * 3 directly, the program uses variables to represent the values.

Why Are Variables Important?

Variables make JavaScript programs more useful and flexible.

Without variables, you would have to repeatedly write values directly into your code.

For example:

console.log(100 * 2);
console.log(100 * 3);
console.log(100 * 4);

With variables:

let price = 100;

console.log(price * 2);
console.log(price * 3);
console.log(price * 4);

Now, if the price changes, you can update it in one place:

let price = 150;

The rest of the calculations automatically use the new value.

Variables are commonly used for:

User information
Prices
Product quantities
Scores
Counters
Form values
API responses
Configuration values
Calculation results
Application state

JavaScript Variable Declaration

Before using a variable, you generally declare it using var, let, or const.

For example:

let userName;

This declares a variable named userName.

At this point, no value has been explicitly assigned to it, so its value is undefined.

console.log(userName);

Output:

undefined

You can assign a value later:

userName = "Alex";

console.log(userName);

Output:

Alex

This separates declaration from assignment.

`var` in JavaScript

var is the traditional way of declaring variables in JavaScript.

For example:

var age = 25;

console.log(age);

Output:

You can also declare a variable first and assign a value later:

var name;

name = "Alex";

console.log(name);

var has function scope rather than block scope and has some behaviors that can lead to unexpected results in modern programs.

Because of this, modern JavaScript development generally prefers let and const.

Reassigning a `var` Variable

A variable declared using var can be reassigned.

var score = 50;

score = 80;

console.log(score);

Output:

The value stored in score changed from 50 to 80.

Redeclaring a `var` Variable

One important characteristic of var is that the same variable can be redeclared within the same scope.

var name = "Alex";
var name = "John";

console.log(name);

Output:

John

This behavior is one reason var can sometimes make code harder to maintain.

With modern JavaScript, let and const provide stricter rules.

`let` in JavaScript

The let keyword was introduced with ECMAScript 2015, commonly known as ES6.

It is used to declare variables whose values may need to change.

For example:

let age = 25;

console.log(age);

You can reassign the variable:

let age = 25;

age = 26;

console.log(age);

Output:

This makes let useful for values that change during program execution.

Examples include:

let score = 0;
let count = 1;
let currentPage = 1;
let userStatus = "offline";

These values can later be changed.

`let` Is Block-Scoped

One of the major differences between let and var is scope.

A variable declared with let is block-scoped.

For example:

if (true) {
    let message = "Hello";
    console.log(message);
}

The variable exists inside that block.

Trying to access it outside the block results in an error:

if (true) {
    let message = "Hello";
}

console.log(message);

The message variable is not available outside the if block.

Redeclaring a `let` Variable

You cannot redeclare the same let variable within the same scope.

This is invalid:

let age = 25;
let age = 30;

JavaScript will produce a syntax error.

However, you can reassign it:

let age = 25;

age = 30;

console.log(age);

This is valid.

The difference is important:

Redeclaration

let age = 25;
let age = 30;

Not allowed in the same scope.

Reassignment

let age = 25;
age = 30;

Allowed.

`const` in JavaScript

The const keyword is used when a variable binding should not be reassigned after initialization.

For example:

const country = "USA";

console.log(country);

Once initialized, you cannot assign another value to the same const binding.

This is invalid:

const country = "USA";

country = "India";

JavaScript will produce a TypeError when the reassignment is attempted.

A `const` Variable Must Be Initialized

Unlike let, you cannot declare a const variable without giving it a value.

This is invalid:

const age;

Instead, initialize it when declaring it:

const age = 25;

This is because a const binding must have an initial value.

`const` Is Block-Scoped

Like let, const is block-scoped.

if (true) {
    const message = "Hello";
    console.log(message);
}

The variable is available only within that block.

Variable Declaration

Variable declaration means creating a variable name.

For example:

let userName;

Here, userName has been declared.

Another example:

var age;

And:

const country = "USA";

The declaration tells JavaScript that you want to create a binding with a particular name.

Variable Assignment

Assignment means giving a value to a variable.

For example:

let age;

age = 25;

The first line declares the variable.

The second line assigns the value.

You can also declare and assign in the same statement:

let age = 25;

This is extremely common in JavaScript.

Declaration and Assignment Together

Most JavaScript code declares and initializes variables in one statement.

let name = "Alex";
let age = 25;
let city = "New York";

Each statement creates a variable and gives it an initial value.

You can also declare multiple let variables, although separate declarations are often easier to read:

let firstName = "Alex";
let lastName = "Smith";

Reassigning Variables

Reassignment means changing the value associated with a variable after it has already been initialized.

For example:

let score = 50;

score = 75;

console.log(score);

Output:

The original value was 50, but the variable was later assigned 75.

You can reassign variables declared with let:

let city = "London";

city = "Chicago";

You can also reassign variables declared with var:

var city = "London";

city = "Chicago";

You cannot reassign a const binding:

const city = "London";

city = "Chicago";

Reassignment With Calculations

Reassignment is especially useful for calculations.

let count = 1;

count = count + 1;

console.log(count);

Output:

You can shorten this using the ++ operator:

let count = 1;

count++;

console.log(count);

Output:

Another example:

let total = 100;

total = total + 50;

console.log(total);

Output:

Constants

A constant is a binding that cannot be reassigned after initialization.

JavaScript uses const to create such bindings.

const pi = 3.14159;

You should use const when the binding itself should not be reassigned.

For example:

const websiteName = "Web4Learners";
const country = "USA";
const maxUsers = 1000;

These values are intended to remain associated with those bindings.

Constants Do Not Mean Every Part of an Object Is Immutable

This is an important JavaScript concept.

Consider:

const user = {
    name: "Alex",
    age: 25
};

You cannot replace the entire user binding:

user = {};

But you can modify a property of the object:

user.age = 26;

console.log(user.age);

Output:

Why?

Because const prevents reassignment of the variable binding. It does not automatically make the referenced object immutable.

The same concept applies to arrays:

const colors = ["red", "blue"];

colors.push("green");

console.log(colors);

Output:

["red", "blue", "green"]

The array itself was modified, but the colors binding was not reassigned.

`let` vs `const`

The most common question for beginners is whether to use let or const.

The basic rule is simple:

Use const by default. Use let when you know the variable needs to be reassigned.

For example:

const name = "Alex";

If the name does not need to be reassigned, const is appropriate.

For a changing value:

let score = 0;

score = 10;
score = 20;

let is appropriate because the variable is reassigned.

Example

const productName = "Laptop";
let quantity = 1;

quantity = 2;

console.log(productName);
console.log(quantity);

Here:

productName uses const because its binding does not change.
quantity uses let because its value is reassigned.

`var` vs `let` vs `const`

JavaScript provides three variable declaration keywords, but they are not identical.

Feature	`var`	`let`	`const`
Can declare a variable	Yes	Yes	Yes
Can reassign	Yes	Yes	No
Must initialize immediately	No	No	Yes
Block-scoped	No	Yes	Yes
Function-scoped	Yes	No	No
Same-scope redeclaration	Allowed	Not allowed	Not allowed
Modern recommendation	Usually avoid for new code	Use when reassignment is needed	Use by default

The biggest practical differences involve scope, reassignment, and redeclaration.

Scope of `var`

var is function-scoped.

For example:

function test() {
    var message = "Hello";

    if (true) {
        var message = "Inside";
        console.log(message);
    }

    console.log(message);
}

test();

Because var does not create block scope for the if block, the same function-scoped variable is involved.

This behavior can sometimes lead to unexpected results.

Scope of `let` and `const`

let and const are block-scoped.

function test() {
    if (true) {
        let message = "Hello";
        const language = "JavaScript";

        console.log(message);
        console.log(language);
    }
}

test();

The variables exist within the block where they are declared.

This makes let and const easier to reason about in many situations.

Hoisting and Variables

JavaScript processes declarations in a way commonly described as hoisting.

However, var, let, and const behave differently.

With var:

console.log(age);

var age = 25;

The declaration is processed before execution, and the value observed at the earlier console.log is undefined.

With let:

console.log(age);

let age = 25;

This produces a ReferenceError.

The period from entering the relevant scope until the let or const declaration is initialized is commonly called the Temporal Dead Zone, or TDZ.

For beginners, the safest approach is simple:

Declare variables before using them.

For example:

const name = "Alex";

console.log(name);

Choosing Between `var`, `let`, and `const`

A practical approach for modern JavaScript is:

Use const when the binding will not be reassigned.
Use let when the binding needs reassignment.
Avoid var in new code unless you specifically need its behavior or are working with older code.

For example:

const name = "Alex";
const age = 25;

let score = 0;

score = 100;

This makes the intended behavior of each variable clear.

Variable Naming Rules

Variable names must follow JavaScript identifier rules.

A variable name can contain:

Letters
Numbers
Underscores
Dollar signs

However, a variable name cannot begin with a number.

Valid examples:

let userName = "Alex";
let user2 = "John";
let _count = 10;
let $price = 100;

Invalid example:

let 2users = 10;

Variable names are also case-sensitive.

These are different variables:

let age = 20;
let Age = 30;

Although technically different, using names that differ only by capitalization can make code harder to understand.

Descriptive Variable Names

Good variable names make code easier to understand.

Instead of:

let x = 500;

Use:

let productPrice = 500;

Instead of:

let n = 10;

Use:

let productCount = 10;

Descriptive names are especially important in larger applications.

Variables Can Store Different Types of Values

JavaScript variables can hold many different types of values.

String

let name = "Alex";

Number

let age = 25;

Boolean

let isLoggedIn = true;

Array

let colors = ["red", "blue", "green"];

Object

let user = {
    name: "Alex",
    age: 25
};

Null

let selectedUser = null;

Undefined

let result;

The variable result has the value undefined until a value is assigned.

Changing the Type of a Variable

JavaScript is dynamically typed, so a variable declared with let can be assigned values of different types.

For example:

let value = 100;

value = "Hello";

console.log(value);

The variable first contains a number and later contains a string.

Although JavaScript allows this, using variables consistently usually makes programs easier to understand.

Multiple Variables

You can create multiple variables in a program:

const firstName = "Alex";
const lastName = "Smith";

let age = 25;
let score = 90;

You can then use them together:

console.log(firstName + " " + lastName);
console.log(age);
console.log(score);

Variables in Calculations

Variables are frequently used for mathematical operations.

const price = 50;
const quantity = 4;

const total = price * quantity;

console.log(total);

Output:

Another example:

let balance = 1000;

balance = balance - 250;

console.log(balance);

Output:

Variables in Strings

Variables can also be inserted into strings using template literals.

const name = "Alex";
const age = 25;

console.log(`My name is ${name} and I am ${age} years old.`);

Output:

My name is Alex and I am 25 years old.

This is a common and useful way to combine variables with text.

Variables and User Input

Variables become especially useful when working with user input.

For example:

const name = prompt("Enter your name");

console.log(`Hello, ${name}!`);

The value entered by the user is stored in the name variable.

In real web applications, values can also come from:

HTML forms
Buttons
URL parameters
APIs
Databases
Browser storage
Server responses

Variables and Constants in Real Projects

Imagine you are creating an e-commerce website.

You might have:

const productName = "Laptop";
const productPrice = 800;

let quantity = 1;
let cartTotal = productPrice * quantity;

If the customer changes the quantity:

quantity = 3;

cartTotal = productPrice * quantity;

console.log(cartTotal);

Output:

Here, productName and productPrice can remain unchanged, while quantity and cartTotal can change.

Common Mistakes With Variables

Trying to reassign a `const`

const age = 25;

age = 30;

This is not allowed because the const binding cannot be reassigned.

Use let if reassignment is required:

let age = 25;

age = 30;

Declaring `const` without a value

This is invalid:

const age;

Initialize it:

const age = 25;

Redeclaring a `let`

This is invalid in the same scope:

let name = "Alex";
let name = "John";

Instead:

let name = "Alex";
name = "John";

Using a variable before declaration

Avoid code such as:

console.log(username);

let username = "Alex";

Declare it first:

let username = "Alex";

console.log(username);

Using unclear names

Avoid:

let x = 500;
let y = 10;

Prefer:

let productPrice = 500;
let productCount = 10;

Using `var` unnecessarily

Modern JavaScript generally favors:

const
let

over:

var

Understanding var is still important because you will encounter it in older JavaScript projects and tutorials.

Variable Best Practices

Prefer `const` by default

If you do not need to reassign a variable, use const.

const websiteName = "Web4Learners";

Use `let` for changing values

let counter = 0;

counter++;

Avoid `var` in new code

Unless there is a specific reason to use its function-scoped behavior, prefer let or const.

Use meaningful names

const customerName = "Alex";
const orderTotal = 250;

These are easier to understand than:

const x = "Alex";
const y = 250;

Keep variables close to where they are needed

Avoid creating variables far away from the code that uses them unless they genuinely need a wider scope.

Do not create unnecessary variables

Instead of:

const price = 10;
const quantity = 2;
const total = price * quantity;

console.log(total);

This is often appropriate because the variables have meaningful purposes.

But unnecessary temporary variables can make simple code harder to read.

Quick Comparison of `var`, `let`, and `const`

Feature	`var`	`let`	`const`
Introduced	Original JavaScript	ES6	ES6
Reassignment	Yes	Yes	No
Redeclaration in same scope	Yes	No	No
Block scope	No	Yes	Yes
Function scope	Yes	Yes, within functions	Yes, within functions
Must initialize	No	No	Yes
Recommended for new code	Usually no	Yes	Yes
Typical use	Legacy code	Changing values	Values not reassigned

A Complete Example

Here is a small example combining variables, assignment, reassignment, and constants:

const productName = "Laptop";
const price = 800;

let quantity = 1;

let total = price * quantity;

console.log(`Product: ${productName}`);
console.log(`Price: $${price}`);
console.log(`Quantity: ${quantity}`);
console.log(`Total: $${total}`);

quantity = 2;

total = price * quantity;

console.log(`Updated quantity: ${quantity}`);
console.log(`Updated total: $${total}`);

Output:

Product: Laptop
Price: $800
Quantity: 1
Total: $800
Updated quantity: 2
Updated total: $1600

This example demonstrates an important pattern used throughout JavaScript development:

const is used for values whose bindings are not reassigned.
let is used for values that need to change.
Variables can be used in calculations.
Variables can be inserted into strings.
Reassignment allows a program to respond to changing data.

Frequently Asked Questions

What is a variable in JavaScript?

A variable is a named binding that allows a JavaScript program to store and access a value.

For example:

let age = 25;

Here, age refers to the stored value 25.

What are the three types of variable declarations in JavaScript?

JavaScript provides three declaration keywords:

var
let
const

let and const are generally preferred in modern JavaScript.

What is the difference between `let` and `const`?

let allows reassignment:

let score = 10;
score = 20;

const does not allow reassignment:

const score = 10;
score = 20;

The second example is invalid.

When should I use `let`?

Use let when the variable needs to be reassigned.

let count = 0;

count = 1;
count = 2;

When should I use `const`?

Use const when you do not need to reassign the variable binding.

const website = "Web4Learners";

Should I still use `var`?

You may encounter var in older JavaScript code, but for new code, let and const are generally preferred.

Can a `const` object be changed?

Yes. const prevents reassignment of the binding, but object properties can still be modified unless the object is otherwise made immutable.

const user = {
    name: "Alex"
};

user.name = "John";

This is allowed.

Can a `const` array be modified?

Yes.

const numbers = [1, 2, 3];

numbers.push(4);

This is allowed because the array binding itself was not reassigned.

Can I declare a variable without assigning a value?

With let and var, yes:

let age;
var name;

With const, no:

const age;

A const declaration must have an initializer.

What happens if I redeclare a `let` variable?

Redeclaring a let variable in the same scope causes a syntax error.

let age = 25;
let age = 30;

Instead, reassign it:

let age = 25;
age = 30;

Are JavaScript variables case-sensitive?

Yes.

let name = "Alex";
let Name = "John";

These are different identifiers.

However, it is usually better to avoid names that differ only by capitalization.

Practice Exercise

Try creating a small JavaScript program using the following requirements:

Create a constant named productName.
Create a constant named price.
Create a variable named quantity.
Set the quantity to 2.
Calculate the total price.
Print all the information to the console.
Change the quantity to 3.
Calculate the new total.
Print the updated total.

A possible solution is:

const productName = "Keyboard";
const price = 50;

let quantity = 2;

let total = price * quantity;

console.log(`Product: ${productName}`);
console.log(`Total: $${total}`);

quantity = 3;

total = price * quantity;

console.log(`Updated total: $${total}`);

Expected output:

Product: Keyboard
Total: $100
Updated total: $150

What Is a Variable?

Why Are Variables Important?

JavaScript Variable Declaration

var in JavaScript

Reassigning a var Variable

Redeclaring a var Variable

let in JavaScript

let Is Block-Scoped

Redeclaring a let Variable

const in JavaScript

A const Variable Must Be Initialized

const Is Block-Scoped

Variable Declaration

Variable Assignment

Declaration and Assignment Together

Reassigning Variables

Reassignment With Calculations

Constants

Constants Do Not Mean Every Part of an Object Is Immutable

let vs const

Example

var vs let vs const

Scope of var

Scope of let and const

Hoisting and Variables

Choosing Between var, let, and const

Variable Naming Rules

Descriptive Variable Names

Variables Can Store Different Types of Values

String

Number

Boolean

Array

Object

Null

Undefined

Changing the Type of a Variable

Multiple Variables

Variables in Calculations

Variables in Strings

Variables and User Input

Variables and Constants in Real Projects

Common Mistakes With Variables

Trying to reassign a const

Declaring const without a value

Redeclaring a let

Using a variable before declaration

Using unclear names

Using var unnecessarily

Variable Best Practices

Prefer const by default

Use let for changing values

Avoid var in new code

Use meaningful names

Keep variables close to where they are needed

Do not create unnecessary variables

Quick Comparison of var, let, and const

A Complete Example

Frequently Asked Questions

What is a variable in JavaScript?

What are the three types of variable declarations in JavaScript?

What is the difference between let and const?

When should I use let?

When should I use const?

Should I still use var?

Can a const object be changed?

Can a const array be modified?

Can I declare a variable without assigning a value?

What happens if I redeclare a let variable?

Are JavaScript variables case-sensitive?

Practice Exercise

Leave a Comment Cancel reply

`var` in JavaScript

Reassigning a `var` Variable

Redeclaring a `var` Variable

`let` in JavaScript

`let` Is Block-Scoped

Redeclaring a `let` Variable

`const` in JavaScript

A `const` Variable Must Be Initialized

`const` Is Block-Scoped

`let` vs `const`

`var` vs `let` vs `const`

Scope of `var`

Scope of `let` and `const`

Choosing Between `var`, `let`, and `const`

Trying to reassign a `const`

Declaring `const` without a value

Redeclaring a `let`

Using `var` unnecessarily

Prefer `const` by default

Use `let` for changing values

Avoid `var` in new code

Quick Comparison of `var`, `let`, and `const`

What is the difference between `let` and `const`?

When should I use `let`?

When should I use `const`?

Should I still use `var`?

Can a `const` object be changed?

Can a `const` array be modified?

What happens if I redeclare a `let` variable?