Variable life cycle in JavaScript | JavaScript Variables Lifecycle
JavaScript Variables Lifecycle
When the JavaScript engine works with variables, their lifecycle consists of three main phases. Understanding these phases is essential for mastering JavaScript programming.
The Three Phases of Variable Lifecycle
1. Declaration
Create a new variable
var myValue;
2. Assignment
Assign a value to the variable
myValue = 150;
3. Usage
Access and use the variable
alert(myValue);
1. Variable Declaration
Creating a variable is called "declaring" a variable. When you declare a variable, the computer reserves memory where it will store the variable data. The program can then read/write data in this memory area by manipulating the variable.
Single Variable Declaration
Declare a single variable in one line:
<script>
var <var_name>;
</script>Example:
<script>
var carName;
</script>Multiple Variables in Single Line
Declare multiple variables in one statement by separating them with commas:
<script>
var <var_name1>, <var_name2>, <var_name3>;
</script>Example:
<script>
var carName, carNumber, carColor;
</script>Multiple Variables in Multiple Lines
For better readability, spread declarations across multiple lines:
<script>
var <var_name1>,
<var_name2>,
<var_name3>;
</script>Example:
<script>
var carName,
carNumber,
carColor;
</script>Important Points About Declaration
❌ Declare Before Using
You must declare variables before you use them, otherwise you'll receive a ReferenceError:
<script>
//Uncaught ReferenceError: myVariable is not defined
document.write(myVariable);
</script>⚠️ Undefined by Default
When a variable is declared, it exists in memory but has no value. In JavaScript, this is represented as undefined:
<script>
var myVariable;
document.write(myVariable); //undefined
</script>2. Variable Assignment
Storing a value in a variable is called variable assignment or initialization. While a program is running, the value stored in a variable can change. To assign a new value to a variable, use the assignment operator =.
Note: The assignment operator (=) is used to assign values to variables.
Assigning Value After Declaration
You can assign a value after the variable is declared:
<script>
var carName;
carName = "Audi"; // Store the string
</script>Declaration and Assignment in One Line
The declaration and assignment can be combined into a single statement. When a variable is assigned a value, it becomes defined:
<script>
var <var_name> = <value>;
</script>Example:
<script>
var carName = "Audi"; // Store the string
</script>Initializing Multiple Variables in Single Line
Initialize multiple variables in the same statement using commas:
<script>
var <var_name1> = <value>, <var_name2> = <value>, <var_name3> = <value>;
</script>Example:
<script>
var carName = "Audi", carNumber = 1234, carColor = "Black";
</script>Initializing Multiple Variables in Multiple Lines
For better readability, spread the initialization across multiple lines:
<script>
var <var_name1> = <value>,
<var_name2> = <value>,
<var_name3> = <value>;
</script>Example:
<script>
var carName = "Audi",
carNumber = 1234,
carColor = "Black";
</script>3. Variable Usage
Accessing the value of a variable is called variable usage. The process usually goes this way: first, a variable should be declared, then initialized with a value, and finally used.
Using Variables
<script>
var carName = "Audi";
document.write(carName); // Shows the variable content
</script>Output:
Audi
Complete Example: All Three Phases
<script>
// Phase 1: Declaration
var firstName, lastName, age;
// Phase 2: Assignment
firstName = "John";
lastName = "Doe";
age = 30;
// Phase 3: Usage
console.log("Name: " + firstName + " " + lastName);
console.log("Age: " + age);
</script>Output:
Name: John Doe Age: 30
Best Practices
✅ Do's
- • Declare variables before using them
- • Initialize variables when declaring them
- • Use meaningful variable names
- • Declare variables at the top of their scope
- • Use let and const instead of var
❌ Don'ts
- • Don't use variables before declaration
- • Don't use var in modern JavaScript
- • Avoid implicit global variables
- • Don't redeclare variables unnecessarily
- • Avoid using undefined variables
Key Takeaways
Declaration
Reserves memory space. Variable is undefined until assigned a value.
Assignment
Stores a value in the variable. Can be done at declaration or later.
Usage
Accesses the stored value. Can change value during program execution.
Summary
Understanding the three phases of variable lifecycle is fundamental to JavaScript programming:
- Declaration: Create the variable and reserve memory
- Assignment: Store a value in the variable
- Usage: Access and use the variable's value
Master these phases to write effective and bug-free JavaScript code. Always declare variables before using them and initialize them with appropriate values.