Understanding Variables and Data Types in JavaScript

Hey everyone! 👋

If you are just starting your JavaScript journey, the very first thing you need to understand is how your code remembers information. Imagine trying to do math in your head without being able to temporarily store numbers in your memory. It would be impossible!

In programming, we use variables to act as our memory.

Today, we are going to look at what variables are, the different types of data they can hold, and the modern way to write them. As always, open up your browser console (F12 or Right-Click -> Inspect -> Console) and code along with me!

---

📦 What is a Variable? (The Box Analogy)

Think of a variable as a labeled storage box.

When you create a variable, you are grabbing an empty box, writing a name on it with a marker, and putting something inside it. Later, when you need that "something," you don't have to look for the exact item; you just ask JavaScript to look inside the box with that specific label.

How to Create (Declare) a Variable

In JavaScript, we have three keywords to create these boxes: let, const, and var. Let's look at the modern ones first.

1. let (The Changeable Box)

Use let when you know the value inside the box might change later.

let currentScore = 10;
console.log(currentScore); // 10

// Later in the game, the score changes!
currentScore = 15; 
console.log(currentScore); // 15

2. const (The Locked Box)

Use const (short for constant) when the value should never change. Once you put something in a const box, it's locked forever.

const birthYear = 2000;
console.log(birthYear); // 2000

// If we try to change it, JavaScript gets angry!
// birthYear = 2005; // ❌ Uncaught TypeError: Assignment to constant variable.

3. var (The Legacy Box)

You will see var in older codebases. It was the original way to declare variables before let and const were introduced. Nowadays, it’s best practice to avoid var because it can behave unpredictably. Stick to let and const!

---

🔍 Scope: Where Does the Box Live? (Keep it simple!)

Before we move on, let's briefly touch on scope. Scope is simply the "area" in your code where your variable box is allowed to be seen and used.

Think of curly braces {} like a room. If you create a let or const variable inside a room (like inside an if statement), it cannot be seen or used from the outside hallway.

if (true) {
  let secretMessage = "Hello from inside the room!";
  console.log(secretMessage); // Works perfectly here!
}

// console.log(secretMessage); // ❌ Error! The hallway can't see into the room.

---

🏷️ Primitive Data Types: What Can Go in the Box?

Now that we have our boxes, what can we put inside them? In JavaScript, basic values are called Primitive Data Types. Here are the five most common ones you will use every day:

1. String (Text) Strings are used for text. You wrap the text in single quotes '', double quotes "", or backticks ``.

let firstName = "Aman";
let greeting = 'Welcome to my blog!';

2. Number (Math) Numbers are exactly what they sound like. No quotes needed! They can be whole numbers or decimals.

let age = 24;
let temperature = 98.6;

3. Boolean (True or False) A boolean only has two possible values: true or false. These are incredibly useful for making decisions in your code (like checking if a user is logged in).

let isLearningJS = true;
let isTired = false;

4. Undefined (The Empty Box) If you create a box but forget to put anything inside, JavaScript automatically assigns it the value of undefined. It literally means "value not defined yet."

let futurePlan;
console.log(futurePlan); // undefined

5. Null (The Intentional Empty Box)null is similar to undefined, but it is intentional. It’s you, the developer, explicitly telling JavaScript, "I want this box to be completely empty right now."

let currentDiscount = null; 

---

👨‍💻 Your Turn: The Assignment!

Ready to build some muscle memory? Open your console and try this out:

1. Declare a variable using let or const for your Name (String).

2. Declare a variable for your Age (Number).

3. Declare a variable called isStudent (Boolean).

4. Print all three of them to the console using console.log().

5. The Test: Try changing the value of your age variable. Did it work? Now try changing the variable type from let to const and try changing your age again. What happens?

Understanding variables and data types is the absolute foundation of everything you will ever build in JavaScript. Master these, and you are well on your way!