Web Development - JavaScript Variables
JavaScript Variables
In this chapter, you will learn how to store data using variables.
Variables hold values that your scripts can use, display, or change later.
What is a Variable?
A variable is a container for storing data values. You can think of variables as labeled boxes that hold information.
You can create a variable with the let keyword, followed by the name of the
variable and a value:
Note: Text values are written inside quotes, while numbers are written without quotes.
Declaring Variables
In JavaScript, you can declare variables with:
let- for variables that can changeconst- for variables that should not changevar- the old way (avoid in modern code)
Example
Using let and const:
let color = "blue";
color = "green"; // allowed
const pi = 3.14;
// pi = 4; // not allowed - const cannot be reassigned
Try it Yourself »
Variable Naming Rules
Variable names must follow these rules:
- Must start with a letter,
_, or$ - Can contain letters, numbers, underscores, or dollar signs
- Cannot start with a number
- Cannot use reserved keywords (like
letorfor)
Example
Valid and invalid names:
// Valid
let firstName = "John";
let _count = 5;
let $price = 10;
// Invalid
// let 2cool = "no";
// let let = 4;
Try it Yourself »
Reassigning Variables
Variables declared with let can be reassigned to a new value.
Constants (const)
Use const for values that should not change during the program.
Note: A constant cannot be changed after it is created.
Multiple Declarations
You can declare multiple variables in one statement, separated by commas.
Example
Declaring multiple variables:
let a = 1, b = 2, c = 3;
console.log(a + b + c);
Try it Yourself »
Data Types
A variable can store different kinds of data. Each type of data is used for a different purpose:
| Type | Example | Description |
|---|---|---|
| String | "Hello" | Text inside quotes |
| Number | 42 | Numbers with or without decimals |
| Boolean | true or false | Yes/No values |
| Object | {name: "Bo", age: 25} | Data stored in key-value pairs |
| Array | ["HTML", "CSS", "JS"] | List of values inside brackets |
| Undefined | let x; | Declared but not given a value |
Note: Text values are written inside quotes. Numbers and Boolean values (true and false) are written without quotes.
Dynamic Typing
JavaScript is dynamically typed - this means a variable can hold different types of data at different times.
Example
A variable can change its type while the program runs:
let x = 5; // number
x = "five"; // now string
Try it Yourself »
Note: In JavaScript, you do not need to tell the browser what type a variable is. The type is decided automatically when you assign a value, and it can change if the value changes later.
Best Practices
- Use
constby default; useletonly when you need to reassign. - Avoid
varin modern code. - Use descriptive names:
userNameis better thanx. - Initialize variables when you declare them.
Next, you will learn about JavaScript Operators and Expressions - how to perform calculations, compare values, and combine data.
Next » JavaScript Operators and Expressions
