JS Variables | Scope

Variables in Javascript

A variable or var is a 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 are loosely typed. Means a variable x (var x) can store any type of data, like string, number, function, boolean, undefined, null, array or object.

 

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.

Example

<script>

    var x="Beta-Labs";      // value of x is "Beta-Labs";

    var y='Beta-Labs';      // value of y is "Beta-Labs";

 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>

Change value of variable

To change the value of a variable, assign a new value to the same variable.

var x="hello";

console.log(x);        //  "hello" 

x="hola";

console.log(x);        // "hola"     

Note: var keyword is used to declare a variable. To change the value of variable, there is no need to use var keyword again, only the variable name is enough.

Variable naming convention in JavaScript

To declare a variable in javascript, there are some rules. Here are some rules used to declare variables names in javascript.

• variables names cannot include javascript reserved keywords, like var, for, in, while, true, false, null, class, let, const, function etc.
• variables cannot start 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 sloppy mode, we can also create variables without var keyword.

<script>                                

    "use strict";   

    var x1="beta labs";          // 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 allows us to create a variable with or without var keyword.

<script>            

    var x1="Beta Labs";          // allowed 

    x2="javascript";             // also allowed 

</script> 

Variable Hoisting

JavaScript Hoisting is the process to move all variables and functions to the top of the code block or scope, even before execution. Variable Declaration is hoisted, but the variable assignment is not hoisted. This means, a variable x declared at any point can have an undefined value before the assignment, but after assignment, the 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.

Scope in JavaScript

Scope in JavaScript refers to the accessibility or visibility of variables. That is, which parts of a program have access to the variable or where the variable is visible.

There are three types of scope in JavaScript:

1. Global Scope:
2. Function Scope
3. Block Scope

Global Scope: Any variable that’s not inside any function or block (a pair of curly braces), is inside the global scope. The variables in the global scope can be accessed from anywhere in the program.

Local Scope or Function Scope: Variables declared inside a function is inside the local scope. They can only be accessed from within that function, that means they can’t be accessed from the outside code.

Block Scope: ES6 introduced let and const variables, unlike var variables, they can be scoped to the nearest pair of curly braces. That means, they can’t be accessed from outside that pair of curly braces. 

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 variables. Global variables have a 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.

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.

Example: JavaScript Local Variables

function myFunction() {

  var x = 'local variable';

  var y = 'local variable';

  console.log(x); // returns "local variable"

  console.log(y); // returns "local variable"

}

myFunction(); // call the function

console.log(x); // x is not defined

console.log(y); // y is not defined

 

Example: JavaScript global Variables

function myFunction(){

        

    var x="local variable";

    y="global variable";    

         

    console.log(x);    // returns "local variable"

    console.log(y);    // returns "global variable"

}

    myFunction()        // call the function

     

    console.log(x);    // x is not defined

    console.log(y);    // y is defined

Note: In the Example above, JavaScript allows variable declaration without var keyword. You must assign a value when you declare a variable without var keyword. Scope of the variables declared without var keyword become global irrespective of where it is declared. Global variables can be accessed from anywhere in the web page.

Declaring JavaScript global variable within function

To declare JavaScript global variables inside function, you need to use window object. For example:

    window.value = 90;

Now it can be declared inside any function and can be accessed from any function. For example:

function m() {

  window.value = 100; //declaring global variable by window object

}

function n() {

  alert(window.value); //accessing global variable from other function

}

 

let and Const block scope

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

JavaScript let

JavaScript Let is used to declare variable in block scope only. 

{

  let x = 'user'; // to store values in block scope

}

var i = 2; // global scope

if (i == 2) {

  let i = 3; // block scope

  console.log(i); // 3

}

console.log(i); // 2

JavaScript const

JavaScript const is used to declare fixed values that are not changeable.

const pi=Math.PI;    // pi is a constant, and can't be changed

const user="avi";

user="xyz";  //Assignment to constant variable.

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.

 

Difference between var, let, and const

JavaScript has three different keywords to declare a variable, which adds an extra layer of intricacy to the language. The differences between the three are based on scope, hoisting, and reassignment.

You may be wondering which of the three you should use in your own programs. A commonly accepted practice is to use const as much as possible, and let in the case of loops and reassignment. Generally, var can be avoided outside of working on legacy code.