JavaScript Variables: let vs const vs var
JavaScript Simplified: A Beginner's Guide to Mastering Interactive Web Development Post 4 of 30: Understanding Variables in JavaScript In this post, we’ll explore what variables are, how to declare them, and how they work in JavaScript. What is a Variable? A variable is a way to store a value in JavaScript so we can use it later. Think of a variable like a labeled box where you can keep things and retrieve them when needed. For example, instead of writing "John" multiple times in your code, you can store it in a variable and use it anywhere. Declaring Variables in JavaScript JavaScript provides three ways to declare variables: var (older method, not recommended) let (modern and recommended for changeable values) const (for values that should not change) 1. Using let (Recommended) let name = "John"; console.log(name); Output: John Here, we: Created a variable called name Assigned it the value "John" Used console.log() to print the value of name 2. Using const (For Constant Values) const PI = 3.1416; console.log(PI); Output: 3.1416 const is used for values that should not change. Once assigned, you cannot reassign a new value to PI. 3. Using var (Older Method – Avoid Using) var age = 25; console.log(age); Output: 25 var was commonly used before let and const, but it has scoping issues, so use let or const instead. Changing Variable Values With let, you can change a variable’s value, but with const, you cannot. Example with let: let city = "New York"; console.log(city); // Output: New York city = "Los Angeles"; // Changing the value console.log(city); // Output: Los Angeles Example with const (This will cause an error) const country = "USA"; console.log(country); country = "Canada"; // ❌ This will cause an error console.log(country); Error: Uncaught TypeError: Assignment to constant variable. Variable Naming Rules When naming variables, follow these rules: ✔️ Can contain letters, numbers, $, and _ ✔️ Must start with a letter, $, or _ (not a number) ✔️ Case-sensitive (name and Name are different) ✔️ Cannot be a reserved keyword (like let, console, function, etc.) Examples of Valid Variable Names: let firstName = "Alice"; let _score = 90; let $price = 20; let userAge = 25; Examples of Invalid Variable Names: let 1name = "Bob"; // ❌ Cannot start with a number let let = 50; // ❌ "let" is a reserved keyword let user-age = 30; // ❌ Hyphens are not allowed Practical Exercise: Storing and Changing Values Try this in your script.js file: let favoriteFood = "Pizza"; console.log("My favorite food is:", favoriteFood); favoriteFood = "Burger"; console.log("Now, my favorite food is:", favoriteFood); Expected Output: My favorite food is: Pizza Now, my favorite food is: Burger Next Steps Now that we understand how variables work, the next step is to explore data types in JavaScript—including numbers, strings, booleans, and more! Stay tuned for the next post!
JavaScript Simplified: A Beginner's Guide to Mastering Interactive Web Development
Post 4 of 30: Understanding Variables in JavaScript
In this post, we’ll explore what variables are, how to declare them, and how they work in JavaScript.
What is a Variable?
A variable is a way to store a value in JavaScript so we can use it later. Think of a variable like a labeled box where you can keep things and retrieve them when needed.
For example, instead of writing "John"
multiple times in your code, you can store it in a variable and use it anywhere.
Declaring Variables in JavaScript
JavaScript provides three ways to declare variables:
-
var
(older method, not recommended) -
let
(modern and recommended for changeable values) -
const
(for values that should not change)
1. Using let
(Recommended)
let name = "John";
console.log(name);
Output:
John
Here, we:
- Created a variable called
name
- Assigned it the value
"John"
- Used
console.log()
to print the value ofname
2. Using const
(For Constant Values)
const PI = 3.1416;
console.log(PI);
Output:
3.1416
-
const
is used for values that should not change. - Once assigned, you cannot reassign a new value to
PI
.
3. Using var
(Older Method – Avoid Using)
var age = 25;
console.log(age);
Output:
25
-
var
was commonly used beforelet
andconst
, but it has scoping issues, so uselet
orconst
instead.
Changing Variable Values
With let
, you can change a variable’s value, but with const
, you cannot.
Example with let
:
let city = "New York";
console.log(city); // Output: New York
city = "Los Angeles"; // Changing the value
console.log(city); // Output: Los Angeles
Example with const
(This will cause an error)
const country = "USA";
console.log(country);
country = "Canada"; // ❌ This will cause an error
console.log(country);
Error: Uncaught TypeError: Assignment to constant variable.
Variable Naming Rules
When naming variables, follow these rules:
✔️ Can contain letters, numbers, $
, and _
✔️ Must start with a letter, $
, or _
(not a number)
✔️ Case-sensitive (name
and Name
are different)
✔️ Cannot be a reserved keyword (like let
, console
, function
, etc.)
Examples of Valid Variable Names:
let firstName = "Alice";
let _score = 90;
let $price = 20;
let userAge = 25;
Examples of Invalid Variable Names:
let 1name = "Bob"; // ❌ Cannot start with a number
let let = 50; // ❌ "let" is a reserved keyword
let user-age = 30; // ❌ Hyphens are not allowed
Practical Exercise: Storing and Changing Values
Try this in your script.js
file:
let favoriteFood = "Pizza";
console.log("My favorite food is:", favoriteFood);
favoriteFood = "Burger";
console.log("Now, my favorite food is:", favoriteFood);
Expected Output:
My favorite food is: Pizza
Now, my favorite food is: Burger
Next Steps
Now that we understand how variables work, the next step is to explore data types in JavaScript—including numbers, strings, booleans, and more!
Stay tuned for the next post!