Are ES6 blocks only prevent function hoisting?

Question

Someone please help me understand the following scenario:

//Outer funtion 
function foo() {
  console.log('outer foo');
}

{
  //Inner function
  function foo() {
    console.log('inner foo');
  }
}

foo(); //Says "inner foo"

I assume that in the above case the Inner function's explicit deceleration is replacing the hoisted outer function after the block is executed.

Does this mean that ES6 blocks ONLY prevent function hoisting when declared inside?

Update

It is opined by many that the blocks are not effecting functions. But, please see the following scenario as per MDN -

foo('outside');  // TypeError: foo is not a function
{
  function foo(location) {
   console.log('foo is called ' + location);
  }
  foo('inside'); // works correctly and logs 'foo is called inside'
}
To be more precise, the block statement is preventing the function declaration from being hoisted to the top of the scope. The function is behaving as if it were defined as a function expression and, as such, it is only the implicit variable declaration that gets hoisted to the top of the scope

Another update

The documentation was wrong and it was just fixed by the expert who provided the selected answer.

A `function` declaration statement is always hoisted to the closest enclosing **function** scope, not block. — Pointy, Jun 20 '19 at 16:24
"closest enclosing function scope" as in up to the immediate enclosing block? — Charlie, Jun 20 '19 at 16:25
No, not *block*; **function**. Simple blocks don't matter at all. — Pointy, Jun 20 '19 at 16:25
Well if it's not inside a function it's hoisted to the top of the code unit (like the contents of a ` — Pointy, Jun 20 '19 at 16:28
But - as per MDN, the the functions declared within blocks are not hoisted. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block — Charlie, Jun 20 '19 at 16:29
MDN says - In non-strict code, function declarations inside blocks behave strangely. Do not use them. I think it is some kind of bug. Or if you know the answer why functions behave strangely inside a block, please comment it down. I have the same doubt. Thanks. — Aravind Emmadishetty, Apr 22 '21 at 05:41

score 4 · Accepted Answer · answered Jun 20 '19 at 16:25

4

I assume that in the above case the Inner function's explicit deceleration is replacing the hoisted outer function after the block is executed.

Function declarations, like var statements, are hoisted to the top of the function during the initial scan of the function before the code within it is executed.

Blocks aren't relevant to hoisting of var statements or function declarations (both of which has function scope). They only matter for let and const which have block scope.

answered Jun 20 '19 at 16:25

Quentin

914,110
126
1,211
1,335

But - as per MDN, the the functions declared within blocks are not hoisted. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ – Charlie Jun 20 '19 at 16:29
wow you're quick :) I was just about to mark it for technical review – Pointy Jun 20 '19 at 16:35

Are ES6 blocks only prevent function hoisting?

1 Answers1