Recently I have brushed up interview questions and often mentioned variable promotion, so today I will organize my thoughts on this topic.
Note: All the content in this article is based on "strict mode" ("use strict")
Variable promotion
console.log(a) // undefined
var a = 1
The code is output first, and then declared, it should output "a is not defined"
But in fact, when a is output, a does not report "a is not defined"
indicating that a has been declared and has not been assigned.
This phenomenon in which the declaration position is raised to the highest scope is the so-called variable promotion.
It also tells us that an important information
declaration and assignment can be performed separately
Function promotion
We all know that there are two ways to write functions
// FN
function NAME() {
}
// NF
var NAME = function () {
}
Normally, the two writing
methods are equivalent, but in terms of improvement, there is a subtle difference between the two. According to the order of the NAME, the two methods are temporarily named FN and NF respectively.
console.log(NAME) // ƒ NAME() { }
function NAME() {
}
/* 区分两段代码 */
console.log(NAME) // undefined
var NAME = function () {
}
It’s a very strange phenomenon, no "NAME is not defined" is reported, indicating that the variables of both have been promoted, which is no different from the promotion of constants.
NF outputs undefined, which corresponds to the above conclusion "declaration and assignment can be executed separately."
FN can output the corresponding function, indicating that when the declaration is promoted, the assignment is also promoted.
We can understand it as: FN writing assignment is promoted along with the declaration; NF writing assignment is performed in place.
This is the difference between FN and NF
Variable promotion mashup function promotion
Remember two points
- Declaration and assignment can be performed separately
- FN writing assignment is promoted along with the declaration
Let’s disassemble the problem and analyze it, but it’s not complicated. Let’s look at a few examples.
Example 1
var fun2 = 3
function fun2() {
console.log(fun2) }
console.log(fun2) // 3
/* 解析成 */
var fun2
function fun2() {
console.log(fun2) }
// 以下正文
fun2 = 3
console.log(fun2) // 3
Example 2
var fun2 = 3
var fun2 = function () {
}
console.log(fun2) // ƒ () { }
/* 解析成 */
var fun2
// 以下正文
fun2 = 3
fun2 = function () {
}
console.log(fun2) // ƒ () { }
Example 3
console.log(a)
console.log(foo())
var a = 1
function foo() {
return 2
}
/* 解析成 */
var a
function foo() {
return 2
}
// 以下正文
console.log(a)
console.log(foo())
a = 1
in conclusion
- The phenomenon that the variable declaration position is promoted to the highest scope is "variable promotion"
- Declaration and assignment can be performed separately
- FN writing assignment is promoted along with the declaration; NF writing assignment is performed in place
end