Home > Article > Web Front-end > Common interview questions: JavaScript variable promotion

Common interview questions: JavaScript variable promotion

青灯夜游forward: 2019-11-28 17:14:022288browse

What is JavaScript variable hoisting? This is often asked in interviews. The following article will introduce to you JavaScript variable improvement. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

JavaScript variable hoisting

HoistingJavaScript will move the statement Default behavior to top. [Related course recommendations: JavaScript Video Tutorial]

JavaScript declaration enhancement. In JavaScript, variables can be declared after use. In other words; variables can be used before they are declared. Example 1 gives the same result as Example 2:

Example 1:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>
<p id="demo"></p>
<script>
    x = 5; // 给x赋值5
    elem = document.getElementById("demo"); // 查找一个元素
    elem.innerHTML = x;           // 在元素内显示x
    var x; // 声明 x
</script>
</body>
</html>

Example 2:

!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>
<p id="demo"></p>
<script>
    var x; // 声明 x
    x = 5; // 把5赋值给x
    elem = document.getElementById("demo");
    elem.innerHTML = x;
</script>
</body>
</html>

To understand this, you must understand "declaration promotion" :Hoisting)". Refers to JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or current function).

But this default behavior has been changed in ES6. Variables declared by let and constants declared by const in ES6 will not be promoted!

JavaScript initialization will not be promoted

JavaScript only hoists declarations, not initializations. Example 1 and Example 2 are different results:

Example 1:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>
<p id="demo"></p>
<script>
    var x = 5; // 初始化 x
    var y = 7; // 初始化 y
    elem = document.getElementById("demo"); // 查找一个元素
    elem.innerHTML = x + " " + y;       // 显示x和y
</script>
</body>
</html>

Example 2:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>
<p id="demo"></p>
<script>
    var x = 5; // 初始化 x
    elem = document.getElementById("demo"); // 查找一个元素
    elem.innerHTML = x + " " + y;       // 显示x和y
    var y = 7; // 初始化 y
</script>
</body>
</html>

Declare your variables at the top!

To many developers, variable hoisting is an unknown or overlooked JavaScript behavior. If the developer does not understand promotion, the program may contain errors (Error). To avoid errors, always declare all variables at the beginning of each scope. Since this is how JavaScript interprets code, it's always a good rule to follow.

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of Common interview questions: JavaScript variable promotion. For more information, please follow other related articles on the PHP Chinese website!

JavaScript es6 常量 Error const JS 变量提升

Statement：

This article is reproduced at:51cto.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to use forEach(), Array.map() and Array.filter()? (code example)Next article：How to use forEach(), Array.map() and Array.filter()? (code example)

See more

Common interview questions: JavaScript variable promotion

Related articles