Javascript Variables

JavaScript variables are used to store any information, they are loosely typed, that is to say, variables can hold values with any type of data.


Rules for declaring variables

Following are the rules used to declare any variable in javascript:-

  • Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
  • After first letter we can use digits (0 to 9), for example value1.
  • JavaScript variables are case sensitive, for example x and X are different variables.

Declaring a variable

We can declare a variable using var keyword followed by variable name.

Syntax:-
var variableName = variableValue;

Input:-
var message = “Hello”;

A variable name can be any valid identifier. The message variable is declared and hold a special value Hello in it.

We can also define these variables using let and const. Const keyword is used to make any variable constant i.e its value cannot be reassigned.

Syntax:-
const variableName = variableValue;

Input:-
const message = “Hello”;

Let variables is used to initialize a variable with limited scope. Var and let both can be reassigned but has only a difference of scoping.

Syntax:-
let variableName = variableValue;

Input:-
let message = “Hello”;

Types of variables

There are two types of comments available in javascript:-

Undefined vs. undeclared variables

An undefined variable is a variable that has been declared. Because we have not assigned it a value, the variable used the undefined as its initial value.

var message;
console.log(“message”,message); //undefined variable


In contrast, an undeclared variable is the variable that has not been declared.

console.log(“counter”,counter); //undeclared variable

In above examples, message variable is declared but not initialized therefore its value is undefined whereas the counter variable has not been declared hence accessing it causes a ReferenceError.

Global vs. local variables

In JavaScript, all variables exist within a scope that determines the lifetime of the variables and which part of the code can access them.

Local variable is declared inside block or function. It is accessible within the function or block only.

Input:-
<script>
   function getScope(){  
     var x=10;//local variable  
	   document.writeln(x);
   }  
   getScope();
</script>

Output:-

Global variable is accessible from any function. A variable i.e. declared outside the function or declared with window object is known as global variable.

Input:-
<script>
   var x=200;//global variable  
   function getScope(){  
	    document.writeln(x);  
   }  
   getScope();
</script>

Output:-


Variable shadowing

This is a concept in which variables share same name within different scopes.

One variable over shadow the value of other variable. Following example will illustrate it.

Input:-
<script>
   var x = 200;//global variable  
   function getScope(){  
	    var x = 100; //local variable
	   document.writeln(x);  
   }  
   getScope(); 
    document.writeln(x);
</script>

Output:-

In above example, we have two variables that share the same name: x. The first variable is a global variable whereas the second one is the local variable.

Inside the getScope() function, the global variable is shadowed. It cannot be accessible inside the getScope () function but outside of the function. This is called variable shadowing.