preface

There is a Scope feature in JavaScript, namely Scope, which is not well understood in the learning process. Let’s talk about Scope here.

What is a scope?

In Baidu Encyclopedia, we can find the definition of scope is

Scope: a programming concept. Generally speaking, the name used in a piece of program code is not always valid/available, and the scope of the code that defines the name’s availability is the scope of the name.

In other words, scopes determine the visibility and accessibility of variables and other data in your code. Here’s an example to help you understand

Function outSide() {var tt=" 1"; } console.log(tt); // Uncaught ReferenceError: TT is not definedCopy the code

Tt is undeclared in the global scope. Console. log(tt) is in the global scope, so it can’t get the value of tt. Scope determines the lifetime of a variable (related to the function and block-level scope). Any variable has a lifetime. The popular understanding of scope is the accessible scope of a function, that is, the scope controls the visibility and lifetime of variables and functions. A scope is a small room in which variables do not leak out. That is, the greatest use of scopes is to isolate variables so that variables with the same name do not conflict in different scopes because they are all in their own little room.

What scopes are there?

  1. Global scope
  2. Function scope
  3. Block-level scope

It is important to note that JavaScript did not have block-level scope prior to ES6, which introduced the concept of block-level scope.

Third, the role of these scopes

  • Global scope

The scope that a variable declared globally has is called a global scope, meaning that the variable can be accessed anywhere in the code. So how do you define a variable so that it has a global scope

1. Outermost function and variables outside outermost function

Function outSide() {var tt=" data 1"; } outSide()// Data console.log(dd)// I am a variable defined outSide the outer function console.log(tt); //Uncaught ReferenceError: tt is not definedCopy the code

The outer function outSide() and the outer variable dd can be accessed globally, while the inner variable tt cannot be accessed, because the inner variable TT is in the domain of the function. The access result is Uncaught ReferenceError: tt is not defined

2. Objects that are not defined but are directly assigned

Function outSide() {tt=" data 1" var dd=" data 2" console.log(dd)} outSide() console.log(tt)Copy the code

Here we can see that TT, which was in the function domain, can be accessed because it now has the global domain

3. All properties of window objects have a global domain

The built-in properties of Windows generally have global domains, such as window.name, window.status, and so on

Although variable definitions in the global domain can be accessed from anywhere in the code, there are disadvantages, such as naming conflicts, that can be inconvenient in future collaboration with others.

  • Function scope

A function scope is the opposite of a global scope. It declares variables inside a function and belongs to a local scope. All variables belonging to this function can be used and reused within the scope of the whole function.

  • Block-level scope

After ES6, block-level scopes can declare variables through es6’s new let and const commands. The declared variables can only be accessed within the specified block scope, thus isolating variables.

Block-level scopes are created when ① inside a function ② inside a code block ({})

Note that partial block statements do not create a new block-level scope, such as if, switch, for, while, etc. Instead, variables defined in these statements are stored in the existing scope

if(true) {

Var dd=" data 1"} console.log(dd)Copy the code

The result shows that the variable DD, which was originally in the domain of function definition, can be accessed globally.

Let can limit the scope of variables to the current code block, which is why it is used to define variables instead of var. It has the same syntax as var. Let variables are not promoted to the top of the code block, as opposed to var variables, because when parsing code, the JavaScript engine also notices let declarations that appear after the block. However, undeclared variables cannot be referenced in any way until then. The moment of execution prior to the LET declaration is known as a “temporal dead zone” in which references to any later declared variables will raise a ReferenceError. So if you want to use let declared variables globally, you have to manually declare them at the top.

Console. log(name)//undefined var name="yyds" console.log(ageCopy the code

The above is obtained from personal study, if there is inaccurate or doubt, you can discuss and correct in the comments, thank you.