Function Hoisting in JavaScript

Hoisting is the default behavior in JavaScript, which moves all declarations before code execution to the top of the global or local scope. It is a JavaScript property that permits you to use a variable or function before declaring it. It does not matter where you have declared the variables or functions in your JavaScript code; they can be easily moved to the top of their scope.

Want to use function hoisting in JavaScript? If yes, then you are at the right post! This write-up will discuss the function hoisting, variable hoisting, and hoisting precedence in JavaScript. Moreover, the difference between the function expression and function declaration hoisting will also be demonstrated with the help of examples. So, let’s get started!

Variable Hoisting in JavaScript

As variable hoisting is linked with the function declarations hoisting and function expression, we will discuss variable hoisting first.

In variable hoisting, A variable with the keyword “var” can be declared after being utilized/accessed in the JavaScript code. The JavaScript engine moves the variable declarations at the top of the script, and this concept is known as variable hoisting. Remember that you have to declare all of your variables at the start of every scope to avoid errors or bugs.

When it comes to variables and constants, the keyword “var” is permitted for the hoisting, whereas “const” and “let” are not. Now, let’s check out the below-given example to better understand the previous statement.

In the below-given example, the var “c” is used in the console.log() function before its declaration. Execute the code to check out the result:

c = "Hoisting in JavaScript";
console.log(c);
var c;

The output is displaying the string value of var “c,” which is “Hoisting in JavaScript”, indicating that the variable declaration is allowed for hoisting:

In the other case, JavaScript does not allow hoisting the variable assignment. To confirm this statement, we will write out the following code and execute it in our console window:

console.log(d);
var d = "Hoisting in JavaScript";

In this example, the declaration of the variable “d” is moved to the memory in the compilation phase, so the output will show you “undefined” as the value of the “d” variable because it is printed out before the initialization:

Function Hoisting in JavaScript

Similar to the variables, JavaScript hoists function declarations. In this case, the function declarations are moved to the top of your JavaScript code, and the hoisted function can be utilized before their declaration. You can define functions anywhere in your program, and that hoisted function can be invoked before its definition.

Difference between Function expression Hoisting and Function declaration Hoisting

In JavaScript, the functions are loosely classified as Functions expression and Function declaration. When you call a JavaScript function before its declaration, it will display the output because the JavaScript interpreter hoists the function declarations. In the other case, when a function is used as an expression, it generates an error because only declarations are hoisted.

In the below-given example, we will call the testFunc() function before its declaration, and it will output the string “Hi, this is linuxhint.com”:

testFunc();
function testFunc() {
    console.log('Hi, this is linuxhint.com');
}

That’s how JavaScript performs hoisting for the function declaration:

Now, let’s utilize the “testFunc2()” as Function expression in the following JavaScript code:

testFunc2();
let testFunc2 = function() {
  console.log('Hi, this is linuxhint.com');
}

In this case, a “ReferenceError” will occur stating that the added “testfunc2()” is not defined:

If you execute the same code while replacing the “let” with “var”, the output will show you a “TypeError” this time because the variable “testFunc1” is used as in a function expression, and the JavaScript interpreter can only hoist the function declaration but not assignment before invoking it:

testFunc1();
var testFunc1 = function() {
  console.log('Hi, this is linuxhint.com');
}

Hoisting precedence in JavaScript

When you want to hoist variables and functions with the same name in your JavaScript code, then make sure you know the JavaScript hoisting precedence. Here are some points that you should keep in mind while stepping into the specified condition:

• The assignment of variables takes precedence over the functions declaration.
• Function declarations in JavaScript take precedence over the variable declarations.

Note: Function declarations are hoisted over the variable declarations but not over the variable assignments.

Now, check out the following example to understand the working of variable assignment over the JavaScript functions declaration:

var test1 = 'Hi, this is linuxhint.com';
function test1(a) {
  return (a + 'we are hoisting functions');}
console.log(test1);

In the above-given code, the “test1” variable assignment will take precedence, and the code will only output its value:

Conclusion

Function hoisting in JavaScript is utilized for moving functions declarations to the top of their scope. Similar to the functions, the variable declarations are also used before the declaration in JavaScript code. This write-up discussed the function hoisting, variable hoisting, and hoisting precedence in JavaScript. Moreover, the difference between the function expression and function declaration hoisting is demonstrated with the help of examples.

from https://ift.tt/3AG5o2o