









JavaScript Variables
var, let, const
Introduction to JavaScript Variables
Variables are the building blocks of any programming language. In JavaScript, they act as containers for storing data values — from simple numbers to complex objects. Knowing how to declare, manage, and scope variables is crucial for writing clean and functional code.
Declaring Variables in JavaScript
JavaScript provides three main keywords to declare variables:
var
– the old-school waylet
– the modern and preferred approachconst
– for constants whose value should never change
Using var
var name = "Alice";
console.log(name);
Alice
var
has function scope and allows redeclaration. However, it can lead to confusion due to hoisting, which we’ll cover shortly.
Using let
let age = 25;
console.log(age);
25
let
supports block-level scoping and prevents redeclaration within the same scope. It is the most commonly used declaration in modern JavaScript.
Using const
const PI = 3.14159;
console.log(PI);
3.14159
const
also follows block scoping but, unlike let
, it must be initialized during declaration and cannot be reassigned later.
Variable Naming Rules
- Variable names are case-sensitive.
- They can include letters, digits, underscores, and dollar signs.
- They must begin with a letter, underscore, or dollar sign.
- Keywords like
if
,function
,return
cannot be used as variable names.
Scope of Variables
Scope determines the accessibility of variables:
- Global Scope: Accessible anywhere in the script.
- Function Scope: Declared with
var
inside a function – only accessible within that function. - Block Scope: Declared with
let
orconst
– accessible only within that block{ }
.
Example of Scope
function testVar() {
if (true) {
var a = "I'm using var";
let b = "I'm using let";
}
console.log(a); // Works
console.log(b); // Error: b is not defined
}
testVar();
I'm using var
ReferenceError: b is not defined
Hoisting in JavaScript
Variables declared with var
are hoisted to the top of their scope and initialized with undefined
. But variables declared with let
and const
are hoisted too, yet not initialized — leading to a temporal dead zone.
console.log(a);
var a = 10;
undefined
console.log(b);
let b = 20;
ReferenceError: Cannot access 'b' before initialization
Re-declaration & Re-assignment
var
allows both redeclaration and reassignment:
var x = 5;
var x = 10; // Redeclaration allowed
x = 20; // Reassignment allowed
let
allows reassignment but not redeclaration within the same scope:
let y = 30;
// let y = 40; // Error: Identifier 'y' has already been declared
y = 50;
const
allows neither:
const z = 60;
// const z = 70; // Error: Identifier 'z' has already been declared
// z = 80; // Error: Assignment to constant variable
Constants with Objects and Arrays
With const
, while reassignment isn’t allowed, you can still mutate the internal values of objects or arrays.
const person = { name: "John" };
person.name = "Jane"; // Allowed
console.log(person.name);
Jane
const nums = [1, 2, 3];
nums.push(4);
console.log(nums);
[1, 2, 3, 4]
Best Practices
- Always prefer
let
orconst
overvar
. - Use
const
by default — switch tolet
only if you need reassignment. - Choose meaningful variable names that describe the data they hold.
- Keep variables scoped tightly to where they are needed — this helps in avoiding bugs and improves readability.
Common Mistakes to Avoid
- Using
var
and expecting block scoping — it doesn’t behave likelet
orconst
. - Not initializing
const
during declaration. - Confusing reassignment with mutation in
const
objects.
Summary
JavaScript variables are flexible, but choosing the right keyword — let
or const
— and understanding their behavior ensures robust code. While var
still works, modern JavaScript avoids it due to scoping quirks. Mastering variables is one of the first steps toward writing clean, predictable, and powerful JavaScript code.
Comments
Loading comments...