Introduction
It is often mistakenly thought that JavaScript is an interpreted programming language that is interpreted, i.e. directly executes line by line without prior compiling (translation of the language into machine language). However, JavaScript is a programming language that is compiled when the code is executed (“on the fly“). JavaScript code is compiled every time the code is executed, so the quality and responsiveness of JavaScript as a language mostly depends on the efficiency of the JavaScript engine that compiles it.
Hoisting variables
Declaring and defining a variable are two different processes. “Declaration of a variable” is the process of creating a variable, then defining the name of the variable and providing space for its storage, while “defining a variable” is the process when a variable is assigned a value that is placed in the storage space.
Hoisting declared variables
Variable declaration is executed when the code is compiled, which means that before the execution of even one line of code, the variables are first declared. Within JavaScript, there is a special reserved word “var” that is used to declare a variable. Since the declaration of a variable occurs before the execution of any part of the code, it follows that it is the same as if the variables were declared at the beginning of the code, this principle is called “hoisting” (Sr. lifting).
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function someFunction (){ // some code } var a = 5; Actual code appearance: var a; function someFunction (){ // some code } a = 5; |
So, in the event that a variable is called before reaching the part of the code where it is declared and defined (in fact, it is already declared), it will not throw an error, but it will throw out that the value of that variable has not yet been defined.
|
1 2 |
console.log(x); // it gives no error but only "undefined" var x = 5; |
Example
The following example will explain the case related to the for loop, which should be paid attention to in order to avoid errors.
|
1 2 3 4 5 |
function f() { for (var i = 0; i < c; i++) { ... } } |
The previous example after hoisting the variable i looks like this:
|
1 2 3 4 5 6 |
function f() { var i; for (i = 0; i < c; i++) { ... } } |
So you should pay attention not to declare a variable with the same name inside the function.
What happens to undeclared variables?
If the reserved word “var” is not used, the variable will be declared “on the fly” in the global scope and will be accessible from all program code. This action is performed only at code execution time, which is after compilation and the moment when “lifting” variables to the top of the code (hoisting) is executed. Therefore, since the hoisting moment has passed, the variable will not be hoisted to the beginning of the code. So if, as in the following example, such a variable is called earlier in the code, it will throw an error!
|
1 2 |
console.log(x); // Throws error: x is not defined x = 5; |
Example
|
1 2 3 4 |
function testScope() { inner = "test"; } console.log(inner); // Output: test (available from global scope) |
Since it is not declared with var, it is declared in the global scope, so it is available from the whole program!.
Example
|
1 2 3 4 5 6 7 8 |
var test = "value from the global domain" function testScope() { test = "Value from local domain"; console.log(test); } console.log(test); // Output: value from the global domain testScope(); // Output: Value from the local domain console.log(test); // Output: Value from the local domain |
When calling the function testScope() from the global domain, the global variable X is also called, after “processing” in the function it is assigned a new value “Value from the local domain.
Hoisting functions
Declaration of the function also takes place before the execution of the code, i.e. when compiling, therefore, just like variables, they can be considered to be written at the beginning of the code. The process of hoisting declared functions (the entire function with all the code) to the beginning of the code is called hoisting functions. For this reason, we can write the function at the bottom of the code and call it from the top without throwing an error, as in the following example:
|
1 2 3 4 |
test(); // Output: no error (because the function is already hoisted) function test(){ console.log("without error"); } |
It should be emphasized that the hositing function takes place before the hoisting of variables, i.e.
Example
The output of the test() function in the following example may be unclear at first glance.
|
1 2 3 4 5 6 7 |
var test = function (){ console.log("from function expression"); } function test(){ console.log("from the declared function"); } test(); // Output: from function expression |
The preceding example will explain itself if the code is written when hoisted:
|
1 2 3 4 5 6 7 8 |
function test(){ console.log("from the declared function"); } // the whole function is raised first var test; // then the variable declaration is raised var test = function (){ console.log("from function expression"); } // rest in the same place in the code test(); // rest in the same place in the code |
Since the definition of the test function via a variable comes after the hoisted function, its content “steps over” the previous one, so the final output is: “from function expression”.
EXPLANATION:
The difference between the terms “function declaration” and “function expression” is best explained with examples:
|
1 2 |
function test() {} // function declaration var test = function() {}; // function expression |
The main difference is in the position of the special word function within the expression: if the word “function” is at the beginning of the expression then it is a declaration, in other cases it is “function expression”.
Nested function does not rise
You should pay attention to the rule that a “nested” function inside another cannot be moved to the beginning of its parent scope, i.e. functions are not hosted inside child domains:
|
1 2 3 4 5 6 7 8 9 |
function f() { { g(); // Returnserror is the g() function is not defined before this line function g() { ... } } } |