ES6 these exciting little improvements

The new features of ECMAScript 6 (ES6) can be divided into new syntax (e.g. Class), enhanced JavaScript functionality (such as import), and improved JS "bugs" (for example, let keyword). Most blogs will be the three types of new features mixed together introduced, often let just get started ES6 students dizzy vegetables. So I decided to write this article only to introduce the improved JS "defect" part of this feature.

I hope this article will give you a clear idea of how much you can get in return by using only a small number of ES6 new, such as Let, arrow functions, and so on.

OK, let's get started.

1. Block-level scopes

ES5 only function scopes (for example, we have to limit the scope of a code package within a function), which causes a lot of problems. ES6 provides let and const to replace the VAR declaration variable, and the new declarative method supports block-level scopes represented by braces.

Prevent variables from being accessed outside the scope

The following illustration shows that the "bonus" variable declared within an If statement is limited to the scope of if using let, so that it does not affect the variable of the same name outside the scope, which is the same behavior as most other programming languages.

Click the picture to view the larger image

Preventing duplicate declarations of variables

ES6 does not allow you to repeatedly declare variables of the same name with let or const in the same scope. This is useful to prevent duplicate declarations of function expressions in different JS libraries.

For example, the Add function in the following figure:

Click the picture to view the larger image

function expressions that no longer need to be executed immediately (Iife)

In ES5, like the example in the following figure, we need to construct a function expression that executes immediately to ensure that we do not pollute the global scope. In ES6, we can use a simpler brace ({}) and use const or let instead of Var to achieve the same effect.

Click the picture to view the larger image

babel– A tool that converts ES6 code to ES5 code

Our ES6 code will eventually run in the browser. Babel is the most popular tool for converting ES6 to ES5. It has many uses, such as command line, node module, and online compilation. I use the node module in my application to compile the code and use the online compilation to quickly see the difference between the ES5 version of the ES6 code.

The following illustration shows how Babel simulates "let" and "Const" by renaming a variable

Click the picture to view the larger image

The closure in the loop body is no longer a problem

In ES5, a problem arises if the loop has a closed package that accesses variables outside the closure. In ES6, you can use "let" to avoid problems.

Click the picture to view the larger image

Note: You cannot use const here because I is changing, but you can use the const in the new For...of loop.

2. "This" of the lexical scope (through the arrow function)

In ES5, the "This" changes with the location of the function call and the way it is invoked, which brings a painful experience to many developers. ES6 the "This" of the lexical scope brought by the arrow function eliminates the problem.

The "This" attribute of the lexical scope makes the "this" of the variable always point to the object at the lexical declaration.

The "This" question and the two resolutions in ES5:

In the figure below, we want to print a user's name and salary. Suppose we get payroll data asynchronously from the server. Note that when the server returns a result, "this" in the function is "window" rather than "person".

Click the picture to view the larger image

The "This" problem in ES5 and two ways to solve it

How to resolve in ES6:

Simply using the arrow function in ES6 can automatically obtain the "this" of the lexical scope

Click the picture to view the larger image

The 16th line of code demonstrates how to use the arrow function

The following illustration shows how Babel can convert an arrow function to a normal ES5 function:

Click the picture to view the larger image

3. Dealing with "arguments"

In ES5, "arguments" behaves like an array (for example: we can traverse it by length), but it is not a real array. So, all array methods, such as sort, slice, and so on, are not used.

In ES6, we can use a new feature called the rest parameter. It's in the form of ... The name of the parameter (for example: ... args). The rest parameter is a real array, so we can use it on all the available methods on the array.

The following illustration shows the use of the rest parameter:

Click the picture to view the larger image

4. Class

Conceptually, the JS before ES6 does not have the concept of "class" as other object-oriented languages. For a long time, people used the new keyword to construct objects using functions (also called constructors) as "classes."

Since JS does not support native classes, but only simulates them through prototypes, various mock classes are quite confusing to the traditional object-oriented approach, especially when the subclass inherits the parent class, and the subclass calls the parent class's method, and so on.

ES6 brings new syntax and syntax similar to other programming languages, making object-oriented objects very simple.

The following diagram compares the implementation classes in ES5 and ES6:

Click the picture to view the larger image

ES5 Vs ES6 (es6-features.org)

Update: After reading this article, be sure to read: "is" Class "in ES6 the New" bad "part?"

5. Strict mode

Strict mode (use strict) helps prevent problem usage, and it also helps secure the use of JavaScript. In ES5, strict mode is optional, but in ES6 many features require strict mode to be used. So most developers and Babel tools such as the default add use strict to the head of the JS file to ensure that the entire JS file code in strict mode, this habit helps us to write better JavaScript.

Source: Bole Online