DEV Community

sanjeev singh
sanjeev singh

Posted on

Understanding Variables and Data Types in JavaScript

Before you can build anything in JavaScript, you need to understand how data is stored. Think of a variable as a labelled box: you put something inside it, give the box a name, and you can open it later to read or change what's inside.

┌─────────────────┐
│ name: "Alice" │ ← the box is called "name", value is "Alice"
└─────────────────┘


That's all a variable is. Let's learn how to create them.

---

## Declaring Variables: `var`, `let`, and `const`

JavaScript gives you three keywords to create variables. Each one behaves a little differently.

### `const`  a locked box

Use `const` when the value will **never change**. Once you put something in, it's sealed.

Enter fullscreen mode Exit fullscreen mode


js
const siteName = "MyBlog";
const pi = 3.14159;

siteName = "NewBlog"; // Error — cannot reassign a const


### `let` — a regular box

Use `let` when the value **needs to change** over time.

Enter fullscreen mode Exit fullscreen mode


js
let score = 0;

score = 10; // allowed
score = 20; // allowed again

console.log(score); // 20


### `var` — the old way (avoid it)

`var` is how variables used to be written before ES6 (2015). It works, but has quirky scoping behaviour that causes bugs. You'll see it in old code — but don't write new code with it.

Enter fullscreen mode Exit fullscreen mode


js
var name = "Bob"; // works, but prefer let or const


---

### The golden rule

> Start every variable with `const`. Only switch to `let` if you know the value will need to change.

---

## Primitive Data Types

Every value in JavaScript has a **type** — it tells you what kind of data you're working with. There are five core primitive types that every beginner must know.

### 1. String — text

Any text value, wrapped in quotes (single, double, or backticks):

Enter fullscreen mode Exit fullscreen mode


js
const firstName = "Alice";
const greeting = 'Hello!';
const message = Welcome, ${firstName}!; // template literal

console.log(message); // Welcome, Alice!


### 2. Number — numeric values

JavaScript uses a single `Number` type for both whole numbers and decimals:

Enter fullscreen mode Exit fullscreen mode


js
const age = 25;
const price = 199.99;
const temp = -3;

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


### 3. Boolean — true or false

Only two possible values. Used for yes/no, on/off decisions:

Enter fullscreen mode Exit fullscreen mode


js
const isStudent = true;
const isVerified = false;


### 4. Undefined — declared but empty

When you create a variable but don't give it a value, JavaScript fills it with `undefined` automatically:

Enter fullscreen mode Exit fullscreen mode


js
let username;
console.log(username); // undefined


### 5. Null — intentionally empty

`null` means you *deliberately* set a variable to "no value". The box exists, but you've chosen to leave it empty:

Enter fullscreen mode Exit fullscreen mode


js
let selectedUser = null; // no user selected yet


> `undefined` = "I never put anything in". `null` = "I chose to leave this empty".

---

## The `typeof` Operator

Use `typeof` to check what type a value is:

Enter fullscreen mode Exit fullscreen mode


js
console.log(typeof "Alice"); // "string"
console.log(typeof 25); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" ← a known JS quirk!


The `null` result is a historic bug in JavaScript — `null` is *not* an object, but `typeof null` has always returned `"object"`. Just something to be aware of.

---

## A Practical Example

Let's put it all together with a real student profile:

Enter fullscreen mode Exit fullscreen mode


js
const name = "Priya"; // string — won't change
let age = 20; // number — might change
const isStudent = true; // boolean — won't change
let email = null; // null — not provided yet

console.log(name); // "Priya"
console.log(age); // 20
console.log(isStudent); // true
console.log(email); // null

// Update age with let — this is fine
age = 21;
console.log(age); // 21

// Try to update a const — this will error
// name = "Sneha"; // TypeError


---

## What Is Scope?

Scope is the question: *"Where in my code can I use this variable?"*

Think of it like a house. Code inside a room can see what's in that room **and** in the hallway. But the hallway cannot see inside the rooms.

Enter fullscreen mode Exit fullscreen mode


js
const hallway = "I'm visible everywhere";

function bedroom() {
const insideBedroom = "only visible in here";

console.log(hallway); // works — hallway is in the outer scope
console.log(insideBedroom); // works — we're inside the room
}

bedroom();
console.log(insideBedroom); // Error — hallway can't see into the room


### `let` and `const` are block-scoped

A block is anything wrapped in `{}`. `let` and `const` only live inside the block where they're created:

Enter fullscreen mode Exit fullscreen mode


js
if (true) {
let blockVariable = "I only exist here";
console.log(blockVariable); // works
}

console.log(blockVariable); // Error — out of scope


### `var` ignores blocks (one reason to avoid it)

`var` leaks out of blocks, which leads to surprising bugs:

Enter fullscreen mode Exit fullscreen mode


js
if (true) {
var leaked = "I escape the block!";
}

console.log(leaked); // "I escape the block!" — unexpected!


This is exactly why `let` and `const` were introduced. They behave predictably.

---

## Putting It All Together

Enter fullscreen mode Exit fullscreen mode


js
// Good, modern JavaScript variable declarations

const userName = "Rahul"; // string, never changes
const userAge = 22; // number, never changes
const isStudent = true; // boolean, never changes
let score = 0; // number, will change during the game
let lastLogin = null; // null, no login recorded yet

console.log(typeof userName); // "string"
console.log(typeof userAge); // "number"
console.log(typeof isStudent); // "boolean"
console.log(typeof score); // "number"
console.log(typeof lastLogin); // "object" ← the null quirk

// Update the mutable ones
score = 150;
lastLogin = "2026-03-13";

console.log(score); // 150
console.log(lastLogin); // "2026-03-13"


Enter fullscreen mode Exit fullscreen mode

Top comments (0)