ALL ABOUT JAVASCRIPT HOISTING

So, you want to understand Javascript well, eh? You are in the right place. Variable scope and variable hoisting are important concepts in Javascript.

…Hence, it is no surprise that “hoisting” is asked about often during interviews.

In this article, I will cover the following concepts:

1. SCOPE

2. BLOCK SCOPE vs. FUNCTION SCOPE

3. SCOPE CHAIN

4. GLOBAL VARIABLES

5. HOISTING

1. SCOPE

One of the things that make Javascript confusing is how it determines variable scope. Scope refers to when and where within your code a variable exists.

2. BLOCK SCOPE vs. FUNCTION SCOPE

In most programming languages variables have a block scope, variables created in a code block or inside curly braces {}. They cease to exist outside of them.

In Javascript, we have something different called function scope. In function scope variables live within functions. Any variable you create with the keyword VAR is local to the function that they were created in. A variable that was created in a parent function lives also in the child function.

3. SCOPE CHAIN

Javascript has something called a scope chain. it determines what happens when a function can’t find a variable within it’s function. In simple terms, it is going to look for a variable up through all the parent functions.

Here is an example:

function myCourse() {
var courseName = “Ruby”;
function otherCourse() {
   var courseName = “Intro to Rails";
   console.log(courseName + ‘ is a great class’);
 }
 otherCourse();
}
myCourse();

This will output: Intro to Rails is a great class

but what happens if I don’t define the second variable name?…

function myCourse() {
var courseName = “Ruby”;
function otherCourse() {
   console.log(courseName + ‘ is a great class’);
 }
 otherCourse();
}
myCourse();

This will output: Ruby is a great class

Why? because although I was in the otherCourse() function, that function went outside to its parent and found that variable and it used that as the name of the class.

4. GLOBAL VARIABLES

One thing you have to be careful with javascript variables is that any variables that you create without the keyword VAR become global variables, available to the whole application and that can cause problems in your code.

Here’s an example:

function myCourse() {
var courseName = “Ruby”;
 }
myCourse();
console.log(courseName + " is a great class");

This will output: undefined

But..

if I take out the “var” it will output: Ruby is a great class

function myCourse() {
courseName = “Ruby”;
 }
myCourse();
console.log(courseName + " is a great class");

This is happening because courseName is now a global variable. That is a very bad thing because a global variable can potentially cause problems when you have a lot of functions using similar variables. You always want to use VAR and make sure you know where the scope of your variable is at any time.

5. HOISTING

Variable declarations are one of the most basic aspects of any programming language. One thing that can be dangerous in Javascript is that variable definitions are hoisted.

Hoisting means “moving to the beginning of a scope.” Function declarations are hoisted completely, variable declarations only partially.

Javascript actually rearranges your variable declarations during the browser processing phase and moves them to the top of their functional scope. This means that variables can actually exist before you use them.

Here’s an example:

Let’s see what happens if I put the variable after the console.log…

function myCourse() {
console.log(courseName + " is a great class");
var courseName = “Ruby”;
}
myCourse();

This will output: undefined

What we get is kind of strange. The reason this happened is because before it ran any of the code javascript did this..

function myCourse() {
var courseName;
console.log(courseName + " is a great class");
courseName = “Ruby”;
}
myCourse();

This will output: undefined is a great class

The variable is actually sitting there but it doesn’t have a value yet and this can cause problems when you create more complex applications.

However, JavaScript has a little quirk, known as hoisting, which can turn an innocent looking declaration into a subtle bug. This article explains what hoisting is, and how you can avoid being burned by it.

Let’s see what happens if we put a variable outside of the function..

var courseName = “Intro to Rails";
function myCourse() {
console.log(courseName + " is a great class");
var courseName = “Ruby”;
}
myCourse();

This will output: undefined is a great class

Why? because the variable of courseName is still appearing prior to the console.log since it is being hoisted, but it is not defined till after.

The other interesting thing about this is that functions actually get hoisted to the top of the declaration key chain.

So, for example, it doesn’t matter where I put my myCourse(); function call, we can actually call it before the function exists. The following snippets of code would still call the function.

calling the function after …

function myCourse() {
console.log(courseName + " is a great class");
var courseName = “Ruby”;
}
myCourse();

& calling the function before..

myCourse();
function myCourse() {
console.log(courseName + " is a great class");
var courseName = “Ruby”;
}

It doesn’t have a problem calling the function before the function exists. That can cause some additional problems. That’s why it is important to make sure that:

1. Declare all of your variables at the top of the function scope.
2. Make sure you put all of your functions, if you can, also at the top of the function scope.

It is best to write it this way..

function myCourse() {
var courseName = “Ruby”;
console.log(courseName + " is a great class");
}
myCourse();