Programming question: why is the last a 1 not 5

Some time ago, someone invited me to answer a question on Zhihu: Why is the last a 1 not 5?

The topics are as follows:

 console.log(a)
if (true) {
  a = 1
  function a() {}
  a = 5
  console.log(a)
}
console.log(a)

My first reaction was: undefined, 5, 5. I guess it's the same as the title

Analyze a wave

Suppose there is no if(true), that is, the following code:

 console.log(a)
a = 1
function a() {}
a = 5
console.log(a)
console.log(a)

So what is the answer?

a(), 5, 5

This explains two properties

1. Variables, function hoisting, and functions have more weight than variables
2. When a is not declared with var, a=XX is declared with var by default

The knowledge points of variable and function promotion are as follows:

Variables will be promoted, functions will also be promoted, and function promotions have higher priority than variables, as in the following example:

 console.log(a)
console.log(a())
var a = 1
function a() {
  console.log(2)
}
console.log(a)
var a = 3
a = 4
console.log(a)
console.log(a())

a(), 2, 1, 4, a is not a function

Looking back at this topic

 console.log(a)
if (true) {
  a = 1
  function a() {}
  a = 5
  console.log(a)
}
console.log(a)

if (ture) {} , forms a scope, locks this variable, function a(){} cannot escape. In other words, only the {} block-level identifier is in, function a() {} is in the block-level scope, that is, in if (ture) {} this block-level role Under the domain, it will not be promoted to the global top level, but under if(true){} , that is, when the code executes:

 console.log(a)
if (true) {
  +function a() {};
  a = 1;
  -function a() {};
  a = 5;
  console.log(a);
}
console.log(a)

If you print a before a = 1 , the value of a is function a(){}

Therefore, in the global environment of this question, there is no variable promotion, and the value written in the first line console.log(a) because a cannot be found, so the value is undefined

Entering if(true) {} in, function a(){} function improved, and the weight maximum weight, so that a previous assignment for block-level scope function a() {} , window.a undefined

After the code is executed to function a() {} , the a in the block-level scope is still 1, but the global variable a is assigned to 1

Executed to a = 5 , the traditional assignment affects a in the block-level scope without affecting the global variable a, so the second printed console.log(a) is 5, the third console.log(a) is 1

So the question is, why is the global variable a assigned to 1 as soon as function a(){} is executed?

I fell into deep thought, and later found in the answer that Yunbu Duanshan answered, saying yes

For historical reasons, in order to be compatible with the previous ES5 syntax, some behaviors of function declarations in block-level scope are specified in the specification, and each browser implementation may be different.

Simply put, function declarations in block-level scope behave like var, and they will declare a variable with the same name in the global scope (that is, a property with the same name is attached to the window, and the default value is undefined), because ES6 encounters a block level scope, an environment record will be created based on the block-level scope to store the variables in the current block-level scope, so this function declaration will be promoted to the top of the block-level scope (not the top of the global scope)

ECMA262 Catalog B

The JavaScript we learned is ECMAScript, but when we run the code on the browser, we must follow the browser's standards. There will be some private goods in the browser. The most classic is __proto__ , which forces ECMA adoption. Having said that, according to the meaning of this dear friend

 // 因为 function a() 声明过，所以全局有个 window.a
console.log(a)
if (true) {
  // 声明归声明，但是函数提升提升与作用域相关，所以提升至此块级作用域顶部
  a = 1
  // 块级作用域中的 a 被赋值为 1
  function a() {}
  // 原地爆炸，执行函数后，全局 window.a 被赋值为块级作用域中的 a
  a = 5
  // 块级作用域中的 a 又被赋值为 5
  console.log(a)
}
console.log(a)

The strangest thing is that after executing function a() {} , the global window.a is assigned and is a in the block-level scope

This thing is not over! !

Wait a minute, I'm just kidding, if I really encounter this kind of problem at work or in an interview, I may still not be able to solve it.

Too weird, this is not the scope of the exam (block scope, function hoisting, variable hoisting)

so go ahead

This article participated in the SegmentFault Sifu essay "How to "anti-kill" the interviewer?" , you are welcome to join.