# 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.

```javascript
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.

```javascript
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.

```javascript
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.
    
    ```javascript
    let name = "Rith"; // string
    ```
    
*   **Number** — numeric values (integers, floats).
    
    ```javascript
    let age = 25; // number
    ```
    
*   **Boolean** — true or false.
    
    ```javascript
    let isStudent = true; // boolean
    ```
    
*   **Null** — explicitly “no value”.
    
    ```javascript
    let data = null; // intentionally empty
    ```
    
*   **Undefined** — a variable declared but not assigned.
    
    ```javascript
    let temp;
    console.log(temp); // undefined
    ```
    

**Tip:** Use `typeof` to inspect types quickly:

```javascript
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

```javascript
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.
    

```javascript
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:

```javascript
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

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

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

### Example 2 — change `age`

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

### Example 3 — try changing a `const`

```javascript
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).
    
    ```javascript
    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](http://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)

```js
// 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);
```