Detailed explanation of JavaScript scope

Scope is a collection of accessible variables.

JavaScript scope

In JavaScript, objects and functions are also variables.

In JavaScript, the scope is a collection of variables, objects, and functions that can be accessed.

JavaScript function scope: The scope is modified within the function.

JavaScript local scope

Variables are declared within the function, and variables are local scopes.

Local variables: Only accessible inside a function.

// The carName variable cannot be called herefunction myFunction() {
  var carName = "Volvo";
  // The carName variable can be called in the function}

Because local variables only act within the function, different functions can use variables of the same name.

Local variables are created when the function starts executing, and local variables are automatically destroyed after the function is executed.

JavaScript global variables

Variables are defined outside the function, that is, global variables.

Global variables have global scope: All scripts and functions in the web page can be used.

var carName = " Volvo";
 
// Here you can call the carName variablefunction myFunction() {
  // The carName variable can be called in the function}

If the variable is not declared within the function (the var keyword is not used), the variable is a global variable.

In the following example, carName is inside the function, but is a global variable.

// Here you can call the carName variable 
function myFunction() {
  carName = "Volvo";
  // Here you can call the carName variable}

JavaScript variable life cycle

The JavaScript variable lifecycle is initialized when it is declared.

Local variables are destroyed after the function is executed.

Global variables are destroyed after the page is closed.

Function parameters

Function parameters only work within the function and are local variables.

Global variables in HTML

In HTML, global variables are window objects: All data variables belong to window objects.

//It can be used here 
function myFunction() {
  carName = "Volvo";
}

Do you know?

Your global variables, or functions, can override variables or functions of window objects.
Local variables, including window objects, can override global variables and functions.

Replenish

Let keywords in ES6

let allows you to declare a variable, statement, or expression whose scope is limited to the block level. Unlike the var keyword, the variables it declares can only be global or entire function blocks.

let syntax:

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

The variable declared by let is only available in the block or sub-block it declares, similar to var. The main difference between the two is that the scope of the variable declared by var is the entire enclosing function.

Example of the difference between let and var code:

function varTest() {
 var x = 1;
 if (true) {
  var x = 2; // Same variable!  (x); // 2
 }
 (x); // 2
}

function letTest() {
 let x = 1;
 if (true) {
  let x = 2; // Different variables  (x); // 2
 }
 (x); // 1
}

The above is the detailed explanation of the scope of JavaScript. For more information about JavaScript, please pay attention to my other related articles!