# Understanding Variables and Data Types in JavaScript

When we meet someone new, what's the first thing we remember about them ? Their name. Maybe their age. Whether they're a student or working somewhere. We're storing information in our brain without even thinking about it.

That's exactly what variables do in JavaScript. They store information so our program can remember and use it later.

* * *

## What is a Variable, and Why Do We Need It?

Think of a variable like a labelled box. We write a name on the outside of the box, and put a value inside it. Whenever we need that value, we just refer to the box by its name.

Without variables, a program would have no memory at all. We couldn't save a user's name, track a score in a game, or remember whether someone is logged in. Variables are what make code actually useful.

```javascript
let playerName = "Gurjeet";
// The box called "playerName" now holds "Gurjeet"

console.log(playerName); // Output: Gurjeet
```

* * *

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

JavaScript gives us three keywords to create a variable. Think of them as three different types of boxes. Each one has slightly different rules.

### var — the old way

`var` was the original way to declare variables in JavaScript. It still works, but it has some quirky behaviour that can lead to confusing bugs in bigger codebases. Most modern JavaScript code avoids it.

```javascript
var city = "Amritsar";
city = "Delhi"; // works fine, value gets updated
```

### let — for values that change

`let` is what we reach for when the value might need to change later. A score that updates as the game goes on, or a user's current status, that kind of thing.

```javascript
let score = 0;
score = 10; // updated after the player earns points
```

### const — for values that stay fixed

`const` is short for constant. Once we assign a value to it, we cannot replace it. The app's name, a base URL, a tax rate, anything that is not supposed to change during the program.

```javascript
const appName = "MyApp";
appName = "OtherApp"; // Error! Cannot reassign a const
```

A good rule to follow: default to `const`. If we know the value will need to change at some point, switch to `let`. And for now, just leave `var` alone.

* * *

## Primitive Data Types

Every value we store in a variable has a type. JavaScript has five basic types that we will work with constantly, and they are called primitive data types.

**String** is for text. Any time we are dealing with words, names, or sentences, we wrap the value in quotes and it becomes a string.

```javascript
let name = "Gurjeet"; // String
```

**Number** covers any numeric value, whether it is a whole number or a decimal.

```javascript
let age = 22;      // whole number
let price = 3.99;  // decimal
```

**Boolean** can only ever be `true` or `false`. Think of it as a yes/no switch.

```javascript
let isStudent = true;
let hasSubscription = false;
```

**Null** means the box is intentionally empty. We are the ones who put nothing there on purpose.

```javascript
let phoneNumber = null; // we know it's empty
```

**Undefined** means the box exists but nobody told it what to hold yet.

```javascript
let address; // no value assigned, so it's undefined
```

The difference between `null` and `undefined` trips almost everyone up at first. Here is the simplest way to think about it: `null`means "I know this is empty." `undefined` means "nobody even got around to filling this in yet." Small difference, but it matters once we start debugging real code.

```javascript
let name = "Gurjeet";  // String
let age = 22;          // Number
let isStudent = true;  // Boolean
let phone = null;      // Null, intentionally empty
let address;           // Undefined, not assigned yet
```

* * *

## var vs let vs const

The biggest practical difference comes down to two things: can the value be changed, and where in the code can the variable be accessed.

`var` can be reassigned and even re-declared, which sounds flexible but is actually what causes the bugs. `let` can be reassigned but not re-declared. `const` cannot be reassigned or re-declared at all.

The other difference is scope, which we are about to get into.

* * *

## What is Scope?

Scope answers one question: where in our code can a particular variable be accessed?

Here is a simple way to picture it. Think of our house. Whatever is inside our bedroom, like a personal diary, stays in our bedroom. Someone in the kitchen cannot just reach in and grab it. But something in the living room, like the television, is accessible to everyone in the house.

Variables work the same way. A variable declared inside a block of code, anything wrapped in `{ }`, can only be accessed within that block. That is called block scope, and it is the rule that both `let` and `const` follow.

```javascript
let outsideVar = "I am outside";

{
  let insideVar = "I am inside the block";
  console.log(outsideVar); // works fine
  console.log(insideVar);  // works fine
}

console.log(outsideVar); // works fine
console.log(insideVar);  // Error, insideVar doesn't exist out here
```

This is exactly why `var` causes confusion. It does not respect block scope the same way. It leaks out of blocks, which means it can be accessed from places we never intended. That is a bug waiting to happen.

* * *