# Understanding Variables and Data Types in JavaScript

When you start to learn JavaScript, the first thing that you will be introduced to is variables and data types. These are the essentials of a programming language. Having a clear understanding of these concepts, the rest will follow.

Let us understand these concepts stepwise in a simple way.

## What Are Variables and Why Do We Need Them?

Think of a variable like a **box** that stores information.

*   The **name of the box** → variable name
    
*   The **content inside the box** → value
    

### Real-life example:

If you want to store your name:

```plaintext
let name = "Gunjan";
```

Here:

*   `name` → variable
    
*   `"Gunjan"` → value stored inside it
    

### Why do we need variables?

*   To store data
    
*   To reuse values
    
*   To make programs dynamic and flexible
    

## How to Declare Variables in JavaScript

JavaScript provides three ways to declare variables:

### 1\. `var` (Old way)

```plaintext
var age = 20;
```

### 2\. `let` (Modern and preferred)

```plaintext
let age = 20;
```

### 3\. `const` (For fixed values)

```plaintext
const pi = 3.14;
```

## Key Difference Between `var`, `let`, and `const`

<table style="min-width: 100px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Feature</p></th><th colspan="1" rowspan="1"><p>var</p></th><th colspan="1" rowspan="1"><p>let</p></th><th colspan="1" rowspan="1"><p>const</p></th></tr><tr><td colspan="1" rowspan="1"><p>Re-declaration</p></td><td colspan="1" rowspan="1"><p>Allowed</p></td><td colspan="1" rowspan="1"><p>Not allowed</p></td><td colspan="1" rowspan="1"><p>Not allowed</p></td></tr><tr><td colspan="1" rowspan="1"><p>Re-assignment</p></td><td colspan="1" rowspan="1"><p>Allowed</p></td><td colspan="1" rowspan="1"><p>Allowed</p></td><td colspan="1" rowspan="1"><p>Not allowed</p></td></tr><tr><td colspan="1" rowspan="1"><p>Scope</p></td><td colspan="1" rowspan="1"><p>Function</p></td><td colspan="1" rowspan="1"><p>Block</p></td><td colspan="1" rowspan="1"><p>Block</p></td></tr></tbody></table>

### Example:

```plaintext
let age = 20;
age = 25; // allowed

const pi = 3.14;
pi = 3.15; // error
```

**Rule of thumb:**

*   Use `let` when value may change
    
*   Use `const` when value should not change
    
*   Avoid `var` in modern JavaScript
    

## Primitive Data Types in JavaScript (In Depth)

Primitive data types are the **most basic building blocks** in JavaScript. They store **single values** and are **immutable**.

Immutable **means once** created, its value cannot be changed directly (JavaScript creates a new value instead).

* * *

### 🔹 1. String (Text)

Strings represent text.

```plaintext
let name = "Gunjan";
let greeting = 'Hello';
let message = `Hi ${name}`; // template literal
```

#### Key Points:

*   Can use `" "`, `' '`, or `` ` ``
    
*   Template literals allow variables inside strings
    
*   Strings are immutable
    

```plaintext
let str = "hello";
str[0] = "H"; //won't change
console.log(str); // "hello"
```

* * *

### 🔹 2. Number

JavaScript has only **one number type** (no int/float separation).

```plaintext
let age = 20;
let price = 99.99;
```

#### Special cases:

```plaintext
console.log(1 / 0);     // Infinity
console.log("abc" * 2); // NaN
```

#### Important concept:

*   Stored as **64-bit floating point**
    
*   A precision issue exists:
    

```plaintext
console.log(0.1 + 0.2); // 0.30000000000000004
```

* * *

### 🔹 3. Boolean (true/false)

Used for decision-making.

```plaintext
let isStudent = true;
let isLoggedIn = false;
```

#### Used in conditions:

```plaintext
if (isStudent) {
  console.log("You are a student");
}
```

#### Truthy vs Falsy:

Falsy values:

*   false
    
*   0
    
*   ""
    
*   null
    
*   undefined
    
*   NaN
    

Everything else is **truthy**

* * *

### 4\. Undefined

A variable declared but not assigned gets `undefined`.

```plaintext
let x;
console.log(x); // undefined
```

Assigned automatically by JavaScript

* * *

### 🔹 5. Null

Represents an **intentional empty value**.

```plaintext
let data = null;
```

#### Difference:

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>undefined</p></th><th colspan="1" rowspan="1"><p>null</p></th></tr><tr><td colspan="1" rowspan="1"><p>JS assigns</p></td><td colspan="1" rowspan="1"><p>Developer assigns</p></td></tr></tbody></table>

```plaintext
let a;
let b = null;

console.log(a); // undefined
console.log(b); // null
```

* * *

### 6\. Symbol (Advanced)

Used to create **unique identifiers**.

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

console.log(id1 === id2); // false
```

Always unique—even with the same description

* * *

### 7\. BigInt

Used for very large numbers beyond the safe limit.

```plaintext
let big = 123456789012345678901234567890n;
```

## What is Scope? (Simple Explanation)

Scope defines **where a variable can be accessed**.

### Block Scope (`let`, `const`)

```plaintext
{
  let x = 10;
  console.log(x); // works here
}
console.log(x); // error
```

### Function Scope (`var`)

```plaintext
function test() {
  var y = 20;
}
console.log(y); // error
```

In simple terms:

*   `let` and `const` stay inside. `{ }`
    
*   `var` stays inside a function
    

![](https://cdn.hashnode.com/uploads/covers/6965b466b4643886b871e672/64948743-7c01-4722-b729-d907cae84b01.png align="center")

## Practical Example

Let’s put everything together:

```plaintext
let name = "Gunjan";
let age = 20;
let isStudent = true;

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

// Changing values
age = 21;
console.log(age);

// const example
const country = "India";
// country = "USA";  error
```

## Mini Assignment (Try Yourself)

1.  Declare variables for:
    
    *   Name
        
    *   Age
        
    *   IsStudent
        
2.  Print them in the console
    
3.  Try:
    
    *   Changing values of `let`
        
    *   Changing values of `const` (observe error)
        

* * *

## Final Thoughts

Variables and data types are the **foundation of JavaScript**. If you get comfortable with:

*   How to store data
    
*   When to use `let` vs `const`
    
*   Basic data types
    
*   Scope
    

You’ll be ahead of most beginners.

Don’t just read—**write code and experiment**. That’s where real learning happens.
