What is the scope?

Almost all programming languages need to be able to do is “store data in variables”, otherwise the language really wouldn’t have much advantage these days.

The normal process for storing data in variables is to create a variable and store values into it.

But where do these variables live? How do I read the values of these variables? How do I change the value of a variable? Where can I read and where can I not read? Every programming language has a set of such rules, and this rule is called scope.

Using a quote from JavaScript You Don’t Know, Volume 1:

You need a well-designed set of rules to store variables and make them easy to find later. This set of rules is called scope.

Js’s scope rules are not as strict as those of other languages (such as C, Java, etc.), and can sometimes be confusing for beginners.

This article will cover the following scopes:

  • Global scope (Window/global)
  • Function scope
  • Block scope ({})
  • Dynamic scope (this is roughly explained)

This article focuses on a few things you need to know about everyday work, so it doesn’t go into more in-depth topics like lexical scope.


Variables and Constants

Before we get to scope, we need to understand how JS variables and constants are declared and used.

Js variable declarations have two types: var and let.

The syntax for declaring variables using var or let is the same, except for the two keywords.

var a = 123
let b = 456
Copy the code

Var declares variables with the same names. The following declaration overrides the previous declaration. Click here to see how var is used

Let is used more rigorously and is proposed by ES6. Variables declared using let cannot be declared twice. Click to see let usage

Js constant declarations currently have only one type: const.

const pi = 3.14
Copy the code

We declare constants using const. Once defined, we cannot change the memory address.

So if you declare an object constant, you can change the properties of the object, because that’s not changing the memory address. Click to see the use of const


Global scope

Variables declared under window are in global scope.

Such as

var a = 123
Copy the code

In contrast, local scopes, such as function scopes, block scopes, and so on, are discussed below.

Pay attention to

Note that in JS, variables that are not declared using var and let are not technically called variables. Can only be called a property under Window/Global.

a = 123
Copy the code

Var a = 123; var a = 123; var a = 123; Variables (using var and let declarations) cannot be deleted with DELETE.


Function scope

A variable declared inside a function that belongs to the function scope. It is not accessible outside the function.

function test() {
  var a = 123
  b = 456
  console.log(a)
  console.log(b)
}

test() // print 123, then print 456

console.log(b) / / output 456
console.log(a) // a is not defined
Copy the code

In the above example, b is mounted to window/global because it is not defined by var/let/const.

So you can access B outside of the function, but you can’t access A.


Block scope

{} uses let variables and const constants that are block-level scoped.

if (true) {
  var a = 123
  let b = 456
  const c = 789
}
console.log(a) / / output 123
console.log(b) // a is not defined
console.log(c) C is not defined
Copy the code

Using var in this case, the variables defined are global scoped.

Use let and const.


Dynamic scope

The dynamic scope mainly refers to this.

Dynamic scope does not care how or where functions and scopes are declared, it only cares where they are called from (except for arrow functions).

window.a = 3
function test () {
  console.log(this.a)
}

test.bind({ a: 2}) ()/ / 2
test() / / 3
Copy the code

Here’s another example of JavaScript You Don’t Know, Volume 1

function foo() {
  console.log(a) // 3.
}

function bar(){
	var a = 3
  foo()
}

var a = 2
bar()
Copy the code

Because when foo() can’t find a variable reference to a, it looks for a down the call stack where foo() was called, rather than in the nested chain of scopes for this method.


Extending reading

JavaScript You Don’t Know

Article: JavaScript in-depth lexical and dynamic scoping

[JS] precompile