This is the 22nd day of my participation in the August Wen Challenge.More challenges in August

preface

Start with two questions:

{
 a = 123
 function a () {}}console.log(a)
Copy the code
{
 function a () {}
 a = 123
}
console.log(a)
Copy the code

What do you think it’s gonna print?

Publish the answer, the first print 123, the second print function a.

Function declaration in block-level scope

The first thing to know is that in non-strict mode, function declarations, like var declarations, are promoted.

{
 console.log(a)
 function a () {}}Copy the code

Executed on the console, it prints functions that indicate that the function declaration of the block-level scope has been promoted to the beginning of the block-level scope.

console.log(a)
{
 console.log(a)
 function a () {}}console.log(a)
Copy the code

The printed result is:

  • The first time was printingundefined
  • The second time, the third time is to printfunction

As you can see from the first and third results, the block-level function declaration will also declare the function of the same name in the global scope, the first time is undefined, the third time is the function.

Current conclusions:

In non-strict mode

  • The function declaration of the block-level scope is promoted to the beginning of the block-level scope
  • The function declaration of the block-level scope is promoted to the global variable of the same name in the global scope with a value ofundefined

Back to the question

As mentioned above, the function declaration of block-level scope will be improved by declaring a global variable of the same name in the global scope. The first value is undefined, and the third value is the function.

The function declaration does not elevate the function values into the global scope, but merely raises the variables of the same name whose values are UND25th, and then assigns the function values to the global variables of the same name under the global scope when the row I pay is executed.

Analysis of the first question

{
 a = 123
 function a () {}}console.log(a)
Copy the code

Process:

  • The global scope declares a variable, a, whose value isundefined
  • Block-level scoped functions are promoted to the beginning and then executeda = 123At this time,aIs equal to the123
  • We then execute the function declaration line, assigning a from the block-level scope to the global scope variablea, the value is123
  • The global scope prints a, yes123

Verify:

console.log(a) // undefined
{
 console.log(a) // function a() {}
 a = 123
 function a () {}
 console.log(a) / / 123
}
console.log(a) / / 123
Copy the code

The results agree with the analysis.

Analysis of the second question:

{
 function a () {}
 a = 123
}
console.log(a)
Copy the code

Process:

  • The global scope declares a variable, a, whose value isundefined
  • There is no function promotion in the block-level scope, because at this point the function is at the beginning, performing the function declaration, and assigning the block-level a to the variable in the global scopea, the value isfunction
  • performa = 123Where a is not a variable in the global scopeaIs a variable in the block-level scopea, assignment does not affect the global scopea.
  • The global scope prints a, yesfunction
console.log(a) // undefined
{
 function a () {}
 a = 123
 console.log(a) / / 123
}
console.log(a) // function a () {}
Copy the code

The results agree with the analysis.

For additional

All of the above code is represented in non-strict mode, and if in strict mode, the result is different.

Please have a look at

'use strict'
{
 a = 123
 function a () {}}console.log(a)
Copy the code
'use strict'
{
 function a () {}
 a = 123
}
console.log(a)
Copy the code

Uncaught ReferenceError: A is not defined.

This means that in strict mode, there is no function promotion, and the global scope is not accessible, only at the block level scope.

conclusion

That’s how function declarations look at the block-level scope. Js is amazing, and there are many different ways to look at it, but I’ll share more interesting ones later.

Thank you for reading.