A scope in a function

The scope of a function means that all variables belonging to the function can be used and reused throughout the scope of the function (in fact, nested scopes can also be used)

Hide the internal implementation

You can pick an arbitrary fragment from the code you’ve written and wrap it with a function declaration, essentially hiding the code

Most of them are cited from the principle of least privilege, also known as the principle of least authorization or least exposure. This principle states that in software design, the necessary content should be exposed as little as possible and the rest should be hidden, such as the API design of a module or object

To avoid conflict

Another benefit of hiding variables and functions in scope is to avoid conflicts between identifiers of the same name

  1. Global namespace

    Third-party libraries usually declare a variable with a unique enough name in the global scope, usually an object. This object is used as the library’s namespace, and all functions that need to be exposed become properties of the object, rather than exposing their identifiers to the top-level lexical scope.

  2. Module management

    Another way to avoid collisions, similar to the modern module mechanism, is to use one of many modules and explicitly import the library identifier into another specific scope through the dependency manager mechanism.

Function scope

You can hide internal variables and function definitions by adding wrapper functions outside of any code snippet.

var a = 2;
function foo(){
  var a = 3;
  console.log(3);
}
foo(); / / 3
console.log(a); / / 2
Copy the code

This technique solves some problems, but creates additional ones

  1. The name foo contaminates the scope
  2. Foo must be explicitly called to run the code

Js provides a solution to solve these two problems simultaneously

var a = 2;
(function foo(){
  var a = 3;
  console.log(a); / / 3}) ();console.log(a); / / 2
Copy the code
  1. The declaration of the wrapper function(function...Not just in terms offunction...Start.
  2. Functions are treated as function expressions rather than as standard function declarations.

The easiest way to distinguish declared functions from expressions is to look at where the function keyword appears in a declaration (not just one line of code, but in the entire declaration). If function is the first word in the declaration, it is a function declaration; otherwise, it is a function expression

This pattern is so common that a few years ago the community gave it a term: IIFE, for executing functional expressions immediately

Another advanced use of IIFE is to pass parameters in

var a = 2;
(function IIFE(global){
  var a = 3;
  console.log(a); / / 3
  console.log(global.a); / / 2}) (window);

console.log(a); / / 2
Copy the code

Another use of IIFE is to invert the running order of code

var a = 2;
(function IIFE(def){
  def(window); }) (function def(global){
	var a = 3;
  console.log(a); / / 3
  console.log(global.a); / / 2
})
Copy the code

Here def is called as the function passed in, and window is passed as the value of the global argument

Block scope

The following code you must be familiar with

for(var i = 0; i<10; i++){console.log(i);
}
console.log(i) / / 10
Copy the code

We define the variable I directly in the header of the for loop, usually with the intention of using I within the context of the for loop, ignoring the fact that I is bound to an external scope (function or global)

Fortunately, a new let keyword was introduced in ES6 that provides an alternative way to declare variables in addition to var

The let keyword binds variables to any scope they are in (usually {.. } inside)

for (let i = 0; i<10; i++){console.log(i);
}
console.log(i); // ReferenceError
Copy the code

The let declaration is attached to a new scope rather than the current function scope (and is not global)

Let, const

Used to create block-scoped domain variables whose values are fixed constants