Why variables are needed in Javascript - Visual Breakdown

Concept Flow - Why variables are needed

Start Program

↓

Need to store data?

Yes↓

Create Variable

↓

Assign Value

↓

Use Variable in Code

↓

Change Value if needed

↓

Program continues or ends

Variables let us store and reuse data by giving it a name, so we can easily work with values in our program.

Execution Sample

Javascript

let age = 25;
console.log(age);
age = 26;
console.log(age);

This code stores a number in a variable, prints it, changes it, then prints the new value.

Execution Table

Step	Action	Variable 'age' Value	Output
1	Declare variable 'age' and assign 25	25
2	Print 'age'	25	25
3	Change 'age' to 26	26
4	Print 'age' again	26	26
5	Program ends	26

💡 Program ends after printing updated variable value.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
age	undefined	25	26	26

Key Moments - 2 Insights

Why do we assign a value to a variable instead of just using the value directly?

Assigning a value to a variable lets us reuse and change that value easily, as shown in steps 1 and 3 of the execution_table.

What happens if we try to use a variable before assigning it a value?

Before assignment, the variable is 'undefined' as shown in variable_tracker start value, so using it may cause errors or unexpected results.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'age' after step 3?

A 26

B undefined

C 25

D Error

💡 Hint

Check the 'Variable age Value' column at step 3 in the execution_table.

At which step is the first output printed?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'Output' column in the execution_table to find when output first appears.

If we did not use a variable and just printed 25 twice, what would we lose?

A Program would run faster

B Ability to change the value easily

C We would save memory

D Nothing changes

💡 Hint

Refer to the change of 'age' value between steps 1 and 3 in variable_tracker.

Concept Snapshot

Variables store data with a name.
Use 'let' to create a variable in JavaScript.
Assign values to variables to reuse or change them.
Variables help keep code clear and flexible.
Without variables, changing values is hard.

Full Transcript

Variables are like labeled boxes where we keep data. In JavaScript, we use 'let' to create a variable and give it a value. This lets us print or use the value multiple times. Later, we can change the value inside the variable without rewriting the whole code. For example, we set 'age' to 25, print it, then change it to 26 and print again. This shows how variables help us store and update information easily during a program's run.