Understanding Variables & Data Types in JavaScript — A Beginner’s Guide

TL;DR

Variables are named boxes that store values. JavaScript has three common ways to declare variables — var, let, and const — and a few primitive data types (string, number, boolean, null, undefined). Use const by default for values that don’t change, let for variables you’ll reassign, and avoid var for new code.

Introduction — the box analogy

Think of a variable like a labeled box on your desk. You put something in the box (a value), label the box (the variable name), and later you can look inside, replace the contents, or move the box.

Why this matters: Variables let your program remember data — names, counts, flags, and more. Without variables, programs would be completely static.

What is a variable (plain language)

A variable is a name you give to some value so your program can use and change that value later.

Example conceptually:

• name → stores someone’s name (a string)

• age → stores a number

• isStudent → stores a true/false value

How to declare variables: var, let, and const (simple syntax + tiny examples)

let

Use let when the value may change later.

let age = 25;
console.log(age); // 25
age = 26;
console.log(age); // 26

const

Use const when the value should not be reassigned. Note: objects and arrays declared with const can still be mutated (their contents can change), but the variable cannot be reassigned to a new value.

const name = "Rith";
console.log(name); // Rith
// name = "Maya"; // ❌ Error: Assignment to constant variable

var

Old way to declare variables. It works, but var has quirks (related to scope and redeclaration) that make let/const safer in modern code.

var count = 1;
count = 2;
console.log(count); // 2

Primitive data types in JavaScript (with tiny examples)

JavaScript has several primitive data types — these are simple values (not objects).

• String — text. Use quotes.

  let name = "Rith"; // string
  

• Number — numeric values (integers, floats).

  let age = 25; // number
  

• Boolean — true or false.

  let isStudent = true; // boolean
  

• Null — explicitly “no value”.

  let data = null; // intentionally empty
  

• Undefined — a variable declared but not assigned.

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

Tip: Use typeof to inspect types quickly:

console.log(typeof "hi"); // "string"
console.log(typeof 42);   // "number"
console.log(typeof true); // "boolean"
console.log(typeof null); // "object"  <-- historical quirk; treat null as its own thing

Basic differences between var, let, and const (quick comparison table)

Feature	var	let	const
Block scope?	No (function-scoped)	Yes	Yes
Re-declaration allowed?	Yes	No (in same scope)	No
Reassignment allowed?	Yes	Yes	No
Best use	Legacy code only	Variables that change	Values that shouldn’t reassign

Rule of thumb: Start with const. If you need to change the value, switch to let. Avoid var in new code.

What is scope — beginner-friendly

Scope controls where a variable is visible in your code.

• Global scope: variables available everywhere (bad to overuse).

• Function scope: variables defined inside a function are only available inside that function.

• Block scope: variables defined inside { ... } (like inside if or for) are only visible inside those braces — this applies to let and const, not var.

Example: block scope vs var

if (true) {
  let x = 10;
  var y = 20;
}
console.log(typeof x); // "undefined"
console.log(y);        // 20

x disappears outside the block (because it was let), while y (declared with var) is visible outside the block (function/global scope), which can be surprising.

Mutability and reassignment — show behavior for let, const, var

Reassigning primitives

• let and var can be reassigned.

• const cannot be reassigned.

let a = 1;
a = 2; // OK

const b = 3;
// b = 4; // ❌ Error

Objects and arrays with const

You cannot reassign the variable, but you can change object properties or push into arrays:

const user = { name: "Rith" };
user.name = "Maya"; // OK — object mutated
// user = { name: "Sam" } // ❌ Error — cannot reassign const variable

const arr = [1,2];
arr.push(3); // OK
// arr = [1,2,3] // ❌ Error

Beginner trap: Thinking const makes an object immutable — it doesn't. const prevents reassigning the binding.

Small practical examples & console playground

A few tiny snippets you can paste into the browser console or Node REPL.

Example 1 — basic declarations and printing

const name = "Rith";
let age = 25;
let isStudent = true;

console.log(name, age, isStudent);
// Rith 25 true

Example 2 — change age

age = 26;
console.log(age); // 26

Example 3 — try changing a const

const city = "Kolkata";
// city = "Delhi"; // Uncommenting this line will throw an error

Quick cheat-sheet (copyable)

• const = use when value won’t be reassigned.

• let = use when value will change.

• var = legacy; has function scope; avoid in modern code.

• string, number, boolean, null, undefined — primitives to know.

• Use descriptive variable names (firstName, not a).

Common beginner pitfalls & quick troubleshooting

• Using var and getting weird scope behaviour. Stick to let/const.

• Expecting const to make objects immutable. const only prevents reassignment.

• Naming collisions. Using vague names like data, temp everywhere leads to bugs.

• Forgetting let/const. Accidentally creating globals by omitting declaration (in strict mode this throws an error; in non-strict mode it creates a global — bad).

  x = 5; // bad — creates global in non-strict mode
  

• Mixing types accidentally. age = "25" vs age = 25 — be aware strings vs numbers behave differently.

What to learn next (next steps)

• Practice with small exercises: counters, conditional logs, and simple function parameters.

• Learn about functions and how variables behave inside them (function scope).

• Later (optional): learn about hoisting and the JS execution model (advanced beginner topic).

References & useful links

• MDN Web Docs — JavaScript let, const, and var (search MDN)

• JavaScript.info — The Modern JavaScript Tutorial (variables and types)

Final notes (mentor tip)

Start each file with const by default. Switch to let only when you intend to change the value. This habit prevents accidental reassignments and makes intent clearer to other developers — including your future self.

Full example you can paste in one go (for a quick demo)

// Demo: variables and types
const name = "Rith";
let age = 25;
let isStudent = true;

console.log(typeof name, name);      // "string" "Rith"
console.log(typeof age, age);        // "number" 25
console.log(typeof isStudent, isStudent); // "boolean" true

// change age (works)
age = 26;
console.log(age);

// const cannot be reassigned
// name = "Maya"; // uncommenting will throw an error

// const object mutability
const user = { name: "Rith", age: 25 };
user.age = 26; // OK
console.log(user);