Today we will talk about javascript variable scopes, how ECMAScript has defined the variables, and variable hoisting.

Understanding Javascript Variable Scope and Hoisting

Well, we know how the scopes of the programming language work, but it’s not the same for all programming languages. In javascript, the variable scope and its hoisting are quite different.

Let’s take an example –

var car = “Mercedes” // variable is defined in the global scope




function  car_name () { // function

car = “BMW”; // this is a local scope but the variable car is global variable

var car = “Benteley” // this is a variable that is defined in local scope and is local variable

}

First, let’s talk about what global and local scope is –

Global Scope (Global Variables)

All the variables declared outside the function are in the global scope and are available in the entire HTML document.

We can also access the global variable with the help of the window object as their global context is window object.

We can simply define the variable outside the function and it will take its scope as a global scope and are referred by the window object.

Example –

var car = “Ferrrari”; //variable in global scope

console.log(“car”) //access global variable

function name() {

car = “BMW”;         // access global variable

console.log(car); //access global variable

console.log(window.car) //access global variable

}

but, this changes sometimes because of the javascript property that local variables have priority over global variables.

Don’t worry, we will study about this understanding global and local scope below.

Functional Scope (Local variables)

In Javascript, the local variables are defined in a function. If you already have a variable with the same name in a global scope than you have to define it with the var keyword.

Example –

var car = “Mercedes” //global variable defined

console.log(car) //access global variable



function car_name () {

var car  = “BMW”; // local  variable defined

console.log(car); //access local variable

console.log(window.car); //access global variable

}

In the above example, we can see there is a variable car i.e defined in global scope as well as in functional scope with the same name. In functional scope, local variables have a high priority than global variables that’s the reason line 5 of the above examples access the local variable. In case, one wants to access the global variable than they have to use the window object.

Good Javascript Developers avoid using global variables as much as possible. It is not a good practice to define a lot of global variables.

Still, there is one catch in a variable declaration, if you define a variable without using var, let or const keyword anywhere in the program (global as well as functional), it will automatically add that variable in the global context.

Variable Hoisting

Javascript has a special property i.e variable hoisting. If the variables are declared in the global scope then all the variables are lifted and declared at the top of the global context by Javascript.

Similarly, in functions, all the variable declarations in the functions are lifted and declared at the top of the function.

Example –

Function car_name () {

console.log(“Car Name” + car); // prints undefined

Var car = “Mercedes”

console.log(“Car Name” + car); //prints Mercedes

}

Here, one might think that why it prints undefined.

Let me explain this, the variable car is defined in a functional scope so it is hoisted at the top of the function i.e lifted and declared at the top of the function which means the only declaration is hoisted and not initialization.

The variable car is hoisted at the top of the function which is not initialized and store the value “undefined” that’s the reason it prints undefined on line 2. At line 3 the variable is initialized and it prints “Mercedes” on line 4.

Function declarations are also hoisted at the top but not function assignment only declaration, similar to variable hoisting.

This was all regarding scopes and hoisting.

Hope you understand everything

Thank you..!!!