var let and const keyword in Javascript

Hi, readers today we will discuss a very basic concept in Javascript, which even experiences Javascript developers struggles with. In this blog, we will understand the difference between var, let and const keywords inside Javascript. At the beginning of Javascript, we can define variables only using the var keyword. Defining a variable means making the variable accessible inside the Javascript script. But after ECMA5 release Javascript introduced two more keywords let and const to declare variables.

But why so?? Was there any issue with the var keyword, and if yes how do the let and const provide solutions to the issues? Let's discuss them one by one in detail.

Scoping

Scoping is an important concept in Javascript. Scoping means the accessibility of a Javascript variable inside a Javascript code. When a variable is defined in Javascript it can only be used within the scope it has been defined in, there are two types of scope in Javascript.

Function Scope

A variable defined with function scope will only be accessible inside that given function and its child functions, but not outside of it, take a look at below code example.

function myFun()
{
    var myName = 'Jonas';
  console.log(myName); // OUTPUT: Jonas
}
console.log(myName);    // OUTPUT: ReferenceError: myName is not defined

In the example above variable myName is functioned scoped so if used outside of that function it will give a reference error that this variable is not defined in the current context. But when used inside the function or any child functions of the myFun function it will give the value Jonas.

Block Scope

Block Scope is defined by the {}, all of the code written within these curly braces are considered written in scope and all the variables defined with block scope will follow these {} for accessibility. Take a look at the example below.

if(true)
{
    let myName = 'Jonas';
    console.log(myName);    //OUTPUT: Jonas
}
console.log(myName);    // OUTPUT: ReferenceError: myName is not defined

In this example, myName is block scoped and defined inside the curly braces of the if statement so if it is used outside of them it will give a reference error.

Now we have a clear understanding of what is scope in Javascript, we will discuss this in some other blog but for now, this is a small brief about Scope.

var

Coming back to our discussion, variables defined with var keywords are function scoped, and when defined in a global context they are global variables and can be accessed anywhere in the code. variables declared with var keywords can be redefined inside their scope, for example.

var myName = 'Jonas';
function myFun()
{
    var myName = 'Kyle';
    console.log(myName); // OUTPUT: Kyle
}
myFun();
console.log(myName);    // OUTPUT: Jonas

This will not give an error, here we have defined two myName variables using the var keyword. Once in the global context and second in the function myFun. These are two different variables and not just reassigning of value because the var keyword follows function scope. When a variable is used inside a given scope priority is given to the local variable. So the myName variable defined inside the function will be given priority when we access the value of myName inside the function. Therefore the console log inside the function will print Kyle. And in the second console log, Jonas will be printed referring to the myName variable defined in the global context.

let & const

variables defined with let and const keywords are block-scoped, meaning they can be accessed inside the block they are defined in. If defined in the global context they are global variables and can be accessed anywhere inside the javascript code. Unlike var keyword variables defined with let and const, cannot be redefined in the given scope. If done they will throw an error.

let myName = 'Jonas';
if (true)
{
    let myName = 'Kyle';
  console.log(myName);    // OUTPUT: Kyle
}
let myName = 'Kyle';    // OUTPUT: 'myName' has already been declared"
const myName  = 'Cynthia';    // OUTPUT: 'myName' has already been declared"

Let's see what is happening here. we have defined a myName variable and initialized it with the value Jonas. Next, we have an if block inside it we have again defined another variable with the same name. Javascript will treat this as a new variable as it is defined inside a new block. So, the output of the console.log will be Kyle. Next, outside of the if block we have again defined the myName variable in the global context with the value Kyle. Here we already have a variable myName in the global context, so it will throw an error, similarly for myName defined using the const keyword.

Hoisting

Hoisting is a mechanism in Javascript in which all the variables and functions defined in Javascript code are hoisted at the top of their scope. So that they will be accessible anywhere inside their scope. Look at the below example

printName();    // OUTPUT: Jonas
function printName()
{
    console.log('Jonas');
}

var

Variables defined with the var keyword are hoisted in javascript and they are initialized with an undefined value.

let & const

Variables defined with the let and const keywords are also hoisted but they are not initialized. So if we try to use them before their declaration it will throw a reference error. Look at the example below.

console.log(firstName);
console.log(middleName);
console.log(familyName);

var firstName = 'Andrew'; // OUTPUT: undefined
let middleName = 'Martin'; // OUTPUT: ReferenceError: Cannot access 'middleName' before initialization"
const familyName = 'Smith'; // OUTPUT: ReferenceError: Cannot access 'familyName' before initialization"

Summary