Variables in Javascript

A variable or var is storage area used to store a value in memory. To create a variable in javascript, var keyword is used. var is a reserved keyword in javascript, used to create variables. We can also create a variable without using var in javascript, but it is not recommended.

JavaScript Variables

Variables are always initialized first with var keyword.
For exp var x means a variable named x is initialized.
To assign a value in variable, = or assignment operator is used, followed by value.

Javascript variables naming rules


<script>

 i=3;                   // variable declaration, Not Recommended
 var x="Tech Altum";    // value of x is "Tech Altum"; 
 var y='Tech Altum';    // value of y is also "Tech Altum"; 
 var z=9;               // value of z is 9 numeric.
 var a=2, b=3, c=5;     // multiple variables in single line
 var u;                 // u is undefined

 </script>


Variable naming convention in JavaScript

To declare a variable in javascript, use following rules.

  • variables names cannot include javascript reserved keywords, like var, for, in, while, true, false, null, class, let, const, function etc.
  • variables cannot starts with numbers and hyphen, use alphabets or underscore(_).
  • variables can have strings followed by numbers, like x1 and x2 are allowed but 1x, 2x is not allowed.
  • For separation in variable names, use underscore (_) or camel casing, do not use hyphen (-) separation and white space, i.e, user_name is valid, username is also valid, but user-name is invalid.
  • variables names are case sensitive, i.e, x1 and X1 are different.


Strict Mode

ECMAScript 5 includes strict mode in javascript. "use strict" string is used to follow strict mode. In strict mode, var is compulsory, but in sloopy mode, we can also create variables without var keyword.


<script>			
 "use strict";
 var x1="tech altum";       	 // allowed in strict mode
 x2="javascript";        	 // not allowed in strict mode
 
 for( var i=1;i<=10;i++){}    // allowed, 
 for( i=1;i<=10;i++){}        // not allowed, i is not declared
 
 var x=10;                   // allowed
 var y=010;                // not allowed, it is octal notation
</script> 
			
			

Sloppy Mode

By default javascript is written in sloppy mode. Sloppy mode allow us to create a variable with or without var keyword.


<script>			
 var x1="tech altum";       	 // allowed 
 x2="javascript";        	 // also allowed 
</script> 
			


Variable Hoisting

JavaScript Hoisting is the process to move all variables and functions to the top of code block or scope, even before execution. Variable Declaration is hoisted, but variable assignment is not hoisted. This means, a variable x declared at any point can have undefined value before assignment, but after assignment, variable value can be string or number defined.

<script> 
    console.log(x);       // return undefined
    var x="hello js";       
    console.log(x);        // return "hello js" 
</script>    

It is recommended to declare variables and assign values at the top to avoid variable hoisting issue.


Local Vs Global Variables

A variable in javascript can be local or global variable based on its scope. Variables declared outside function are global variables and variable declared inside function are local variables.

Global Variables

Variables declared outside function are global variable. Global variables have global scope. This means, a variable in <script> tag is by default global. Global Variable once declared can be used anywhere, even inside a function.

JavaScript Global Variables


    var x="hello js";        // global variable
    var y=88;                // another global variable
    
    console.log(x);          // returns "hello string"
    console.log(y);          // returns 88
    
    function myFunction(){
        console.log(x)           // returns "hello string"
        console.log(y);          // returns 88
    }
    

Local Variables

Variables declared inside functions are local variables. Local Variables have local scope. This means they are accessible only within their function block, not outside.

JavaScript Local Variables


    function myFunction(){
        
        var x="local variable";
            y="global variable";    
             
        console.log(x);    // returns "local variable"
        console.log(y);    // returns "global variable"
    }
       
        console.log(x);    // x is not defined
        console.log(y);    // return "global variable"


let and Const

let and const were introduced in ECMA 6. let is used to declare temporary values with limited scope, like inside a function. Whereas const is used to declare permanent values, which can't be change. Like value of pi, e, G and other constants.

let and const in javascript



<script>			
let x="user";        // to store temporary values in scope
const pi=Math.PI;    // pi is a constant, and can't be changed
</script> 
			
			

Although it is not compulsory to start variables with var keyword, but still we prefer var. let and const are supported in IE 11 and above, edge, firefox 36 and above, chrome 21 and above, safari 5.1 and above.