JavaScript - The 'var' keyword behaviour

Introduction

Namaste, In this article I will discuss the below topics

1. What is the 'var' keyword?

2. Using the 'var' keyword in the global scope

3. Re-declaration of variable

4. Using the 'var' keyword in the function scope

5. Does not have a block scope

6. Limitations of the 'var' keyword

7. Complete source code

What is the 'var' keyword?

It is a legacy way (old/historic) of declaring variables and objects in Javascript. It is not recommended to use the 'var' keyword with modern Javascript. There are many limitations that the 'var' keyword has, such as hoisting, scoping and re-declaration. It is recommended to use the 'let' or 'const' keyword instead.

// syntax
var myval=100;

// Global var can be accessed in function
var j=100;
function fx2() {
  console.log("j:", j); // j: 100
}
fx2();

Understanding the 'var' keyword is required when maintaining legacy code.

Using the 'var' keyword in the global scope

When a variable is declared using the 'var' keyword it is hoisted i.e. it can be accessed before initialization. The state of the variable will be undefined. The initialization is done when the variable is initialized.

// Variable declaration hoisting - global
console.log("myval", myval,myval2); // undefined undefined
console.log("var keyword demo");
var myval=0;
var myval2=4;

Re-Declaration of variable

A variable can be re-declared without an error. This makes the code confusing. It is a weakness.

// Re-declaration - no error 
var i=10;
var i=12;
console.log("i:", i); // 12

Using the 'var' keyword in the function scope

The variables are hoisted in the function scope as well i.e. they can be accessed before initialization.

// Variable declaration hoisting - function scope
function fx() {
    console.log("in fx", fxval,fxval2); // undefined undefined
    var fxval; 
    var fxval2=123;
    console.log("in fx", fxval,fxval2); // undefined 123
}

fx();

Does not have a block scope

The 'var' keyword does not have block scope i.e. the variable/object declared in a block can be accessed in the outer context as well. There are 2 contexts for this behaviour

1. Global scope - The variable can be accessed in all code blocks including functions

2. Function scope - The variable can be accessed in all code blocks of the function but not outside the function.

This is quite a confusing behaviour for many programmers to decipher hence let, const are preferred.

// global scope - does not have block scope
for (var a=10;a<11;a++) {
    var b=12;

}

console.log("a,b:",a,b); // 11, 12

if ( i > 9){
    var c = 13;
}
console.log("c:", c);

// function scope -- no block scope inside function
function fx3() {
    try {
        var d=20;
    }catch(e) {
        console.log(e,d);
    }
    console.log("d",d); // 20
}

fx3();
//console.log("d:", d); // error

Limitations of the 'var' keyword

For all practical purposes in modern Javascript, the 'var' keyword should be avoided instead 'let' and 'const' should be used. The limitations of the 'var' keyword as listed below

1. The variable can be re-declared

2. Does not have a block scope

3. The Variable is hoisted and hence can be accessed before initialization

Understanding the 'var' keyword is required when maintaining legacy code.

Complete Source code

// Objective: understanding var keyword behaviour
// Author: Mahavir DS Rathore

// It is the legacy way to declare variables.
// It is not recommended to be used in contemprary apps 
// Not to use with modern JS 
// Issues - scoping behaviour & hoisting behaviour


// Global var can be accessed in function
var j=100;
function fx2() {
  console.log("j:", j); // j: 100
}
fx2();

// Variable declaration hoisting - global
console.log("myval", myval,myval2); // undefined undefined
console.log("var keyword demo");
var myval=0;
var myval2=4;

// Variable declaration hoisting - function scope
function fx() {
    console.log("in fx", fxval,fxval2); // undefined undefined
    var fxval; 
    var fxval2=123;
    console.log("in fx", fxval,fxval2); // undefined 123
}
fx();

// Re-declaration - no error 
var i=10;
var i=12;
console.log("i:", i); // 12

// does not have block scope
for (var a=10;a<11;a++) {
    var b=12;    
}

console.log("a,b:",a,b); // 11, 12

if ( i > 9){
    var c = 13;
}
console.log("c:", c);

// no block scope inside function
function fx3() {
    try {
        var d=20;
    }catch(e) {
        console.log(e,d);
    }
    console.log("d",d); // 20
}

fx3();
//console.log("d:", d); // error