Make writing a habit together! This is the 7th day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details

Variables, the cornerstone of the Javascript language, have complex scoped scenarios unlike other languages. Local scope, global scope, and variable promotion are all things we need to know about Javascript variables.

Scope classification

In Javascript, the scope of a variable is determined at variable declaration time; in other words, the scope of a variable is controlled by the position in which the variable is declared.

Currently, there are three ways to declare variables in Javascript: var,let, and const. Let and const are the new declared variable keywords in ES6.

There are two scopes in Javascript: global and local. After ES6, local scopes can be divided into function scopes and block-level scopes introduced in ES6.

1️ disco-global Scope

In a Js script, the outermost scope is the global scope. Any variable declared within this scope is a global variable and can be accessed anywhere in the program.

In the following example, name is declared in global scope, is a global variable, and can be accessed anywhere. ,

// Global Scope

const name = "Public account: The Front end of the Pinellia";

function sayHi() {
  console.log(Hi, `${name}`);
}

sayHi();
// Hello, public account: The front end of the pinxia
Copy the code

Local Scope 2️ dislocal Scope

Variables declared in a code block are local variables that belong to that block.

Variables created in a function using var, let, and const are local variables to the function. Inside the function is the scope of the function.

Declare variables using let and const in a code block (if, for, while, etc.). Let and const create a new block-level scope for the code block.

Function and block-level scopes can be nested. In this case, multiple nested scopes can be used to access variables in other scopes or internally.

Function scope

To make it easier to understand, let’s take an example: for example, the following school, everything inside the school belongs to the school. There are dormitories in the school and dormitories in the dormitories. Each has its own scope.

var locales = {
 school: function() {          // School is a local scope
    var student = "Public account: The Front end of the Pinellia";

    var apartment = function() {   // The apartment here is also a local scope
      var room = function() {  // Room is still a local scope
        console.log(student);  // Public account: do front-end pinxia}; room(); }; apartment(); }}; locales.school();Copy the code

In the example above, we want to get student in room, because student is defined in its parent scope, school, so we can get this variable. Var student = “”; And the console log (student); Switching the position directly raises an error: we cannot reach the inner scope from the outer scope

Back to the above example, we wanted to find the student. How did we find the student? First, we searched in his dormitory but failed to find the student.

This type of lookup is called the method scope. The static structure of the program determines the scope of the variables. The scope of a variable is defined by its location in the source code, and nested functions can access variables declared in their external scope. No matter where or even how a function is called from, its lexical scope depends only on where the function is declared.

Block-level scope

Let’s look at block-level scopes with an example

function f(n) {
  if (true) {
    const msg = 'hello';
    let name = n;
    console.log(msg + "" + name); 
  }
  console.log(msg + "" + name); 
}

f('Public account - Pinellia in front');   
Copy the code

In this example, we can see that let and const are not accessible outside the block-level scope.

What if we replace let and const with var?

function f(n) {
  if (true) {
    var msg = 'hello';
    var name = n;
    console.log(msg + "" + name); 
  }
  console.log(msg + "" + name); 
}

Copy the code

It works fine! This proves that when we use the var keyword, the variable is accessible throughout the function scope!

In JavaScript, you can specify variables with the same name in multiple levels of nested scope. In this case, local variables take precedence over global variables. If you declare a local variable with the same name and a global variable, the local variable takes precedence when you use it in a function or block. This type of behavior is called shadowing. Simply put, internal variables overshadow external variables.

The JavaScript interpreter starts at the innermost range being executed at the time and continues until the first match is found, regardless of whether there are other variables with the same name in the outer level. Let’s look at an example

Var test = "I am global "; Function testScope() {var test = "I am part "; console.log (test); } testScope(); // output: I'm local console.log(test); // output: I am globalCopy the code

Even if the name is the same, local variables do not overwrite the global variable testScope() after the function is executed. But this is not always the case. Let’s consider:

var test = "I'm the big picture.";

function testScope() {
  test = "I'm part of it.";

  console.log(test);     
}

console.log(test);     // output: I am global

testScope();           // output: I am local

console.log(test);     // output: I am local
Copy the code

This time, the local variable test overrides the global variable of the same name. When we run the code inside the testScope() function, the global variables are reassigned. If a local variable is assigned var without first declaring it with the keyword, it becomes a global variable. To avoid such situations, local variables should always be declared before they are used. Any variable declared with a keyword in a function var is a local variable.

Note: inIn strict modeIt is an error to assign a value to a variable without first declaring it.

conclusion

  • varVariables are function scopes
  • let and constVariables are block-level scopes