Detailed Explanation of Scope and Variables in JavaScript

I. When it comes to variable hoisting, let's first look at a simple piece of code

!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8>
 <title>Document</title>
</head>
<body>
 <script>
  var v = 'hello world';
  alert(v);
 </script>
</body>
</html>

The result of executing the above code is hello world

Then let's take a look at another piece of code:

!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8>
 <title>Document</title>
</head>
<body>
 <script>
  var v='Hello World';
  (function() {
   alert(v);
  })();
 </script>
</body>
</html>

The result of execution is the same as the first piece of code, hello world

Alright, let's take a look at this piece of code next:

!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8>
 <title>Document</title>
</head>
<body>
 <script>
  var v='Hello World';
  (function() {
   alert(v);
   var v='I love you';
   alert(v);
  })();
 </script>
</body>
</html>

The result of the above code execution: The first pop-up is undefined; the second result is I love you. Why is there such a result?

This is related to the variable hoisting mentioned at the beginning. Let's make a summary next:

The last piece of code demonstrates2A knowledge point:

1, variable hoisting

2, scope chain

Firstly, let's talk about the scope chain. When JavaScript accesses a variable, it will first look for whether it has been declared in the current scope (the scope at the time of access), if the variable already exists, then use its value directly, otherwise it will look for the 'parent scope/parent scope, and so on, until the global scope is found.

What is variable hoisting refers to: when JavaScript parses, it always promotes the declaration statements of keywords such as var, function to the top of the scope (note: here only the declaration part is promoted, the assignment is not promoted)

Therefore, as can be seen from the above, the code above is equal to:

!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8>
 <title>Document</title>
</head>
<body>
 <script>
  var v='Hello World';
  (function () {
   var v; //Firstly, the variable declaration under this scope is promoted, but not assigned
   alert(v); //So at this moment it is undefined
   var v='I love you';
   alert(v); //I love you
  })();
 </script>
</body>
</html>

That's all for this article. I hope the content of this article can bring you some help in learning or working, and I also hope to get more support for the Yelling Tutorial!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report any violations, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.

Basic Tutorial