# JavaScript Variables and Data Types Explained

Every program you will ever write essentially does the same three things: it takes data in, it manipulates that data, and it spits data out.

But to manipulate data, the computer needs a way to remember it. If a user types their name into a login form, your code needs to hold onto that name so it can say "Welcome, Alex" on the next screen.

In JavaScript, we remember data using **variables**.

Think of a variable as a cardboard box. When you create a variable, you are grabbing an empty box, writing a label on the outside with a sharpie, and putting a piece of information inside. Later on, whenever you need that information, you don't need to know exactly where the box is stored in the computer's memory—you just ask JavaScript for the box by its label.

Here is how you build those boxes, and what you can put inside them.

* * *

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

To create a variable in JavaScript, you have to "declare" it. You do this using one of three special keywords: `var`, `let`, or `const`.

#### 1\. `let`: The Standard Box

If you need a box where the contents might change later, you use `let`.

```javascript
// We create a box labeled 'age' and put the number 25 inside.
let age = 25;
console.log(age); // Output: 25

// A year passes. We open the box, throw away the 25, and put in 26.
age = 26;
console.log(age); // Output: 26
```

Notice that the second time we interact with `age`, we don't write `let` again. You only use `let` when you are physically constructing the box for the very first time. After that, you just use the label.

#### 2\. `const`: The Locked Box

Often, you have data that should *never* change while your program is running. A birthday, a configuration setting, or the mathematical value of Pi. For this, we use `const` (short for constant).

When you use `const`, you put the data in the box and immediately put a padlock on it.

```javascript
const birthYear = 1998;

// If we try to change it, JavaScript will throw an error and crash.
birthYear = 1999; // ERROR: Assignment to constant variable.
```

As a general rule in modern JavaScript: **Always default to using** `const`**.** Only switch to `let` if you know for a fact that the value needs to change. This prevents you from accidentally overwriting important data.

#### 3\. `var`: The Ghost of JavaScript Past

Before 2015, JavaScript didn't have `let` or `const`. It only had `var`.

```javascript
var playerName = "Alex";
```

You will see `var` everywhere in older tutorials and legacy codebases. It does the same basic job of storing data, but it has some strange, unpredictable behaviors under the hood. In modern web development, we generally avoid using `var`. Stick to `let` and `const`.

* * *

### A Brief Note on Scope

Why do we avoid `var`? The main reason is **Scope**.

Scope defines *where* your box is visible. Imagine your code is a house.

*   If you put a box in the living room, everyone in the house can see it. (Global scope).
    
*   If you put a box inside a locked bedroom, only people in that bedroom can see it. (Block scope).
    

In JavaScript, a "room" is created by curly braces `{ }`, like in an `if` statement or a loop.

`let` and `const` respect closed doors. If you create a `let` variable inside a `{ }` block, it stays trapped inside that block. `var`, on the other hand, ignores doors. It leaks out of blocks and becomes visible to parts of your code that shouldn't have access to it, causing frustrating bugs.

#### The Cheat Sheet

| Keyword | Can be reassigned? | Scope | Should you use it? |
| --- | --- | --- | --- |
| `const` | No | Block (`{ }`) | **Yes** (Default choice) |
| `let` | Yes | Block (`{ }`) | **Yes** (When value will change) |
| `var` | Yes | Function / Global | **No** (Avoid in modern JS) |

* * *

### Data Types: What Goes in the Box?

We know how to make boxes. Now, what kind of things can we put inside them?

In JavaScript, there are five fundamental **Primitive Data Types**.

#### 1\. Strings (Text)

A string is just a collection of characters. To tell JavaScript that you are writing a string and not a piece of code, you must wrap the text in quotes (single `' '`, double `" "`, or backticks `` ` ` ``).

```javascript
let username = "himanshu_dev";
let greeting = 'Hello World';
```

#### 2\. Numbers (Math)

Unlike some other languages, JavaScript doesn't care if a number is a whole integer or a decimal. It treats all math as just a "number". Notice that we do *not* use quotes around numbers. If you put quotes around `"42"`, JavaScript treats it as the word "42", not the mathematical value.

```javascript
let score = 100;
let price = 19.99;
```

#### 3\. Booleans (True / False)

A boolean only has two possible values: `true` or `false`. They are the digital equivalent of a light switch. We use them constantly to control the flow of our programs (e.g., *if the user is logged in, show the dashboard*).

```javascript
let isDarkModeEnabled = true;
let hasPaidSubscription = false;
```

#### 4\. Undefined (The Empty Box)

If you build a box with `let`, but you don't put anything inside it, JavaScript automatically fills it with a special value called `undefined`. It essentially means: *"This variable exists, but it has no value yet."*

```javascript
let futureData;
console.log(futureData); // Output: undefined
```

#### 5\. Null (The Deliberately Empty Box)

`null` and `undefined` seem similar, but they have a distinct philosophical difference. `undefined` is JavaScript saying *"I don't know what this is."* `null` is *you* (the developer) explicitly saying *"This is intentionally empty."*

```javascript
// The user hasn't selected a profile picture yet.
let profilePicture = null; 
```

* * *

### What's Next?

Variables are the absolute atoms of programming. You define a piece of data, give it a name, and pass it around your application.

But what happens when you need to store a list of 100 users? Creating 100 different variables (`user1`, `user2`, `user3`) is a terrible idea. When you want to store multiple related values inside a single box, you need an **Array**.

If you are comfortable with single variables, you are ready to learn how to group them together. Check out my guide on [**JavaScript Arrays 101**](https://blog.himanshubalani.com/javascript-arrays-101) to take the next step.