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.

Practice

1. Why do we use variables in JavaScript?
let age = 25;

easy

A. To store information that can be used and changed later

B. To make the program run faster

C. To create permanent unchangeable values

D. To write comments in the code

Solution

1. Step 1: Understand what variables do

   Variables hold data that can be used and updated in the program.

2. Step 2: Analyze the example

   The code let age = 25; stores the number 25 in the variable named age, which can be changed later.

3. Final Answer:

   To store information that can be used and changed later -> Option A

4. Quick Check:

   Variables store and change data [OK]

Hint: Variables hold data you want to reuse or change [OK]

Common Mistakes:

• Thinking variables make code run faster
• Confusing variables with comments
• Believing variables cannot change

2. Which of the following is the correct way to declare a variable in JavaScript?

easy

A. let name = 'John';

B. variable name = 'John';

C. const = age 30;

D. var 2name = 'John';

Solution

1. Step 1: Check JavaScript variable syntax

   Variables can be declared using let, var, or const followed by a valid name.

2. Step 2: Identify valid variable names and syntax

   let name = 'John'; is correct because it uses let, a valid name, and proper assignment.

3. Final Answer:

   let name = 'John'; -> Option A

4. Quick Check:

   Correct variable declaration [OK]

Hint: Variable names can't start with numbers; use let/const/var [OK]

Common Mistakes:

• Starting variable names with numbers
• Using invalid keywords like 'variable'
• Incorrect assignment syntax

3. What will be the output of this code?

let score = 10;
score = score + 5;
console.log(score);

medium

A. 5

B. 15

C. 10

D. undefined

Solution

1. Step 1: Understand variable update

   The variable score starts at 10, then 5 is added to it.

2. Step 2: Calculate the new value

   10 + 5 equals 15, so score becomes 15.

3. Final Answer:

   15 -> Option B

4. Quick Check:

   10 + 5 = 15 [OK]

Hint: Add numbers step-by-step to find variable's new value [OK]

Common Mistakes:

• Forgetting variable was updated
• Confusing initial value with final
• Expecting undefined because of reassignment

4. Find the error in this code:

let total = 20
let total = 30;
console.log(total);

medium

A. Variable name 'total' is invalid

B. Missing semicolon after first line

C. You cannot declare the same variable twice with let

D. console.log is used incorrectly

Solution

1. Step 1: Check variable declarations

   The code declares total twice using let, which is not allowed in the same scope.

2. Step 2: Understand let rules

   let variables cannot be redeclared; you can only assign a new value without let.

3. Final Answer:

   You cannot declare the same variable twice with let -> Option C

4. Quick Check:

   Redeclaring let variable causes error [OK]

Hint: Use let once per variable; assign new values without let [OK]

Common Mistakes:

• Thinking semicolon is mandatory for error
• Believing variable names are invalid
• Assuming console.log causes error

5. You want to store a user's name and age, then update the age after a birthday. Which code correctly uses variables for this?

??

hard

A. let name = 'Alice';
const age = 30;
age = age + 1;
console.log(name, age);

B. let name = 'Alice';
let age = 30;
const age = age + 1;
console.log(name, age);

C. const name = 'Alice';
const age = 30;
age = age + 1;
console.log(name, age);

D. const name = 'Alice';
let age = 30;
age = age + 1;
console.log(name, age);

Solution

1. Step 1: Identify which variables can change

   The user's name does not change, so const is good. Age changes, so let is needed.

2. Step 2: Check code correctness

   const name = 'Alice'; let age = 30; age = age + 1; console.log(name, age); declares name as const and age as let, then updates age correctly.

3. Final Answer:

   const name = 'Alice'; let age = 30; age = age + 1; console.log(name, age); -> Option D

4. Quick Check:

   Use const for fixed, let for changeable variables [OK]

Hint: Use const for fixed, let for values that change [OK]

Common Mistakes:

• Trying to change const variables
• Redeclaring variables with const or let
• Mixing let and const incorrectly