Does automatically hoisting slow down the performance of JavaScript?

Question

Lately, I was studying Scope in Javascript. I want to know whether automatically hoisting is done at compile time or at the time of executing the code(run time). If it does at run time then I have another question does auto-hoisting will slow down the performance of the Javascript program.

something = a(); 
function a(){
 console.log("hoisting");
 return 10;
}
var something;

Should we use manual hoisting or it would be better to use automatically hoisting?

The specification is pretty clear about what happens when a function is evaluated. The hoisting happens when the new execution context for the function is created. I.e. it will happen every time the function is called and it doesn't matter where you place the `var` statement. Per spec, the engine has to parse the function for all `var` statements anyway. Having said that, I'm sure real implementations probably only do that once and keep a "canonical" representation of the function around, instead of the original one (and who knows what happens with JIT compilation anyway). — Felix Kling, Jan 16 '21 at 08:19
People keep talking about "compile time" but what exactly do they mean by that in the context of JavaScript? — Felix Kling, Jan 16 '21 at 08:24
According to the spec, https://tc39.es/ecma262/#sec-functiondeclarationinstantiation happens on every function call, not at parse time. But as I already said, there are definitely optimizations an implementation could do, though that's not my area of expertise. It certainly seems to be reasonable to collect information about all variable declarations inside the function *once*. — Felix Kling, Jan 16 '21 at 08:27
Also re hoisting: People have a different understanding of what exactly it's supposed to mean. Fact is that, according to the spec, when a function is called a new execution context is created, which holds a new environment. Then the function body is processed to find all variable declarations (`var`, `let`, `const` (and function declarations)) and bindings for those names are created in the new environment. `var` declarations are initialized with `undefined`. Then the body is actually evaluated. — Felix Kling, Jan 16 '21 at 08:29
*May I know why does it matter to you?* Even if there is an ever slight slowdown, it is so negligible that it wouldn't matter what-so-ever for 100% of all programs written in javascript, since if performance matter that match, the program wouldn't be written in javascript in the first place. Since JS meant for web, and not landing rockets on asteroids — vsync, Jan 16 '21 at 08:34
@vsync just want to have proper knowledge I would say. please don't judge me on this. — Subrato Pattanaik, Jan 16 '21 at 08:37
@SubratoPatnaik - I like your question as you seems a curious person, just want to say that the result of this inquiry would not affect the *perceived* performance of any program. — vsync, Jan 16 '21 at 08:39

score 5 · Answer 1 · answered Jan 16 '21 at 08:19

5

As I know, There are no performance issues. The initializations are getting done in compile time. So doesn't matter you initialize on top or bottom, The JS engine will create the references in compile time.

BUT

If you forgot to initialize at the bottom, It will be initialized as undefined by default. Because of hoisting it’s considered a practice to declare functions or variables at the top of their respective scopes.

JavaScript: What is Hoisting? (Recommended)

answered Jan 16 '21 at 08:19

BadPiggie

5,471
1
14
28

Could you also help me to know how function expression is parsed? I know that the function declaration and variable declaration does at the compiling process. – Subrato Pattanaik Jan 16 '21 at 09:01

score 5 · Accepted Answer · answered Jan 16 '21 at 08:36

5

To put my comments as an answer:

People have a different understanding of what hoisting supposed to mean. Fact is that, according to the spec, every time a function is called a new execution context is created, which holds a new environment. Then the function body is processed to find all variable declarations (var, let, const (and function declarations)) and bindings for those names are created in the new environment. var declarations are initialized with undefined. Then the body is actually evaluated.

Considering this, from the perspective of the engine it doesn't really matter where you place the var declaration, the whole body has to be processed anyway.

Having said that, I would be surprised if actual implementations didn't cache that information. After all, the variable declarations in a function don't change between function calls.

answered Jan 16 '21 at 08:36

Felix Kling

795,719
175
1,089
1,143

line 1 in my example is a function expression. How javascript parse that line? – Subrato Pattanaik Jan 16 '21 at 08:40
1

Sorry, line1 is not a function expression. But, wanted to know how function expression is parsed? Also, I know this question not much relate to hoisting. Any small suggestion would be helpful. – Subrato Pattanaik Jan 16 '21 at 08:52
2

You mean because the name of the algorithm is "FunctionDeclarationInstantiation"? Despite that name, the exact same algorithm is used to the evaluate the body of function expressions. – Felix Kling Jan 16 '21 at 12:25

score 2 · Answer 3 · answered Jan 16 '21 at 08:23

2

It is not done at run time. It's in the compile process. So it doesn't slow down the performance. Just before the code is executed the compiler scans for all variable and function declarations and allocates them in the memory.

answered Jan 16 '21 at 08:23

Harney

352
1
4

1

javascript is not a language that goes a compilation process – vsync Jan 16 '21 at 08:31
1

@vsync theoretically, yes. but the engines does that for performance optimization behind the scenes. "V8 increases performance by **compiling JavaScript to native machine code** before executing it, versus executing bytecode or interpreting it." – Tibebes. M Jan 16 '21 at 08:41
2

@Tibebes.M - Ho, **that** compilation process. I thought he meant in the "traditional" sense. 10x – vsync Jan 16 '21 at 12:47

Does automatically hoisting slow down the performance of JavaScript?

3 Answers3