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.

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

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.

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

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

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.

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

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

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

// 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 to take the next step.