Now that you know what a variable is, let's look at how we actually build one in JavaScript. Making a variable is a two-step process: first, you tell the computer to build the box (declaration), and second, you put something inside it (assignment).

To create a box, you start by using a keyword like let, followed by the name you want to give your box. This looks like this:

let userLoginName;

Right now, the box exists, but it is completely empty. In JavaScript, if you open an empty box, it gives you back a special word: undefined. It literally means the value has not been defined yet.

To put a value inside the box, we use the equal sign (=). In programming, we call this the assignment operator, but it does not mean "equal to" like it does in math. Instead, it acts like an arrow pushing a value from the right side into the box on the left side:

userLoginName = "Alex123";

You can also combine both steps into one single line to save time, creating the box and filling it immediately:

let userLoginName = "Alex123";

Once a variable is created using let, you can change its contents later without using the keyword again. You just state the box name and push a new value inside:

userLoginName = "Sam456";

Now, the old name "Alex123" is tossed in the trash, and the box holds "Sam456".

You can't just give your variables any random name you want. JavaScript has a few strict rules about what characters are allowed on a label, and breaking them will cause your whole website to crash with a nasty error.

Here are the official rules you must follow when naming your boxes:

• No Spaces: A variable name must be one continuous word. You cannot name a box let user name. JavaScript will get confused and think you are trying to write multiple separate commands.

• Start with Letters, $, or _: Your name can include numbers, but it cannot start with a number. For example, let player1 is perfectly fine, but let 1player will instantly break your code.

• No Hidden Keywords: You cannot use words that JavaScript already uses for its own features, like let let or let const. These are called reserved words.

Because spaces aren't allowed, human eyes have a tough time reading long names like lettotalshoppingcartcost. To fix this, web developers use a coding style called camelCase.

With camelCase, you start the very first word with a lowercase letter, and then capitalize the first letter of every single word that comes after it. It looks like this: totalShoppingCartCost or userLoginStatus. The bumps in the capital letters look like the humps on a camel, which makes it super easy to read at a single glance!

So far, we have been using the keyword let to build our data boxes. As you saw, let is great because it is flexible—you can throw something inside it today and swap it out for something else tomorrow. But what if you have data that should never change?

Imagine you are building an app and you want to store a user's date of birth, or the value of Pi in math, or even the name of your company. If another part of your program accidentally changes that information later on, it could break your entire system.

To protect your data from accidental changes, JavaScript gives us a second keyword called const (which is short for "constant").

While a let box is like a standard cardboard box that you can reopen and refill anytime, a const box is like a solid steel safe. The moment you declare a const box, you *must* put a value inside it immediately. Once that value is locked in, it is sealed forever. You are strictly forbidden from changing it.

If you try to re-assign a new value to a const variable, JavaScript will instantly stop your program and throw a loud error message across the screen. It might feel frustrating to see an error, but this is actually JavaScript acting like a helpful guardrail, making sure you don't accidentally ruin important data by mistake.

As a golden rule for modern web development: always use const by default for your boxes. Only use let if you are absolutely certain that the data inside the box will need to change later on.

Before modern updates came along, developers didn't have let or const. For the first twenty years of JavaScript's life, there was only one way to make a data box: a keyword called var (short for variable).

While var still works today, it is highly discouraged in modern web development because it behaves in wild, unpredictable ways. To understand why it's dangerous, think of let and const as modern, smart storage boxes, while var is like a glitchy, haunted box from the 1990s.

The Duplication Glitch

In real life, if you buy a dog and name it Buddy, and then buy a second dog and also name it Buddy, things get confusing. Modern JavaScript knows this. If you try to declare two boxes with the exact same name using let, the engine will yell at you:

let user = "Alice";

let user = "Bob"; // ❌ ERROR! You already have a box named user!

This error is a beautiful safety net because it prevents you from accidentally wiping out your old data. But watch what happens when you use the old var keyword:

var user = "Alice";

var user = "Bob"; // 👍 JavaScript says nothing and silently overwrites it!

With var, JavaScript doesn't check if the box already exists. It just deletes your old data without warning. If you are working on a massive website with thousands of lines of code, you could accidentally reuse a variable name that a teammate wrote, completely destroying their logic without ever realizing it.

Why Is This Useful to Know?

• Reading Older Code: You will see var used in older tutorials, stack overflow answers, and legacy company systems. Knowing what it is prevents you from panicking when you encounter it.
• Interview Gold: Senior developers love asking beginners why we don't use var anymore. Remembering that var lacks safety checks and allows silent duplication is a massive win for your tech foundation.

In short: Treat var like a historic museum artifact. Look at it, understand it, but don't build your new projects with it!

Imagine you carry a VIP backstage pass to a concert. With that pass, you can walk freely into the main stadium, the dressing rooms, and the private lounge. But a regular ticket holder can only stay in the main stadium seats; they aren't allowed to cross into the backstage rooms.

In JavaScript, this concept of boundary lines and access rights is called Scope. Scope simply determines exactly where in your code a specific variable is allowed to be seen and used.

Not all data boxes are created equal. Depending on where and how you declare a variable, it will belong to one of two main categories:

• Global Scope (The Main Stadium): If you create a variable out in the wide-open spaces of your script—completely outside of any functions or specialized code blocks—it becomes a global variable. Any line of code anywhere in your entire project can look inside that box and change it. While this sounds convenient, it is actually a bit dangerous because anyone can mess with it.

• Local Scope (The Backstage Rooms): If you build a variable inside a closed-off room (like a function or a loop), that variable is completely hidden from the rest of the world. Code outside that specific room cannot see it. The moment that room finishes its job, the variable inside it is tossed away safely to keep your computer's memory clean.

Understanding scope is a massive milestone for a new developer. It prevents your variables from colliding into each other and keeps your data exactly where it belongs. In our next section, we will see the physical walls that create these rooms: functions and blocks.

Now that you know variables are like labeled storage boxes, we need to talk about where you are allowed to put those boxes. In JavaScript, you can build private rooms using curly braces { }.

Think of your code like a house. Anything written out in the open is like the front yard—anyone walking by can see it and mess with it. But when you use a pair of curly braces { }, you are building a private room inside the house.

Modern Boxes Stay in Their Rooms

The modern keywords we learned about, let and const, are incredibly well-behaved. If you create a let or const box inside a set of curly braces, that box is locked in that room. The code outside in the "front yard" has absolutely no idea it exists.

This is a amazing security feature. It means you can create a temporary variable inside a small room, use it, and the moment that room closes, JavaScript throws the box away to keep your computer's memory clean and uncluttered.

The Ghost Keyword (Var)

This is where the old keyword var fails completely. var doesn't care about standard rooms. If you build a var box inside a set of curly braces, it acts like a ghost—it walks straight through the walls, leaks out into the front yard, and can accidentally overwrite your other data!

You made it! We have covered the entire engine room of JavaScript. Let's do a super quick review of your new mental map before we test your skills:

First, your text file is read by the Engine (like V8). The engine creates an Execution Context (a workspace) to store your variables and functions during a creation phase, then runs them line-by-line during an execution phase. To keep track of what is running right now, it uses the Call Stack.

Second, because the engine is single-threaded and can only do one thing at a time, it leans on the browser's Runtime Environment to handle big tasks like timers and button clicks. When those external tasks finish, they wait on a line called the Callback Queue until the Event Loop sees the stack is completely empty and passes them in.

🎉 Congratulations on completing Subject 1.1! 🎉

You have built a rock-solid foundation. Don't be shy now—let's see what you've retained! Smash that button below to take the quiz, test your brain, and lock in these concepts. You've absolutely got this!