Skip to main content

Command Palette

Search for a command to run...

A Beginner’s Guide to Variables and Data Types in JavaScript

Updated
8 min readView as Markdown
A Beginner’s Guide to Variables and Data Types in JavaScript
C

CSE student documenting my learning in databases, networking, and web fundamentals.

Imagine you have a few empty boxes in front of you. You write “Name” on one box and “Age” on another. Then you put your name inside the first box and your age inside the second.

In JavaScript, a variable works in the same way. It is simply a box that stores some information. And that box has a name so we can use it later.


Variables: The Boxes

In JavaScript, if we want to create these boxes, we use special keywords.

There are three of them:

  • let

  • const

  • var

Now you might be wondering:
Why do we need three different ways to create a box? That’s a good question.

Earlier, JavaScript only had var. But over time, developers found some problems with it. So later, let and const were introduced to make things clearer and safer.

Today, in modern JavaScript, we mostly use let and const.

let - A Box You Can Change

If you create a variable using let, you can change what’s inside the box later.

Example:

let age = 18;

Here:

  • let creates the box

  • age is the name written on the box

  • 18 is the value inside

Now suppose the age changes:

age = 19;

That’s completely fine. The same box now holds a new value.

const - A Box You Cannot Replace

If you create a variable using const, you cannot change its value later.

Example:

const country = "India";

Now if you try this:

country = "Japan";

JavaScript will give an error.

Why? Because const creates a box whose value cannot be replaced. Once you put something inside, it stays that way.

What About - var ?

var was the old way of creating variables.

var name = "Chirag";

It still works. But it behaves differently in some situations, especially with scope. We’ll understand var more clearly when we talk about scope.

Let's Try a Small Exercise

Now that we know how to create boxes, let’s create a few.

Imagine we want to store:

  • Your name

  • Your age

  • Whether you are a student

How will you write this?

Try writing this before looking ahead.

I hope you tried, Now here’s one possible way:

let name = "Chirag";
let age = 18;
const isStudent = true;

Let’s quickly understand what’s happening here.

  • "Chirag" is text.

  • 18 is a number.

  • true is a value that means yes.

You might notice something interesting. The values inside these boxes are not of the same kind.

Some are text. Some are numbers. Some are just true or false.

And this brings us to something important.


What Kind of Values Can a Variable Store?

In JavaScript, the value inside a variable can be of different types. These are called data types.

Don’t worry. It’s simpler than it sounds. Let’s go one by one.

1️⃣ String (Text)

If the value is text, it is called a string.

Text must be written inside quotes. Single or Double, It's your choice. But make sure, it's consistent.

Example:

let name = "Chirag";

Here, "Chirag" is a string.

2️⃣ Number

If the value is a number, it is simply called a number.

Example:

let age = 18;
let price = 99;

Noticed something? Numbers do not use quotes.

If you write:

let age = "18";

Now, it becomes a string, not a number.

3️⃣ Boolean (true / false)

Sometimes we only need two answers:

  • Yes

  • No

In JavaScript, we use boolean values for this.

Example:

let isStudent = true;
let isLoggedIn = false;

Remember! No quotes here either.

4️⃣ Undefined

What if you create a box. But don’t put anything inside it?

Example:

let score;

Here, we created a variable but didn’t store a value in it.

In this case, JavaScript automatically gives it the value: undefined

It simply means:
“The box exists, but nothing is inside it yet.”

5️⃣ Null

null is slightly different.

It means:
“There is nothing inside this box — and I did that on purpose.”

Example:

let result = null;

So:

  • undefined → nothing assigned yet

  • null → intentionally empty

That’s the basic difference.


Now Let’s Clear the Confusion: var, let, and const

So far, we’ve used all three:

  • var

  • let

  • const

But what really makes them different?

Feature var let const
Can you change the value later? Yes Yes No
Follows block scope? No Yes Yes
Commonly used in modern JavaScript? Rarely Yes Yes

Now let’s understand this slowly.

Can You Change the Value?

We already saw this earlier.

let age = 18;
age = 19;   // Allowed

It works, with let.

const country = "India";
country = "Japan";   // Error

With const, it gives an error.

So here’s a simple rule you can remember:

  • If the value will change → use let

  • If the value should not change → use const

That's all.

What About var?

var also allows value changes.

var score = 50;
score = 60;  // Allowed

It looks similar to let. So why is var rarely used in modern JavaScript?

Take a look at this example:

{
  var x = 10;
}

{
  let y = 20;
}

console.log(x); // ?
console.log(y); // ?

What do you think will happen? Pause and think for a while.

Now let's see the output:

  • x will work.

  • y will give an error.

The reason is something called block scope. And this is where let and const behave differently from var.


What Is Scope?

So, Scope simply means:

Where a variable can be accessed.

In JavaScript, when you use curly braces { }, you are creating a block.

And anything declared with let or const inside that block, stays inside that block only.

Example:

{
  let secret = "Hidden";
}

console.log(secret); // Error

The variable secret exists only inside the block {}. Once you step outside, it’s not accessible.

That’s block scope.

Now, let us compare it with var:

{
  var secret = "Hidden";
}

console.log(secret) // Hidden

Here, secret is still accessible outside the block {}.

This difference is one of the main reasons, modern JavaScript prefers let and const over var.

They behave more predictably.

So Which One Should You Use?

In modern JavaScript:

  • Use const by default.

  • Use let when you know the value will change.

  • Avoid var unless you have a specific reason.


Practice Time

Now it’s your turn.

Create three variables:

  • Your name

  • Your age

  • Whether you are a student

Try writing this yourself before looking at the example below.

Remember, no cheating!

Here's one of the possible solution:

let name = "Rahul";
let age = 20;
const isStudent = true;

Don’t worry if your example was different. That’s completely fine. What matters is that you’re able to write it yourself.

Now, let's test your understanding of the concept.

Step1: Print the Values

Write this code:

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

You should see the values printed in the console.

If you don’t know how to run it yet, you can try it in the browser console or any online JavaScript editor.

Step2: Try Changing the Values

Now, write this code:

age = 21;
isStudent = false;

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

What will happen?

You'll get an error.

Why? Because isStudent was created using const. That means, its value cannot be changed later.

Step3: Try This (Small Experiment)

Replace let with var for name.

Does it still work? Yes.

Now, try testing this code:

{
   var name = "Rahul";
   let age = 21;
   const isStudent = false;
}

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

Observe, what happens!

This is how, you understand scope. By doing experiments.


Wrapping Up

In this article, we understood what variables are. We saw how to create them using let, const, and var. We learned about basic data types like string, number, boolean, null, and undefined. And we understood what scope means in a practical way.

Variables may look simple at first. But every JavaScript program — no matter how big — is built on top of them. If you are comfortable with variables, you’ve already built your foundation in JavaScript.

Take a few minutes to experiment with the code. Change values. Break things. Observe the errors. That’s how learning becomes real.


What's Next?

Now that you understand how JavaScript stores information, the next natural question is:
How does JavaScript works with that information?

In the next article, we’ll explore how JavaScript performs operations on that data. Because storing data is just the beginning. Using it is where programming truly starts.


➡ Next Article: Operators in JavaScript

JavaScript Foundations

Part 11 of 11

This series documents my journey of learning JavaScript from the ground up. Each article explains core JavaScript concepts in a beginner-friendly way with simple examples and practical explanations. Topics include variables, operators, control flow, functions, arrow functions, arrays, objects, and more. If you're starting your JavaScript journey, this series will help you build a strong foundation step by step.

Start from the beginning

The Magic of this, call(), apply(), and bind() in JavaScript

In the previous article, we explored Object-Oriented Programming (OOP) in JavaScript and learned how classes allow us to create objects with properties and methods. For example, if you remember we cre