JavaScript Variables

🚀 What You’ll Learn

In this lesson, you’ll learn:

• What variables are and how to use them in JavaScript.
• The difference between var, let, and const.
• JavaScript data types (primitive & reference).

🔎 What are Variables?

Variables are containers for storing data values in JavaScript.

🟢 Declaring Variables📘 var and let

1️⃣ var

The var keyword is the old way of declaring variables in JavaScript. It is function-scoped, meaning it is accessible throughout the function in which it is declared. Variables declared with var can be redeclared and updated. They are also hoisted (moved to the top of their scope and initialized as undefined).

// Example with var
function testVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 (accessible outside the block)
}
testVar();

var city = "London";
var city = "Paris"; // redeclaration allowed
console.log(city); // Paris
  

2️⃣ let

The let keyword was introduced in ES6 (2015). It is block-scoped, meaning it is only accessible inside the block { } where it is declared. Variables declared with let can be updated but not redeclared in the same scope. They are also hoisted but remain in the Temporal Dead Zone until initialized.

// Example with let
function testLet() {
  if (true) {
    let y = 20;
    console.log(y); // 20
  }
  // console.log(y); ❌ Error: y is not defined (block-scoped)
}
testLet();

let score = 50;
score = 100; // ✅ allowed
// let score = 200; ❌ Error: Cannot redeclare in same scope
console.log(score); // 100
  

3️⃣ const

const pi = 3.1416;
// pi = 3.14; ❌ Error: Assignment to constant variable

📘 Definition of const in JavaScript

The const keyword (introduced in ES6, 2015) is used to declare variables whose bindings cannot be reassigned.

It is block-scoped (like let), meaning it only exists within the block { } where it’s declared.

A const variable must be initialized at the time of declaration.

While the variable identifier itself cannot be reassigned, if the value is an object or array, its contents can still be modified.

✅ Examples

1. Constant Primitive Value

const PI = 3.1416;
console.log(PI); // 3.1416

// PI = 3.14; ❌ Error: Assignment to constant variable

2. Constant Array (contents can change)

const fruits = ["apple", "banana"];
fruits.push("cherry");   // ✅ allowed
console.log(fruits);     // ["apple", "banana", "cherry"]

// fruits = ["mango"]; ❌ Error: Cannot reassign the array

3. Constant Object (properties can change)

const user = { name: "Alice", age: 25 };
user.age = 26;           // ✅ allowed
user.city = "London";    // ✅ allowed
console.log(user);       // { name: "Alice", age: 26, city: "London" }

// user = { name: "Bob" }; ❌ Error: Cannot reassign the object

📏 Key Rules of const

• Must be initialized when declared.
• Cannot be redeclared in the same scope.
• Cannot be reassigned to a new value.
• Block-scoped (lives only inside { }).
• For objects/arrays: the reference is constant, but the contents are mutable.

📌 Rules for Declaring Variables

• Names must begin with a letter, underscore (_) or dollar sign ($).
• Names can contain letters, digits, underscores, and dollar signs.
• Names cannot start with a digit.
• Variable names are case-sensitive (age, Age, AGE are different).
• Reserved words (like for, if, class) cannot be used as names.

📊 Difference Between var, let, and const

Feature	var	let	const
Scope	Function-scoped	Block-scoped	Block-scoped
Redeclaration	Allowed	Not allowed	Not allowed
Reassignment	Allowed	Allowed	Not allowed
Initialization	Optional	Optional	Required at declaration

✨ Best Practices

• Use const by default.
• Use let only when the value will change.
• Avoid using var in modern JavaScript.
• Use meaningful variable names that describe the value.
• Keep variable scope as small as possible.

📌 Try it!

Create variables for your own profile (name, age, hobby, country).

Print them in the console in a formatted way. Try changing values using let and const.