'What is the main advantage of hoisting in Javascript?

A couple of days ago, I had an interview, and one of the questions was 'what is hoisting?' then I explained the hoisting concept thoroughly, then the interviewer asked me, 'what is the main advantage of hoisting?' I couldn't answer. Really what is the main advantage of hoisting in javascript?



Solution 1:[1]

Convenience?

No really. It is convenient. Both to the reader of code as the coder themselves. Not so much for variable hoisting, but for function hoisting. This way you can put the helper functions to the bottom of your code and the more abstract ones which show your business logic at the top.

I like this answer on quora on the same topic https://www.quora.com/Why-does-JavaScript-hoist-variables

In other words, what happened was that JavaScript implemented hoisting of function declarations so that programmers would not be forced to place the inner-most functions at the top of the script block, and the outer-most (top-level) functions at the bottom. This order, which is forced in ML languages (such as LISP) is painful because programmers prefer reading code top-to-bottom, rather than bottom-to-top. Languages like C/C++ get around this issue by using header files, and standalone declarations, which JavaScript doesn’t have. Also, hoisting was required for implementing mutual recursion.

Solution 2:[2]

A name (variable name, function name) is scoped to its block. With var that's the function body, with let/const that's the closest enclosing {} block. Due to the nested scopes possible in Javascript, it must be clear which block a variable belongs to. If you mention var foo/let foo anywhere within a specific block, that block is reserved as the scope for this variable.

function () {
/**** scope of foo *****/
/*/
/*/ var foo;
/*/
/*/ function () {
/*/ /** scope of bar **/
/*/ /*/
/*/ /*/ var bar;
/*/ /*/
/*/ /******************/
/*/ }
/**********************/
}

It would be very confusing if the variable scope would only start at the exact line at which var ... is declared; then half the function would have one variable scope and half another. Hence, if var/let exists anywhere within a block, that name is hoisted to encompass the entire block.

Solution 3:[3]

Well, everything has its advantages and its disadvantages, but in this case, the disadvantages seem to outweigh the advantages.

In my opinion, hoisting makes the code harder to reason about. But that's just my opinion. When I write code, I want my bindings declared at the point in code where I declare them. That way, I get informed if I mistakenly use them before I declare them, for example. And I certainly do not want to accidentally declare them twice, which would be perfectly valid and perfectly confusing.

I would like the compiler/interpreter to help me when I do something stupid. Hoisting allows me to do too much convenient and/or stupid things, potentially resulting in hours of complex debugging sessions. So since ES6, I primarily use let and const instead of var. No hoisting for me if I can help it. ;)

So my answer to the question "What is the (main) advantage of hoisting?" would be: "I really don't care."

Edit:

Well, perhaps I am a little too harsh here. Function hoisting might actually be useful and convenient and improve readability of code. But within functions, I would avoid variable hoisting as much as possible.

Solution 4:[4]

Hosting is useful to create a chain of function calls. Like the ones RxJS offers

https://youtube.com/shorts/JTPozUVicGo?feature=share

Solution 5:[5]

Hoisting can be useful in some of the cases. For example we are creating a big project. It has alot of helper methods which are separated by putting then in another script. Now if they are declared using function declaration we don't have to worry about the order of scripts. Otherwise we could have issues.

Another use is that when we use recursion. Consider a function which prints numbers using recursion.

(function print(n){
  if(n === 0) return;
  console.log(n)
  print(n-1)
})(4);

Now if there wouldn't be any hoisting the code may have thrown error that print is not defined

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 deceze
Solution 3
Solution 4 Tom Smykowski
Solution 5 Maheer Ali