I. Background introduction

Recently, I got to know an online ES6 to ES5 website, so I used the handwritten call method to try online Babel.

function jCall(thisArg, ... args) {
  // ES6 before conversion
  thisArg = thisArg ?? window. . }Copy the code
"use strict";

function jCall(thisArg) {
  var _thisArg, _thisArg2;
  // ES5 after conversionthisArg = (_thisArg = thisArg) ! = =null&& _thisArg ! = =void 0 ? _thisArg : window; . . }Copy the code

Second, ask questions

Null-value merge operator (??) Void 0 = null; void 0 = undefined; _thisArg ! Void 0 == void 0 Why do I write that? With such a question, went to the Internet to search for various materials, and then got the answer.

Void operator

3.1 Understanding of void operator

The void operator evaluates the given expression and returns undefined. From MDN

We know from our tests that the void operator will return undefined regardless of the expression on the right-hand side, and will execute the expression on the right-hand side normally before returning undefined.

3.2 Usage scenarios of the void operator

Based on the above properties we can use the void operator in the following scenarios.

Avoid leakage in arrow functions The arrow function standard allows you to return a value without parentheses in the function body. If a function is called on the right that does not return a value, its return value changes, causing unexpected side effects. To be safe, when a function returns a value that will not be used, use the void operator to ensure that undefined is returned (as shown in the following example), so that when the API changes, the behavior of the arrow function is not affected. From MDN

button.onclick = () = > void doSomething()
Copy the code

The onclick method does not need to accept any return value, and initially our doSomething did not have any return value, but one day our doSomething was changed as required and returned a value, and onclick received an unexpected return value, which caused some problems. We can use the void operator to ensure that the onclick method always returns undefined.

Thisarg = thisarg; thisarg = thisarg; thisarg = thisarg; thisarg = thisarg Void 0 == undefined; void 0 == undefined; Here we need to say a detail problem in JS, this is also an important harvest that I browse data this time!!

4. Undefined

The global attribute undefined means the original value undefined. It is a JavaScript primitive data type. From MDN

JS undefined is a read-only property of the global object, or a variable in the global scope. The value of this property (variable) is the original data type of JS undefined.

The amazing thing is that we can override undefined in a non-global scope like function scope, declare a variable named undefined, because undefined is not a variableReserved words.

So that’s why converted ES5 uses void 0 instead of undefined.

That’s why the title of this section is called variable undefined, not keyword undefined.

Void 0, void ‘hello’, void 0, void ‘hello’, void 0, void ‘hello’, void 0, void ‘hello’, void 0, void ‘hello’, void 0

This brings up another reason to use void 0, which takes up fewer bytes than undefined. So we’re going to choose void 0. In fact, many JS compression tools use void 0 instead of undefined

Five, the summary

Through this attempt to online Bebel, let me have more understanding of JS details

  1. The void operator evaluates the given expression and returns undefined.
  2. Undefined is a variable, not a keyword, and can be redeclared and assigned in non-global situations.

Js from a small white learning record, wrong place welcome correction.