Easy JavaScript Part 5: Simplifying Function Hoisting

前端开发 DZone

Easy JavaScript Part 5: Simplifying Function Hoisting

DZone’s Guide to

Easy JavaScript Part 5: Simplifying Function Hoisting

In this installment, we explore function hoisting in JS and why you can’t use a function expression before it is created in the code.

Dhananjay Kumar

Nov. 01, 17 ·
Web Dev Zone

Free Resource

Join the DZone community and get the full member experience.

Add user login and MFA to your next project in minutes. Create a free Okta developer account , drop in one of our SDKs to your application and get back to building.

To understand function hoisting, let us start by considering the code listed below:

console.log(foo);
var foo = 9;

What should the output be?

In any other programming language, the output here would be a reference error . However, in JavaScript, you will get undefined as the output. Why? Because JavaScript hoists variables at the top of the execution context. An execution context could be the function in which a variable is declared or a JavaScript file in which a variable is declared. So, let us rewrite the above code snippet using a function:

function abc() {
    console.log(foo);
    var foo = 9;
}

abc();

Here, the variable “foo” is hoisted at the top of the function abc ‘s execution context; which means you can access foo before it is declared. To put it simply, whenever you declare a variable, the JavaScript interpreter breaks it into two statements:

  1. Declaration of a variable.
  2. Assignment.

The declaration of a variable goes at the top of the execution context, and assignment happens where the variable is created. So the above code snippet is broken into two statements as shown in the image below:

The variable foo is hoisted at the top of the execution context of the function abc , hence when you use it before its declaration, you get “undefined” as the output.

Keep in mind that a variable declared using thelet statement does not get hoisted to the top of the execution context.

Now that you understand how variables are hoisted in JavaScript, let’s explore function hoisting in JavaScript. In JavaScript, a function can be created in two ways:

  1. Function as a declaration.
  2. Function as an expression.

A function created as a declaration or statement is hoisted as a whole to the top of the execution context. However, a function created as an expression is hoisted like a variable.

To illustrate this, let’s create a function as a statement:

foo();

function foo() {
    console.log("hello");
}

Above, if you use a function before it’s created, you will get an output of hello . This is happening because a function created as a statement gets hoisted as a whole to the top of the execution context.

Whenever you create a function as a statement, you can use that function before the function is created. So if you are creating a function as a statement in line number 5, you can use that function in lines 1-4 because function statements are hoisted with the function body at the top of the execution context.

Function statements are hoisted with the function body at the top of the execution context.

Function expressions get hoisted to the top of the execution context like a variable. Let us consider the code listed below:

foo();

var foo = function () {
    console.log("hello");
}

Here you are creating the function foo as an expression, so JavaScript will hoist it in the same way a normal variable is hoisted. JavaScript treats the above code as shown in the image below:

As you see in the above image, foo is getting declared as a variable at the top of the execution context, however, the assignment of a function in the variable foo is happening in line number 6 where the function as an expression was created. So, when you try to execute the code listed above, you will get the error undefined is not a function as shown in the image below:

You cannot use the function expression before it is created because only the function declaration gets hoisted at the top.

In summary:

  1. The function statement gets hoisted with the function body at the top of the execution context. You can use a function created as a statement before it’s created.
  2. The function expression cannot be used before it’s created. Only the declaration part gets hoisted and the assignment happens in the line where the function was created.

In the next post of this “Easy JavaScript” series, you will learn about more important concepts in JavaScript, so stay tuned.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

DZone稿源:DZone (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Easy JavaScript Part 5: Simplifying Function Hoisting

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录