ALL ABOUT JAVASCRIPT HOISTING

January 25, 2016

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 dogName 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 dogName 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() {
console.log(courseName + " is a great class");
var courseName = “Ruby”;
}
myCourse();



Also in Stories by Linda Vivah on Medium

ES6 JavaScript: Understanding Let & Const

December 27, 2018

via GIPHY

There were many updates brought by ES6. One of the Syntax updates introduced was the concept of declaring variables with let andconst instead of var

To understand whylet & constwere introduced, we must first understand how var works & the concept of hoisting → That being said, here are the 5 questions we will cover in order:

  1. HOW DOES VAR...

Read More

Best Coding Books for Babies/Kids

October 18, 2018

I get a ton of questions regarding the coding books I read to my 15 month old son, specifically on my Instagram.

Since I have purchased quite a few, here are my top 4 coding book suggestions for babies/young kids:

1. ABCs of the Web

A great introduction to basic coding and web concepts for children in the form of the alphabet!

2. Web Design for Kids

Introduces basic coding concepts in an engaging...

Read More

Resources I used to pass the AWS Solutions Architect — Associate Certification Exam

August 29, 2018

I recently passed the AWS Solutions Architect Associate Exam and would like to share some of the resources I used to study for the exam. I used 2 different online courses to study, did the labs included with those courses, & took a few practice tests.

Background: My goal when studying was to really understand and be able to use what I learned on the job. I currently work as a web developer so I do...

Read More

10% Off Your First Order!

Use Coupon Code HIGHFIVE