Variable life cycle in JavaScript | JavaScript Variables Lifecycle

JavaScript Variables Lifecycle

When the JavaScript engine works with variables, their life-cycle consists of these 3-steps:

1. Declaration phase - create a new variable, E.g. var myValue;

2. Assignment phase - Assigning a value to the Variable in JavaScript, E.g. myValue = 150;

3. Usage phase - Access and use the variable value, E.g. alert(myValue);

1.) Variable Declaration :

• In any programming language creating a variable is called “declaring” a variable.

• Declaring a variable means the computer reserves memory in which it will store the variable data. The program can then read/write data in this memory area by manipulating the variable.

Let's see an examples of variable declarations:

 ➤ Syntax : Single variable

    Declare Single variable in a line

<script>
     var <var_name>;
</script>

Parameter :

• var: JavaScript reserved keyword.

• var_name: Name of variable.

 ➤ Example : Declare Single variable in a line

<script>
     var carName;
</script>

You can also declare many variables in one statement(a Single Line).

 ➤ Syntax : Declare multiple variables in a single-line

    Start the statement with var and separate the variables by comma.

<script>
     var <var_name1>,<var_name2>,<var_name3>;
</script>

 ➤ Example :

<script>
     var carName,carNumber,carColor;
</script>

Declare multiple variables in a multiple-line.

 ➤ Syntax : Multiple variable in multiple-line;

    Start the statement with var and separate the variables by comma.

<script>
     var <var_name1>,
        <var_name2>,
        <var_name3>;
</script>

 ➤ Example :

<script>
     var carName,
        carNumber,
        carColor;
</script>

Important point's of variable declaration :

• In JavaScript, traditional way to declare a variable with the var keyword. We need to declare variables before we use them, otherwise we receive an ReferenceError.

 ➤ Syntax : Use variable without declare;

<script>
    //Uncaught ReferenceError: myVariable is not defined
     document.write(myVariable);
</script>

• When a variable has been declared it exists in memory but it is has no value. In JavaScript this is represented as undefined.

 ➤ Syntax : Use variable before assiging value;

<script>
     var myVariable;
     document.write(myVariable); //undefined
</script>

---

2.) Variable Assignment :

• Storing a value in a variable is called variable Assignment/initialization.

• While a program is running, the value stored in a variable if you want can change variable value. To give new value to a variable, use the assignment operator "=".

Let's see an examples of variable Initialization :

 ➤ Syntax :

    To assign a value to the variable, using the assignment operator "=".

<script>
     var <var_name>;
     <var_name> = <value>;
</script>

Note : A value can be assigned to a variable by using the equals(=) sign, which is called assignment operator(=).

Parameter :

• var: JavaScript reserved keyword.

• var_name: Name of variable.

• value: Optional, Initial value assign at the time of declaration or not.

 ➤ Example :

    Now, we can put some data into variable by using the assignment(=) operator;

<script>
     var carName;
     carName =  "Audi" // Store the string;
</script>

You can assign a value to the variable either while you declaring the variable or after declaring the variable(when you need that variable).

Initialization of Javascript Variable in a single line.

• The declaration and assignment can be combined into a single-statement, When a variable is assigned a value it then becomes defined.

 ➤ Syntax : Single variable in a line;

<script>
     var <var_name>= <value>;
</script>

 ➤ Example :

<script>
     var carName="Audi"; // Store the string
</script>

Initialize multiple variables in a Single Line.

• There is a shorthand way of creating multiple variables in the same statement by using the comma-operator(,).

 ➤ Syntax : Multiple variable in a line;

    Start the statement with var and separate the variables by comma.

<script>
     var <var_name1>= <value>, <var_name2>=<value>, <var_name3>=<value>;
</script>

 ➤ Example :

<script>
     var carName="Audi",carNumber=1234,carColor="Black";
</script>

Initialize multiple variables in multiple-line.

 ➤ Syntax : Multiple variable in multiple line;

    Start the statement with var and separate the variables by comma.

<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 :

• Access the value of variable is called Usage of variable;

• The process usually goes this way : 1'st a variable should be declared, then initialized with a value and finally used.

Let's see an examples of variable Usage:

 ➤ Syntax :

<script>
     var <var_name>= <value>,
        document.write(<var_name>);  //shows the variable content
</script>

 ➤ Example :

<script>
     var carName="Audi",
        document.write(carName);
</script>

Output :

Audi