JavaScript variables are used to store data that your program can use and modify. Whether you are building a simple website, a web application, or a backend application with Node.js, understanding JavaScript variables is essential.
JavaScript provides three keywords for declaring variables:
varletconst
Although all three can be used to create variables, they behave differently. In modern JavaScript, let and const are generally preferred over var.
What Is a Variable in JavaScript?
A variable is a named container used to store a value.
For example:
let name = "Harshit";
let age = 25;
Here:
nameis a variable containing"Harshit".ageis a variable containing25.
You can use these variables later in your program:
let name = "Harshit";
let age = 25;
console.log(name);
console.log(age);
Output:
Harshit
25
How to Declare a Variable
JavaScript allows you to declare variables using var, let, or const.
var name = "Harshit";
let age = 25;
const country = "India";
The important difference is how these variables behave when you try to change or access them.
1. JavaScript var
var is the older way of declaring variables in JavaScript.
var name = "Harshit";
console.log(name);
Output:
Harshit
You can change the value of a var variable:
var age = 25;
age = 26;
console.log(age);
Output:
26
You can also redeclare a var variable:
var name = "Harshit";
var name = "Rahul";
console.log(name);
Output:
Rahul
This behavior can sometimes cause unexpected bugs.
Problem with var
Consider:
var message = "Hello";
if (true) {
var message = "Hi";
}
console.log(message);
Output:
Hi
The variable declared inside the if block is not limited to that block because var is function-scoped, not block-scoped.
2. JavaScript let
let was introduced with ES6 (ECMAScript 2015).
It is commonly used when you need a variable whose value can change.
let age = 25;
age = 26;
console.log(age);
Output:
26
Unlike var, you cannot redeclare the same let variable in the same scope.
let name = "Harshit";
let name = "Rahul";
This produces an error.
let Is Block Scoped
A variable declared using let exists only inside the block where it is declared.
let message = "Hello";
if (true) {
let message = "Hi";
console.log(message);
}
console.log(message);
Output:
Hi
Hello
The two message variables are separate because let is block-scoped.
3. JavaScript const
const is used when you don’t want to reassign a variable after its initial value.
const country = "India";
console.log(country);
You cannot assign a new value to it:
const country = "India";
country = "USA";
This results in a TypeError.
A const variable must also be initialized when it is declared:
const name;
This is invalid.
You need to write:
const name = "Harshit";
const Is Block Scoped
Like let, const is block-scoped.
const website = "harshitsharma.dev";
if (true) {
const website = "example.com";
console.log(website);
}
console.log(website);
Output:
example.com
harshitsharma.dev
Difference Between var, let, and const
| Feature | var | let | const |
|---|---|---|---|
| Scope | Function | Block | Block |
| Can reassign? | Yes | Yes | No |
| Can redeclare? | Yes | No | No |
| Must initialize? | No | No | Yes |
| Modern JavaScript | Avoid when possible | Yes | Yes |
var vs let
The biggest differences are scope and redeclaration.
Using var
var x = 10;
if (true) {
var x = 20;
}
console.log(x);
Output:
20
Using let
let x = 10;
if (true) {
let x = 20;
}
console.log(x);
Output:
10
This is because let respects block scope.
let vs const
Both let and const are block-scoped.
The main difference is reassignment.
let
let score = 10;
score = 20;
console.log(score);
This is valid.
const
const score = 10;
score = 20;
This is not valid because a const variable cannot be reassigned.
Can You Change a const Object?
This is an important JavaScript concept.
Consider:
const user = {
name: "Harshit",
age: 25
};
You cannot assign a completely new object:
user = {
name: "Rahul",
age: 30
};
But you can modify properties of the existing object:
user.name = "Rahul";
user.age = 30;
console.log(user);
Output:
{
name: "Rahul",
age: 30
}
Why?
Because const prevents reassignment of the variable, not modification of the object referenced by that variable.
The same concept applies to arrays:
const fruits = ["Apple", "Banana"];
fruits.push("Mango");
console.log(fruits);
Output:
["Apple", "Banana", "Mango"]
But this is not allowed:
fruits = ["Orange"];
Variable Naming Rules
JavaScript variables have some naming rules.
Valid variable names
let name = "Harshit";
let userName = "Harshit";
let age2 = 25;
let _username = "Harshit";
let $price = 100;
Invalid variable names
let 2name = "Harshit";
let user-name = "Harshit";
Variable names cannot start with a number and cannot contain a hyphen.
JavaScript variable names are also case-sensitive:
let name = "Harshit";
let Name = "Rahul";
console.log(name);
console.log(Name);
These are two different variables.
JavaScript Variable Naming Best Practices
Use meaningful names:
let userName = "Harshit";
let userAge = 25;
let productPrice = 500;
Avoid unclear names:
let x = "Harshit";
let a = 25;
let p = 500;
For multiple words, JavaScript developers commonly use camelCase:
let firstName = "Harshit";
let lastName = "Sharma";
let totalAmount = 5000;
Constants that represent application-wide fixed values are sometimes written in uppercase:
const API_URL = "https://example.com/api";
const MAX_USERS = 100;
This is a convention, not a JavaScript requirement.
Which One Should You Use?
For modern JavaScript, a good default is:
Use const by default. Use let when the value needs to change. Avoid var in new code unless you specifically need its older behavior.
For example:
const name = "Harshit";
const country = "India";
let age = 25;
age = 26;
Here, name and country don’t need reassignment, so const is appropriate.
age can change, so let is appropriate.
Common Mistakes
Mistake 1: Reassigning const
const price = 100;
price = 200;
Use let if reassignment is required:
let price = 100;
price = 200;
Mistake 2: Redeclaring let
let name = "Harshit";
let name = "Rahul";
Instead:
let name = "Harshit";
name = "Rahul";
Mistake 3: Using var everywhere
Older JavaScript code often contains:
var name = "Harshit";
var age = 25;
Modern code generally uses:
const name = "Harshit";
let age = 25;
This gives you better control over scope and reassignment.
Quick Summary
JavaScript provides three variable declaration keywords:
var— older, function-scoped, can be redeclared and reassigned.let— block-scoped and can be reassigned.const— block-scoped and cannot be reassigned.
A simple rule to remember is:
const → default choice
let → value needs to change
var → generally avoid in modern JavaScript
Understanding var, let, and const is one of the first important steps in learning JavaScript. Once you understand variables, you can move on to data types, operators, conditions, loops, and functions.
Practice
Try to predict the output before running these examples:
let x = 10;
x = 20;
console.log(x);
const name = "Harshit";
console.log(name);
And:
var message = "Hello";
if (true) {
var message = "Hi";
}
console.log(message);
These small exercises will help you understand the difference between reassignment, redeclaration, and scope.