This is the 10th day of my participation in the August Text Challenge.More challenges in August

preface

In the last article, we covered the const and let commands, with a little scope. So let’s go back to the book and talk about the scope of JS.

Before ES6, JS scopes were global and function scoped only. Es6 added block-level scopes. Let’s expand on the scope of JS.

Global scope

A global scope, as the name implies, has a topmost scope that can be accessed globally.

var name = 'the answer cp3'
function getName () {
  console.log(name) / / the answer cp3
}
getName()

if(true) {
 console.log(name) / / the answer cp3
}
Copy the code

As you can see, variables declared in the global scope can be accessed anywhere.

Function scope

A function scope is a scope that exists inside a function and can only be accessed inside a function.

function getName () {
  var name = 'the answer cp3'
  return name
}
getName() / / the answer cp3
console.log(name) / /"
Copy the code

As you can see, variables declared inside getName are not accessible outside the scope.

Block-level scope

Block-level scopes were introduced in ES6 because previous scopes could have the following problems:

  • Variable promotion causes the variable to be overwritten

    var name = 'the answer cp3'
function getName () {
 console.log(name)
 var name = 'cp3'
}
getName() // undefined
Copy the code

    The var declaration causes the variable to be promoted, resulting in the printed name being undefined.

  • In a for loop, the var declares variables that can be accessed after the for loop ends

    for(var i = 0; i < 5; i++) {
  console.log(i) // 0 1 2 3 4 5
}
console.log(i) / / 5
Copy the code

Block-level scopes, which restrict declarations of variables to be accessible only in this region. It is usually a block-level scope of the inner code blocks wrapped in {}, such as if statements, while statements, for loops, try-catch statements, etc

In addition, block-level scopes are typically used in conjunction with lets and const.

Rewrite the above example:

for(let i = 0; i < 5; i++) {
  console.log(i) // 0 1 2 3 4 5
}
console.log(i) // i is not defined
Copy the code

The I declared by let is accessible only within the for loop, and not after the for loop ends.

Variable declarations between block-level scopes do not affect each other, and declarations in the inner layer can override variables with the same name in the outer layer.

As shown in the code:

if(true) {
  let name = The 'with answers'
  console.log(name) / / the answer
}
if(true) {
  let name = 'cp3'
  console.log(name) // cp3
}
Copy the code
if(true) {
  let name = The 'with answers'
  if(true) {
     let name = 'cp3'
     if(true) {
        let name = 'the answer cp3'
        console.log(name) / / the answer cp3}}}Copy the code

One additional point (refer to the block-level scope from Yifeng Ruan) :

Function declarations in block-level scope (this is not recommended) will be promoted if you are running code in an ES6 browser, and not if you are running in another environment.

// It is not recommended that function declarations be declared in the global scope or function scope
if(true) {
 console.log(fn) // Fn is promoted in es6 browsers
 function fn() {}}Copy the code

Block-level scopes must have {} wraps

conclusion

This is my summary of js scope:

  • Global scope, a scope accessible globally
  • Function scope, only the scope inside the function exists
  • Block-level scope, only in{}Inside the code block to access the scope, matchlet/constUse, can avoid variable promotion and variable pollution and other problems

Thank you for reading.