Variables and State: Storing Information So a Program Can Think

Learn what a variable is, how it represents state inside a program, and how to use names and value changes clearly so you do not get lost at the beginning.

How much do you know about Programming Fundamentals?

📘 Theory

What a Variable Really Is

A variable is not magic. It is a way of naming a piece of data so you can use it later.

If a program needs to remember a name, a score, a total, or the number of login attempts, it needs some logical place to store that information. That is the job of a variable.

A useful beginner model is to think of a variable as a label attached to the current value the program cares about.

The variable has a name.
The value is its current content.
That content can stay the same or change.
The name should help explain what it represents.

State Is What the Program Knows at a Specific Moment

Talking about state means talking about the current data the program is working with.

If a task app knows how many tasks exist, that number is part of its state. If a counter shows 3 clicks, that 3 is also state.

This helps you stop seeing variables as isolated pieces and start seeing them as the minimum memory a program needs in order to keep working.

Declare, Read, and Update a Variable

At this stage you do not need many rules. You need to see clearly when a variable appears, what it stores, and how it changes.

The important part here is not only the syntax of `let`, but the idea that the program begins with one value and then continues with another.

That change is your first real contact with mutable program state.

A Good Variable Name Is Already a Technical Decision

A bad name forces you to guess. A good name saves you reading and debugging time.

`cartTotal` is better than `x`.
`activeUser` is better than `data1`.
`loginAttempts` is better than `counter` when context matters.
Avoid vague names that could mean almost anything.

1 What a Variable Really Is 2 State Is What the Program Knows at a Specific Moment 3 Declare, Read, and Update a Variable 4 A Good Variable Name Is Already a Technical Decision

🧭 Key visuals

A variable as a box of state

It helps explain that a variable stores a current piece of program state and that this state may later be updated.

A teaching diagram that represents a variable as a labeled box whose value can change over time inside a program.

🧪 Learn by doing

Example Guided Example: A Tiny Counter Watch how one variable represents the current state of a very simple counter.

⌄

🏁 Challenges

Challenge Challenge: Model the State of a Scoreboard Create a variable that represents a player's score and update it once.

⌄

🧰 Resources

Useful links

MDN: Binding MDN: What is JavaScript? Chrome DevTools Overview Fira Code

Test

Check your knowledge with a test about Programming Fundamentals.

Test for Programming Fundamentals

Course resources 15

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards

‹

Lesson 03

Sequence, Errors, and Tracing: Reading What the Program Actually Executes

Lesson 05

Basic Data Types: Choosing the Right Kind of Value

›