JavaScript Variables: var, let, const, and Value Storage

What Is a Variable?

Avariable is a named container that stores a value in your program's memory.

Think of it like a labeled box:

• 📦 Thebox= space in the computer's memory
• 🏷️ Thelabel= the variable's name
• 🎁 Thecontents= the value stored inside

let userName = "Priya";

Why do variables matter so much? Because programs are useless if they can'tremember things— your name, your score, the items in your cart. Variables are JavaScript's memory.

Declaring vs. Assigning: Two Separate Steps

Creating a variable actually involves two steps, and beginners often mix them up:

let score;
// Step 1: DECLARATION — creating the empty box
score = 100;
// Step 2: ASSIGNMENT — putting a value inside

Or do both in one line (this is calledinitialization):

let score = 100;
// Declare AND assign in one go ✅

What happens if you use a box before putting anything in it?

let score;
console.log(score);
// undefined

JavaScript answers withundefined— its way of saying"the box exists, but it's empty."Remember this word; you'll see it constantly as a developer.

The Three Ways to Declare Variables

JavaScript offers three keywords:var,let, andconst. They look similar but behave very differently.

1️⃣var— The Old Way (Pre-2015)

var city = "Mumbai";
console.log(city);
// Mumbai

varwas JavaScript'sonlyvariable keyword for 20 years. But it has quirky behaviors that cause bugs:

• It can be re-declared— accidentally creating the same variable twice without any error:

var city = "Mumbai";
var city = "Delhi";
// No error! 😬 The first one just vanishedconsole.log(city);     // Delhi

• It ignores block scope— it "leaks" out of{ }blocks in ways that surprise everyone (more on scope below).

Verdict:You'll seevarin old tutorials and legacy code, so you mustrecognizeit — but don't write it in new code.

2️⃣let— The Modern, Changeable Variable (2015+)

let points = 50;
points = 75;
// ✅ Updating is allowedconsole.log(points);  // 75

letfixesvar's problems:

• Re-assigning is allowed✅
• Re-declaring is blocked— JavaScript throws an error instead of silently breaking:

let points = 50;
let points = 75;
// ❌ SyntaxError: 'points' has already been declared

This is agoodthing! The error protects you from accidentally overwriting your own data.

3️⃣const— The Locked Box 🔒

const birthYear = 2000;
birthYear = 2001;
// ❌ TypeError: Assignment to constant variable

constcreates aconstant— once assigned, the value can never be re-assigned. Two strict rules:

1. You must assign a value immediately:

const country;
// ❌ SyntaxError — must initialize
const country = "India";
// ✅

2. No re-assignment, ever.

⚠️ A famous misconception:constdoesn't makeeverythingunchangeable. For arrays and objects, thecontentscan still change — you just can't point the variable at a brand-new value:

script.js

Copy Code Run Online

const cart =["shoes", "watch"];
cart.push("cap");
// ✅ Allowed — contents changed
console.log(cart);
// ["shoes", "watch", "cap"]
cart =[];
// ❌ Error — re-assignment blocked

var vs let vs const: The Complete Comparison

This is the#1 most-asked JavaScript interview question— and this table is the answer:

🏆 The Professional Rule (Memorize This)

Useconstby default. Switch toletonly when you know the value must change. Never usevar.

const siteName = "MyBlog";
// Never changes → const
let visitors = 0;
// Changes constantly → let
visitors = visitors + 1;

This habit makes your code safer and instantly marks you as someone who writesmodernJavaScript.

Understanding Scope: Where Variables Live 🏠

Scopeanswers the question:"Where in my code can I access this variable?"This is wherevarandlet/consttruly part ways.

Block Scope (let & const)

letandconstonly existinside the nearest{ }block:

if (true) {
  let message = "I exist only inside these braces";
  console.log(message);
  // ✅ Works
}console.log(message);
// ❌ ReferenceError: message is not defined

Function Scope (var)

varignores blocksand only respects functions — it leaks out:

if (true) {
  var leaked = "I escaped the block! 👻";
}console.log(leaked);
// "I escaped the block! 👻" — surprising and bug-prone

This "leaking" behavior is exactly why the JavaScript community abandonedvar. Block scope matches how developersthinkcode should work.

Variable Naming Rules (And Best Practices)

❗ Hard Rules — Break These and JavaScript Errors Out

1. Names can containletters, digits,_and$
2. Namescannot start with a digit
3. Names arecase-sensitive(scoreandScoreare different variables)
4. Reserved keywordsare banned (let,const,if,function,return…)

let userName;
// ✅
let _count;
// ✅
let $price;
// ✅
let 1stPlace;
// ❌ Error — starts with a digit
let user-name;
// ❌ Error — hyphens not allowed
let let;
// ❌ Error — reserved keyword

⭐ Best Practices — These Make You Look Like a Pro

1. Use camelCase:firstName,totalScore,isLoggedIn— the universal JavaScript convention
2. Be descriptive:let studentScorebeatslet s— code is read far more than it's written
3. Booleans start with is/has/can:isOnline,hasPermission— reads like a question
4. Constants in SCREAMING_CASE(optional style for fixed config values):const MAX_USERS = 100;

How JavaScript Stores Values (Simple Version) 🧠

When you create a variable, JavaScript asks for a piece of your computer's memory and keeps a note:"the labeluserNamepoints to this spot."

Two behaviors worth knowing early:

Primitive Values Are Copied

let a = 10;
let b = a;
// b gets a COPY of 10
b = 99;
console.log(a);
// 10 — a is untouched ✅

Numbers, strings, and booleans areprimitives— assigning them copies the actual value.

Objects and Arrays Are Referenced

let cart1 =["shoes"];
let cart2 = cart1;
// cart2 points to the SAME list
cart2.push("watch");
console.log(cart1);
// ["shoes", "watch"] — both changed! 😮

Arrays and objects are stored byreference— both variables point to one shared box. You don't need to master this yet (there's a full lesson on data types coming in this series), but file it away — this behavior surprises every beginner eventually.

Common Beginner Mistakes (And Fixes)

Quick Self-Check: Lesson 4 Quiz 🧠

1. Which keyword should be yourdefaultchoice:var,let, orconst?
2. What's the output?let x; console.log(x);
3. Can you re-declare aletvariable in the same scope?
4. What's the output?
   script.js

   Copy Code Run Online

   const nums =[1, 2];
   nums.push(3);
   console.log(nums);

5. True or false:letvariables can be accessed anywhere, even outside their{ }block.

(Answers: 1. const — switch to let only when re-assignment is needed · 2. undefined · 3. No — JavaScript throws a SyntaxError · 4. [1, 2, 3] — const blocks re-assignment, not content changes · 5. False — let is block-scoped)