JavaScript Variables

JavaScript Variables with Examples:

In this article, I am going to discuss JavaScript Variables in detail with multiple examples. Please read our previous article, where we discussed JavaScript Comments and Statements in detail. As part of this article, we are going to discuss the following pointers.

JavaScript Variables

JavaScript Variable:

JavaScript variables are boxes for storing values. We must declare a variable in the JavaScript program before using it. A variable can be number, a single character, string or value indicating whether something true or false.

Variable allows us to store, retrieve and change the stored information. Variable is declared with the var keyword.

Example:

<script language="javascript" type="text/javascript">
{
        var name;
        var address;
}
</script>

We can also declare multiple variables using the var keyword separated by comma (,):

<script language="javascript" type="text/javascript">
{
        var name, address;
}
</script>
JavaScript Identifier:

All JavaScript variables are identified with unique names. These unique names are called identifiers.

Variable rules:

There are some rules for declaring JavaScript variables (known as Identifier):

  • JavaScript variables are case sensitive, for example, y and Y are different variables.
  • Variables names must begin with a letter (a-z or A-Z) or the underscore ( _ ) character.
  • After the first letter, we can use digits (0 to 9), for example, name1.
Variable Characteristics:

A variable has the following characteristics

  • Name
  • Type (the type of stored data)
  • Value

E.g.: var counter=1;

In the above example, the Name of a variable is counter, a type is a number and the value is 5.

Declaring (Creating) JavaScript Variables:

We must declare a variable, before using it. Creating variables in JavaScript is referred to as “declaring” variables. We can declare a variable using the var keyword.

Example:

var name;

In the above declaration, the variable is empty that is it doesn’t have any value assign yet. It means the value of a variable is undefined.

Assigning values to JavaScript Variables:

The = equal sign or assignment operator is used to assign a value to variables. Assigning a value or storing a value to a variable is called “variable initialization”. We can assign a value to the variable at the time of declaring the variable or after declaring the variable.

Example:
var name = “Shagufta”;
Or
var name;
name = “Shagufta”;

Re-declaring JavaScript Variables:

Re-declaring variables mean declaring the same variable again. If we re-declare the variable, it will not lose its actual value.

Example:
var name = “Shagufta”;
var name;

After running/execution of the program, the variable name will still have the value “shagufta”. The value of the name is not reset or cleared when we re-declare it.

JavaScript Variable Scope:

The scope of a variable is nothing but the area or the region of the program in which it is defined.

There are types of scopes:

  • Local Variables
  • Global Variables
Local Variables:

A Local variable is declared with the var keyword. A local variable is declared inside the block or the function. It can be accessible within the function or block only.

Example:

<script language="javascript" type="text/javascript">
    function calculate() {
        var x = 10;//local variable
    }
</script>

Here, x is local in the current function.

Or

<script language="javascript" type="text/javascript">
    If(5 < 15)
    {
        var y = 10;//JavaScript local variable
    }
</script>

Here, y is local in the current block. When a function starts a local variable is created and it gets deleted as soon as the function ends or completed.

Global Variables:

A global variable is declared outside the function or with the window object. It can be accessed anywhere in the program.

Example:

<script language="javascript" type="text/javascript">
    var value = 50;//global variable
    function a() {
        alert(value);
    }
    function b() {
        alert(value);
    }
    a();//calling JavaScript function
    b();
</script>
Declaring a global variable within a function:

We can declare JavaScript global variable inside of the function by using a window object directly i.e.: window.someVar=”value”;

Example:

<script language="javascript" type="text/javascript">
    function x() {
        window.value = 10;//declaring global variable by window object
    }
    function y() {
        alert(window.value);//accessing global variable from other function
    }
    x();//calling javascript function
    y();
</script>
Automatically global:

When we assign a value to a variable without declaring it, it automatically becomes a global variable. i.e. without using the var keyword.

Example:

<script language="javascript" type="text/javascript">
   function demo() {
        day = "Monday";//global variable
    }

    demo();
    // code here can use day as a global variable
    document.getElementById("demo").innerHTML = "Today is " + day;
</script>

In the next article, I am going to discuss JavaScript Data Types in detail. Here, in this article, I try to explain JavaScript Variables in detail. I hope you enjoy this article.

Leave a Reply

Your email address will not be published. Required fields are marked *