JavaScript scope

Understand the basics of JavaScript scope

A scope is a set of rules defined in a programming language to determine the value of a variable.

JavaScript usageVocabulary range, Which means that the value of the variable is defined by the position at the time of writing. It doesn’t happen when it’s called, but something else happens,Dynamic Range.

A scope is a set of variables that are visible to a part of the program.

We have a global scope, a block scope and a functional scope. If a variable is defined outside the function or block, the variable will be attached to the global object and has a global scope, which means that the variable can be used in every part of the program.

There is a very important difference between the twovar,letwithconststatement.

Variable defined asvarInside the function is only visible inside the function. Just like function parameters.

Variable defined asconstorletOn the other hand, it is only visible in the block in which it is located.

It is important to understand that a block (identified by a pair of curly braces) does not define a new scope for the followingvar, But indeedletwithconst. New rangevarIs only created when the function is created, becausevarThere is no block scope, but there is a functional scope.

Inside the function, anyvarEven if the variable is declared at the end of the function, the variable defined in it is visible in all function code, because it can still be referenced at the beginning, because JavaScript is actually before the code is executedMove all variable declarations to the top(CalledHoisting). To avoid confusion, please be sure to declarevarVariable at the beginning of the function.

This is what I mean. Even if you declarevarThe variable is at the end of the function, and its declaration is moved to the top:

function run() {
  console.log(`${name}`)
  var name = 'Flavio'
}

run()

This will display "undefined" because what actually happened is:

function run() {
  var name;
  console.log(`${name}`)
  name = 'Flavio'
}

run()

letwithconstDon't "suffer" hoisting. If you use one of them in the example above, you will get an error:ReferenceError: name is not defined.

In JavaScript, the variables of the parent function can also be used in internal functions. The scope of the internal function also includes the scope of the parent function, which is called a closure (we will discuss this more extensively later).

You need to pay attention to one thing. In non-strict mode, if a variable is used without declaration, the variable will be appended to the global scope no matter where it is executed. This may be the source of the error. Therefore, make sure to always declare them before using them. Please be aware of this, but this is another reason why strict mode is used by default, and it can solve this problem. We will discuss strict mode later.

Remember: any variable defined in the function (or block) with the same name as the global variable will take precedence over the global variable and will be shaded.

This printundefined:

var name = 'Roger'

function run() { console.log(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) var name = ‘Flavio’ }

run()

This will raise an errorReferenceError: name is not defined:

let name = 'Roger'

function run() { console.log(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) let name = ‘Flavio’ }

run()

Download mine for freeJavaScript beginner's manual


More js tutorials: