JavaScript Variables & Data Types – Beginner Guide (2026)

If you're starting your JavaScript journey, variables and data types are the very first building blocks you need to master. Think of variables as labeled containers that store information, and data types as the kind of information those containers hold.

In this guide, you'll learn:

✅ What variables are and why they matter
✅ The difference between var, let, and const
✅ All 8 JavaScript data types with real examples
✅ Type coercion, typeof, and common beginner mistakes

Let's dive in! 🚀

What Are Variables in JavaScript?

A variable is a named reference to a value stored in memory. You can think of it like a sticky note — you write a label on it and attach it to a piece of data so you can find it later.

let userName = "Debesh";
console.log(userName); // Output: Debesh

Here, userName is the variable name, and "Debesh" is the value it holds.

Why Do We Need Variables?

Without variables, you'd have to hardcode every value everywhere. Variables let you:

Store data for later use
Reuse values across your program
Update data as your app runs

How to Declare Variables in JavaScript: `var` vs `let` vs `const`

JavaScript gives you three keywords to create variables. Choosing the right one matters.

`var` — The Legacy Way

var was the original way to declare variables. It's function-scoped, which means it doesn't respect block boundaries like if or for.

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

if (true) {
  var city = "Delhi"; // This OVERWRITES the outer variable!
}
console.log(city); // Output: Delhi

⚠️ Avoid var in modern JavaScript. It can cause unexpected bugs due to hoisting and lack of block scope.

`let` — The Modern, Reassignable Variable

let is block-scoped — it only exists inside the {} block where it's declared. You can reassign its value.

let score = 10;
score = 25; // ✅ Reassignment works
console.log(score); // Output: 25

if (true) {
  let score = 100; // This is a DIFFERENT variable (block-scoped)
}
console.log(score); // Output: 25 ✅

Use let when you know the value will change later (counters, toggles, user input).

`const` — The Constant (Cannot Be Reassigned)

const is also block-scoped, but the key difference is you cannot reassign it after initialization.

const PI = 3.14159;
PI = 3.14; // ❌ TypeError: Assignment to constant variable

But here's a gotcha — const doesn't mean immutable. If the value is an object or array, you can still modify its contents:

const user = { name: "Debesh", age: 22 };
user.age = 23; // ✅ This works! The object is mutated, not reassigned.
console.log(user); // { name: "Debesh", age: 23 }

Use const by default. Only switch to let when you genuinely need to reassign.

Quick Comparison Table

Feature	`var`	`let`	`const`
Scope	Function	Block	Block
Reassignable	✅ Yes	✅ Yes	❌ No
Hoisted	✅ (undefined)	✅ (TDZ error)	✅ (TDZ error)
Redeclarable	✅ Yes	❌ No	❌ No
Recommended?	❌ Avoid	✅ When needed	✅ Default

💡 TDZ (Temporal Dead Zone): let and const variables exist in the TDZ from the start of the block until the declaration is reached. Accessing them before declaration throws a ReferenceError.

What Are Data Types in JavaScript?

A data type defines what kind of value a variable holds. JavaScript is a dynamically typed language — you don't have to specify the type; JavaScript figures it out at runtime.

let x = 42;        // x is a Number
x = "hello";       // now x is a String — totally valid!

JavaScript has 8 data types, split into two categories:

Primitive Data Types (7 types)

Primitives are immutable — their values can't be altered (you create new values instead). They are compared by value.

Reference Data Type (1 type)

Objects (including arrays and functions) are stored by reference — variables point to a location in memory.

JavaScript Primitive Data Types Explained

1. String — Text Data

A string is a sequence of characters wrapped in quotes.

let firstName = "Debesh";         // double quotes
let lastName = 'Das';             // single quotes
let greeting = `Hello, ${firstName}!`; // template literal (backticks)

console.log(greeting); // Output: Hello, Debesh!

Common string methods:

let msg = "JavaScript is awesome";

console.log(msg.length);          // 21
console.log(msg.toUpperCase());   // "JAVASCRIPT IS AWESOME"
console.log(msg.includes("awesome")); // true
console.log(msg.slice(0, 10));    // "JavaScript"

2. Number — Integers and Decimals

JavaScript uses a single Number type for both integers and floating-point numbers.

let age = 25;           // integer
let price = 99.99;      // decimal
let negative = -10;     // negative number

console.log(typeof age);   // "number"
console.log(typeof price); // "number"

Special numeric values:

console.log(1 / 0);          // Infinity
console.log(-1 / 0);         // -Infinity
console.log("hello" * 2);    // NaN (Not a Number)
console.log(typeof NaN);     // "number" — yes, really!

💡 Gotcha: NaN is of type "number" and NaN !== NaN. Use Number.isNaN() to check for it.

3. BigInt — Very Large Numbers

When you need numbers larger than Number.MAX_SAFE_INTEGER (2⁵³ - 1), use BigInt.

let bigNumber = 9007199254740991n; // notice the 'n' suffix
let anotherBig = BigInt("123456789012345678901234567890");

console.log(bigNumber + 1n); // 9007199254740992n
console.log(typeof bigNumber); // "bigint"

⚠️ You cannot mix BigInt with regular Numbers in arithmetic. Use explicit conversion.

4. Boolean — True or False

A boolean holds one of two values: true or false. They power every decision in your code.

let isLoggedIn = true;
let hasAccess = false;

if (isLoggedIn) {
  console.log("Welcome back!"); // This runs
}

Truthy and Falsy values in JavaScript:

// Falsy values (evaluate to false):
// false, 0, -0, 0n, "", null, undefined, NaN

// Truthy — everything else!
console.log(Boolean("hello"));  // true
console.log(Boolean(0));        // false
console.log(Boolean([]));       // true (empty array is truthy!)
console.log(Boolean(""));       // false

5. Undefined — Declared but No Value

A variable that has been declared but not assigned a value is undefined.

let result;
console.log(result);        // undefined
console.log(typeof result); // "undefined"

JavaScript also returns undefined when you access a property that doesn't exist:

let user = { name: "Debesh" };
console.log(user.age); // undefined

6. Null — Intentionally Empty

null means "no value on purpose" You use it to explicitly say, "this variable has nothing."

let selectedProduct = null; // nothing selected yet

if (selectedProduct === null) {
  console.log("No product selected");
}

💡 Important bug in JavaScript: typeof null returns "object". This is a well-known legacy bug that will never be "fixed" for backward compatibility.

console.log(typeof null); // "object" — this is a bug!

`undefined` vs `null` — What's the Difference?

Feature	`undefined`	`null`
Meaning	Variable exists, no value yet	Intentionally set to empty
Set by	JavaScript (automatically)	Developer (manually)
`typeof`	`"undefined"`	`"object"` (bug)
Use case	Uninitialized variables	Resetting / clearing data

7. Symbol — Unique Identifiers

A Symbol creates a guaranteed unique value, useful as object property keys to avoid naming collisions.

let id1 = Symbol("id");
let id2 = Symbol("id");

console.log(id1 === id2); // false — every Symbol is unique!

// Using Symbol as an object key
let user = {
  name: "Debesh",
  [id1]: 101
};

console.log(user[id1]); // 101

Symbols are an advanced feature — as a beginner, just know they exist. You'll use them more in frameworks and libraries.

JavaScript Reference Data Type: Objects

Object — Collections of Key-Value Pairs

An object is a collection of related data grouped together.

let person = {
  name: "Debesh",
  age: 22,
  isStudent: true,
  skills: ["JavaScript", "React", "Node.js"],
  greet: function () {
    console.log(`Hi, I'm ${this.name}!`);
  }
};

console.log(person.name);       // "Debesh"
console.log(person.skills[0]);  // "JavaScript"
person.greet();                 // "Hi, I'm Debesh!"

Arrays — Ordered Lists of Values

An array is a special object used to store ordered collections.

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits[0]);     // "Apple"
console.log(fruits.length); // 3

fruits.push("Grapes");      // Add to end
console.log(fruits);        // ["Apple", "Banana", "Mango", "Grapes"]

💡 In JavaScript, arrays are technically objects. typeof [] === "object". Use Array.isArray() to check if something is an array.

How to Check Data Types with `typeof`

The typeof operator returns a string indicating the type of a value.

console.log(typeof "Hello");      // "string"
console.log(typeof 42);           // "number"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object"    ← known bug
console.log(typeof {});           // "object"
console.log(typeof []);           // "object"    ← use Array.isArray()
console.log(typeof function(){}); // "function"
console.log(typeof Symbol());     // "symbol"
console.log(typeof 10n);          // "bigint"

Type Coercion in JavaScript: Implicit vs Explicit

JavaScript automatically converts types in some situations — this is called type coercion.

Implicit Coercion (Automatic)

console.log("5" + 3);    // "53"  → Number 3 is coerced to String
console.log("5" - 3);    // 2     → String "5" is coerced to Number
console.log(true + 1);   // 2     → true becomes 1
console.log(false + "");  // "false" → boolean coerced to string

⚠️ The + operator with strings triggers concatenation, not addition. This is one of the most common beginner bugs!

Explicit Coercion (Manual)

let str = "42";
let num = Number(str);   // 42
let back = String(num);  // "42"
let bool = Boolean(1);   // true

console.log(parseInt("100px"));   // 100
console.log(parseFloat("3.14m")); // 3.14

Common Beginner Mistakes to Avoid

❌ Mistake 1: Using `var` instead of `let`/`const`

// Bad
var count = 0;

// Good
let count = 0;   // if value changes
const MAX = 100; // if value stays the same

❌ Mistake 2: Comparing with `==` instead of `===`

console.log(0 == "");    // true   (type coercion)
console.log(0 === "");   // false  (strict comparison)
console.log(null == undefined); // true
console.log(null === undefined); // false

💡 Always use === (strict equality) to avoid unexpected type coercion bugs.

❌ Mistake 3: Assuming `const` means immutable

const arr = [1, 2, 3];
arr.push(4); // ✅ Works! Only reassignment is blocked.
arr = [5];   // ❌ TypeError

Summary: JavaScript Variables and Data Types Cheat Sheet

Data Type	Example	`typeof` Result
String	`"hello"`	`"string"`
Number	`42`, `3.14`	`"number"`
BigInt	`123n`	`"bigint"`
Boolean	`true`, `false`	`"boolean"`
Undefined	`undefined`	`"undefined"`
Null	`null`	`"object"`
Symbol	`Symbol("x")`	`"symbol"`
Object	`{}`, `[]`, `function(){}`	`"object"`

Rules of Thumb 🎯

Use const by default, let when you need to reassign, never var
JavaScript has 7 primitive types and 1 reference type (Object)
Always use === for comparisons
Use typeof to inspect types, but remember its quirks (null, arrays)
Be mindful of type coercion — especially with the + operator

What's Next?

Now that you understand variables and data types, you're ready to explore:

Operators and Expressions — Arithmetic, comparison, and logical operators
Control Flow — if/else, switch, and loops
Functions — Reusable blocks of code

Happy coding! 🎉

Command Palette