# Understanding Variables and Data Types in JavaScript

If you’re just starting with JavaScript, variables can feel confusing.  
Let’s fix that in one short read (and a bit of friendly chaos ).

### **What is a Variable?**

Imagine your room full of **labeled boxes**:

*   One box says **"Name"** and stores `"Alex"`.
    
*   Another says **"Age"** and stores `20`.
    
*   Another says \*\*"IsStudent."`and stores`true\`.
    

In programming, a **variable** is just a **box with a label** where you store information so you can use it later.

In JavaScript, we use these keywords to create (declare) a variable:

*   `var`
    
*   `let`
    
*   `const`
    

You can think of it like:

```javascript
let label = value;
```

Example:

```javascript
let name = "Alex";
let age = 20;
let isStudent = true;
```

## **Primitive Data Types (The Basic Kinds of Values)**

These are the most common **primitive** types you’ll use:

*   **string**: text inside quotes
    
*   **number**: any number (integer or decimal)
    
*   **boolean**: `true` or `false`
    
*   **null**: “nothing here on purpose.”
    
*   **undefined**: “nothing here (and we didn’t even set it yet).”
    

### **Simple Examples:**

```javascript
let name = "Alex";        // string
let age = 20;             // number
let isStudent = true;     // boolean
let middleName = null;    // null (we KNOW there is no middle name)
let address;              // undefined (we never assigned a value)
```

Notice: `address` is `undefined` because we didn’t give it a value at all.

## **How to Declare Variables:** `var`**,** `let`**, and** `const`

In modern JavaScript, you’ll mostly use `let` and `const`.  
`var` is older and has some weird behaviours (we’ll keep it super simple here).

### `var`

*   Old way of declaring variables.
    
*   Has **function scope** (we’ll explain scope soon).
    
*   Can be **re-declared** and **updated**.
    

```javascript
var city = "Delhi";
var city = "Mumbai";   // this is allowed with var
city = "Bangalore";    // also allowed
```

### `let`

*   A modern way to declare **variables that can change**.
    
*   Has **block scope** (more on this in a bit).
    
*   Can be **updated**, but **cannot be re-declared in the same block**.
    

```javascript
let score = 10;
score = 15;   // allowed

// let score = 20;    // Not allowed in the same block
```

### `const`

*   Used for values that **should not change**.
    
*   Also has **block scope**.
    
*   Must be **given a value immediately**.
    
*   Cannot be **updated** or **re-declared**.
    

```javascript
const pi = 3.14;
// pi = 3.14159;    // TypeError: Assignment to constant variable
```

Tiny human moment: I sometimes still typo `const` as `cost` and wonder why my code is broken.

## **Basic Difference Between** `var`**,** `let`**, and** `const`

Here’s a quick comparison table :

**Simple rule of thumb:**

*   **Use** `const` **by default.**
    
*   If you know the value will change, use `let`.
    
*   Avoid `var` unless you’re reading old code or specifically learning it.
    

* * *

## **What is Scope? (Beginner-Friendly)**

**Scope** answers the question:

*“Where in my code can I access this variable?”*

Think of scope like the **walls of a room**:

*   If a variable is declared **inside a room**, only people in that room can use it.
    
*   If it’s declared **outside all rooms**, everyone in the house can use it.
    

In JavaScript, the “rooms” are usually:

*   A **function**
    
*   A **block**: anything between `{` and `}` (like `if {}`, `for {}`, etc.)
    

### **Block Scope with** `let` **and** `const`

```javascript
if (true) {
  let message = "Hello!";
  console.log(message); // works
}

console.log(message);    // ReferenceError: message is not defined
```

`message` only exists **inside** the `{ ... }`.

### **Function Scope with** `var`

```javascript
function testVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // works because var is function-scoped
}

testVar();
// console.log(x); // x is not defined outside the function
```

`var` ignores the block `{}` and only cares about the whole **function**.

## **Simple Scope Diagram (Mental Picture)**

Imagine this little map:

```javascript
Global Scope
  |
  |-- function myFunction() {           // function scope
  |      let a = 1;
  |      if (true) {                    // block scope
  |          let b = 2;
  |      }
  |  }
```

*   `a` is visible **inside** `myFunction`.
    
*   `b` is only visible **inside the** `if` **block**.
    
*   Outside of `myFunction`, neither `a` nor `b` exists.
    

## **Showing How Values Can Change**

### **With** `let`

```javascript
let count = 0;
console.log(count); // 0

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

count = count + 5;
console.log(count); // 6
```

### **With** `const`

```javascript
const country = "India";
console.log(country); // "India"

// country = "USA";   // Error if you try this
```

One “gotcha”: `const` stops you from changing the **binding**, but for objects/arrays, their **contents** can still change.  
That’s a bit advanced for this post, so we’ll leave that for another day.

## **Mini Assignment**

Open your browser console (right-click → Inspect → Console tab)  
or create a simple `.js` file and run it with Node if you know how.

### **1\. Declare These Variables**

*   `name` → your name (string)
    
*   `age` → your age (number)
    
*   `isStudent` → `true` or `false` (boolean)
    

Try this:

```javascript
let name = "Shivam";     // change this to your name
let age = 25;            // change to your age
let isStudent = true;    // or false

console.log(name);
console.log(age);
console.log(isStudent);
```

### **2\. Try Changing** `let` **Values**

```javascript
age = 26;
isStudent = false;

console.log("Updated age:", age);
console.log("Updated isStudent:", isStudent);
```

### **3\. Try With** `const` **and See What Happens**

```javascript
const city = "Delhi";
console.log(city);

// Now try this:
city = "Mumbai";  // This should throw an error
```

You should see something like:  
`TypeError: Assignment to constant variable.`

This is **good** — it means JavaScript is protecting your constant from being changed.

## **Simple** `var`**,** `let`**,** `const` **Comparison Example**

Run this and see what works and what doesn’t:

```javascript
// var example
var language = "JavaScript";
var language = "TypeScript"; // allowed
console.log(language);       // "TypeScript"

// let example
let framework = "React";
// let framework = "Vue";    // Uncommenting this will cause an error
framework = "Next.js";       // allowed
console.log(framework);

// const example
const library = "Redux";
// const library = "Zustand"; // Not allowed
// library = "MobX";          // Not allowed
console.log(library);
```

*Happy learning!*