Understanding JavaScript Variables and How They Store Data

Let’s be honest, repeating yourself is the worst. Imagine we’re hanging out, and every single time I talk about myself, I have to say, "Hi, I'm Dindin, I live in Garut, and my dream is to eat my own body weight in bakso." You’d be bored out of your mind after the second time. More importantly, you’d have already memorized those facts. So, instead, I can just ask, "Do you know anyone else with my name who lives in my city?" You instantly know what I’m talking about because you’ve committed that data to your memory.

That’s exactly why variables exist in programming.

They are your program's memory. Instead of you, the human, remembering, it’s the computer that holds onto pieces of data—like a name, a number, or a user's answer—so you don’t have to keep typing it out. It’s the first step to making your code smart, efficient, and capable of having a real conversation with a user.

But before a computer can remember something, it needs to learn it. We need a way to get information into it first. This is where our first friendly tool comes in: the prompt().

Getting the Information: The prompt() Pop-up

Head into your Chrome browser, open the Developer Tools (F12), and click on the "Sources" tab. There, you can open the Snippets panel and create a new file, like index.js. It’s just a blank slate.

Now, type this one line:

prompt("What is your name?");

Run it (Command+Enter on Mac, Control+Enter on Windows, or just click "Run"). You’ll see a familiar pop-up box, but this one is special—it’s not just an alert() that shouts at you. This one has a little text field. It asks for input. Go ahead, type a name into it. Let’s say you type "Dindin".

Hit OK. And then… nothing seems to happen. The box disappears. Where did "Dindin" go?

It’s gone. Lost to the digital ether. We asked for data, the user gave it, and we just let it float away. It’s like someone telling you their name and you immediately forgetting it. Rude, and not very useful.

The Memory Saver: Creating Your First Variable

To remember, we need a container. In JavaScript, we call this container a variable. Let's create one.

We rewrite our code:

var myName="Dindin";

Hit run again. This time, no pop-up appears because we’re not using prompt(). We’re just declaring a variable. We’ve told the computer: "Hey, create a memory box for me. Label it myName. Now, put the string "Dindin" inside it and seal it up."

To prove it worked, go to the "Console" tab right there in your Dev Tools and simply type:

myName

Hit Enter. Like magic, it responds: "Dindin". The computer remembered! It went to its mental shelf, found the box labeled myName, opened it, and told you what’s inside.

Breaking Down the Box: The Syntax

Let's look at that line of code piece by piece, because every part has a job:

var: This is the keyword. It’s you shouting "NEW BOX, OVER HERE!" to the computer. It’s the command to construct a new data container.
myName: This is the label you stick on the box. You get to name it. Make it descriptive! This is how you’ll refer to it later.
=: This isn’t "equals" in the math sense. Think of it as an arrow. It means "take whatever is on the right and PUT IT INTO the box on the left."
"Dindin": This is the value, the actual data you want to store. The quotes tell JavaScript it’s a string of text.
;: The semicolon is the lid. It says "this instruction is finished, box is sealed."

So the whole process is: Keyword -> Name -> Assignment -> Value -> Seal.

The Power of "Variable": It Can Vary!

Here’s the cool part. "Var" is short for "variable," which means changeable. The data inside isn’t set in stone. You can change your mind!

What if I decide I want to be called "Aang" today? I don’t need a new box. I already have the myName box. I just open it and swap the contents.

myName="Aang";

Notice something crucial? I didn’t use var again. I only use var once in a variable's life, when I first create the box. After that, I just use the box's name to access it. This line tells the computer: "Find the myName box, throw away the old 'Dindin', and put 'Aang' in instead."

Now, if you alert(myName), it will show "Aang". See? It varied.

Making It Interactive: Variables + Prompts

Now let’s tie it all together with our original goal: remembering what a user tells us.

We combine prompt() and var:

var yourName=prompt("What is your name?");

When this line runs, a pop-up asks "What is your name?". Let’s say you type "Hilda". The magic of the = sign happens: it takes the answer from the prompt ("Hilda") and immediately stores it into the new box labeled yourName.

Now we have two memory boxes: myName (with "Dindin") and yourName (with "Hilda"). We can use them together to build a message without typing any strings ourselves:

alert("My name is "+myName+", welcome to my course "+yourName+"!");

Run it. The alert shows: "My name is Dindin, welcome to my course Hilda!"

The computer substituted the variable names with the values stored inside them. It’s like giving the computer a recipe: "Take the phrase 'My name is ', then add whatever is in the myName box, then add ', welcome to my course ', then add whatever is in the yourName box, then add a '!'."

Your Practical Takeaway: Think of a Game

Why is this so powerful? Imagine you’re building a simple game. You create a variable:

var gameLevel=1;

When the player starts, gameLevel is 1. When they beat the first level, your code simply does:

gameLevel=2;

Later, to cheer them on, you can show their progress:

alert("Your level is currently: "+gameLevel);

The variable gameLevel is a single, changeable point of truth. Your entire game can check it, update it, and display it without you ever having to hardcode "Level 1", "Level 2", etc., everywhere.

That’s the core idea. Variables stop the repetition. They let your code remember, adapt, and interact. They turn a static script into a dynamic conversation. Play with this. Create a variable for your age, your favorite food, or the current score in a imaginary game. Get comfortable putting data in boxes and pulling it back out.

In the next post, we’ll talk about the rules for naming your boxes—what you can and can’t call your variables to keep the computer from getting confused. Until then, just enjoy the magic of making your computer remember.