This is the 11th day of my participation in Gwen Challenge

Original statement

This article has been reprinted by many websites. I hereby declare that both the original Turing community article and the gold digging article are my own creation, and the other sources are reprinted by others. This is a study note for the art of JavaScript DOM Programming.

preface

Before the JavaScript engine is officially compiled, it does a pre-compilation, in which variable and function declarations are pushed to the top of the current scope before any further processing takes place.

Variable ascension

Not using block-level scopes:

The source code:

console.log(msg); // undefined var msg = "This is a message"; console.log(msg); // This is a message function fn () {console.log(hello); // undefined var hello = 'hello world'; console.log(hello); // hello world } fn();Copy the code

JavaScript parser parsing flow:

Var MSG. Console. log(MSG) is not assigned; // undefined msg = "This is a message"; // console.log(MSG); This is a message function fn () {var hello; Console. log(hello); console.log(hello); // undefined 'hello '= 'hello world'; // Console. log(hello); // hello world } fn();Copy the code

ES5 has only global and functional scopes, while ES6 starts with block-level scopes. Variables created using the ES6 syntax of let and constants created using the const syntax do not have variable promotion.

Using block-level scopes:

console.log(msg); //Uncaught ReferenceErrord let msg = "This is a message"; // Console. log(MSG) is not executed; Function fn () {console.log(hello); function fn () {console.log(hello); //Uncaught ReferenceErrord let hello = 'hello world'; // Console. log(hello) was not executed; } fn();Copy the code

IIFE and block-level scope

There are three common ways to write JavaScript functions.

1. Function keywords, also known as function declaration statement writing

function foo(){}; foo();
Copy the code

2. Function literals, also known as function expression writing

var foo = function(){}; foo();
Copy the code

3. Funtion () constructor

var foo = new function(): foo();
Copy the code

Sometimes you need to call a function immediately after it has been defined. The Function is called an instant-invoked Function and is called IIFE(Imdiately Invoked Function Expression). Block-level scoping can be achieved through function expressions that are invoked immediately.

The JavaScript engine dictates that if the function keyword appears at the beginning of a line, it should be interpreted as a function declaration statement, and the declaration statement must have a function name. So the following code will get an error from demo.

function () {}; //Uncaught SyntaxError: Unexpected token (
Copy the code

The correct way to write this is to give the function declaration a function name.

function foo() {}; //undefined
Copy the code

We then combine the function declaration statement with the JavaScript grouping operator, which seems pointless and throws an error:

function foo() {} (); //Uncaught SyntaxError: Unexpected token )
Copy the code

The error is that the JavaScript grouping operator needs to specify a value that cannot be null.

The correct combination:

function foo() {} (0); / / 0Copy the code

or

function foo() {}; (0); //0 is equivalent to 0.Copy the code

This simply implements a combination of function declaration statements and error-free grouping operators.

Therefore, we need to change function declaration statements to function expressions and combine functions with grouping operators. This eliminates the need to specify a function name. This expression is executed immediately when the page is loaded, without the need to call a separate function. After execution, variables declared by code blocks within a function will be valid only in local scope. Cannot be accessed by the outer layer.

(function () {} () );
Copy the code

or

(function () {}) ();
Copy the code

In ECMAScript6, block-level scopes have virtually eliminated the need for the widely used execute now function expressions (IIFE).

Function () {var TMP = 0; } ()); // block level scope {let TMP = 0; }Copy the code

Function increase

Function promotion works the same as variable promotion, but JavaScript only has function declaration statements.

The source code:

console.log(msg1); // function msg1() {};
console.log(msg2); // undefined
function msg1() {}
var msg2 = function() {}
Copy the code

JavaScript parser parsing flow:

function msg1() {}; // The entire code block is promoted to the beginning of the file console.log(msg1); console.log(msg2); var msg2 = function() {}Copy the code

Reference:

Take a closer look at IIFE, part 3 of the closure series

ECMAScript introduction to 6

Task 1: Zero Base JavaScript Coding (part 1)