Does Hoisting occur with the variable within the function or any other block command?

Question

Keyword variable statements var does not directly have a local scope its scope is within the function that contains it or outside it the scope is global (var Hoisting).

Like in the example below the variable n1 will be raised to the top of the execution context which is the function test() and in that case it will be visible throughout the function test():

function test() {
    if (10 == 10) {
        var n1 = 450;
    }
    
    console.log(n1); // 450
}

test();

But what if, for example, instead of using the keyword var, i use the keyword let or const then the scope will no longer be the function test() but the command if and the variable n1 will be visible only inside the command if, if you try to use it outside of this an error is returned:

function test() {
    if (10 == 10) {
        let n1 = 450;
    }
    
    console.log(n1); // Será retornado erro.
}

test();

In the case of the above example I can say that it occurred Hoisting with the variable n1? because it has been moved to the execution context that contains it in case it is no longer the function test() but the command if, this can be considered Hoisting or not?

Answer 1

In the case of the above example can I say that Hoisting occurred with the variable n1? this because it has been moved to the execution context that contains it in case it is no longer the test() function but the if command, this can be considered Hoisting or not?

No, the creation of the variable was not moved in its example. It was declared within the if, and that is where it exists, and only there, and only from the moment it is declared. That is, it is not available for use even within the same block, before the line where it is declared. So I consider that there is no Hoisting. Hoisting is the expression used to describe the behavior opposite to this, that is, the scope behavior of the var, arguments of appointed functions and functions (more details in this my answer).

Answer 2

In the first example, you are using var, which is an old way of declaring variables in Javascript. It can be said that there are Hoisting in var, since the declaration will be elevated to the most internal function in which it was declared, and not to the block.

Consider the example below:

function outer() {
  function inner() {
    console.log(myVar); // undefined

    if (true) {
      var myVar = 500;
    }
    
    console.log(myVar); // 500
  }
  
  inner();
  // console.log(myVar); -> Isso lançaria um erro.
}

outer();

One can say, then, which variables declared with var have the accessible declaration within the innermost function in which they were declared. Therefore, variables var have the scope of function and not block. They also have the so-called Hoisting. You can learn more about this in this reply from @bfavaretto.

It is also worth noting that the statement was moved to the beginning of inner, and not to the beginning of outer, since the variable was declared within the function inner, and not outer. In that case, inner is the nearest internal function.

---

On the other hand, variables declared using let or const have the scope of block. I do not know if I can, however, say that they do not possess Hoisting, since even the Ecmascript specification is a little vague regarding this. See:

let and const declarations define variables that are scoped to the running Execution context’s Lexicalenvironment. The variables are created when their containing Lexical Environment is instantiated but may not be accessed in any way until the variable’s Lexicalbinding is evaluated. A variable defined by a Lexicalbinding with an Initializer is Assigned the value of its Initializer’s Assignmentexpression when the Lexicalbinding is evaluated, not when the variable is created. If a Lexicalbinding in a let declaration does not have an Initializer the variable is Assigned the value Undefined when the Lexicalbinding is evaluated.

^{Own emphasis. Source.}

The above section does not say at any time that let or const do not have Hoisting, but makes it clear that, as in the bold section, "the variables are created when their lexical environments are instantiated, but cannot be accessed in any way until their Lexicalbinding is evaluated". This means that the variables that used this declaration cannot be accessed before their value has been evaluated.

So there is a "temporal Dead zone" (see here or here). It prevents variables declared with let or const can be read until your value is assigned. This is because if you try to access a variable let or const before your value is assigned, you will receive a ReferenceError. Behold:

console.log(x); // ReferenceError
let x = 10;
console.log(x);

To learn more, read the links placed during this reply.

Reference:

• Chapter 10, Variables and assignment, Javascript for impatient programmers.
• 10th version of Ecmascript specification.

Answer 3

I would say that occurred Hoisting in code with var, since the variable was "raised" to the function scope.
When declared with var, the variables either have global scope or the scope of the function that has been declared and is at this time occurs the Hoisting.
already in statements with const or let, the variable becomes available only to the scope in which it was declared, be it a function, a control structure, or a repetition structure. That’s why in the code with let an error occurs.