directory

  1. What is void?
  2. The role of the void
  3. Void priority
  4. The implementation of void
  5. Why void?

preface

A couple of days ago I was working on a common base library for my project. I came across this util function while looking at the moment.js source code. This function just checks if the input is undefined, that’s not the key, the key is void and that caught my eye, why don’t WE just use input === undefined? I’m going to use this form. With that in mind we’re going to take a look at the JavaScript void operator today.

export default function isUndefined(input) {
    return input === void 0;
}
Copy the code

1. What is void?

The void operator evaluates the given expression and returns undefined. Syntax is void expression. Void is a unary operator that can appear before an operand of any type and return undefined, ignoring the return value of the operand. Void is to the left of an expression. Expressions to the right of void can be parenthesized (for example, void(0)) or unparenthesized (for example, void 0).

2. The effect of void

1. JavaScript URIs

If you remember, we’re using this when we’re blocking the default event of the A tag.

<a href="javascript:void(0);">
<a href="javascript:void(0);">If void() is removed, the entire page is replaced by a single character 0.</a>
<p>Even in the chrome<a href="javascript:0;">It doesn't change, it's going to be a string 0 in Firefox</p>
<a href="javascript:void(document.body.style.backgroundColor='green');">Clicking this link turns the page background green.</a>
Copy the code

Note that while this is possible, using javascript: pseudo-protocols to execute javascript code is not recommended, instead binding events to link elements is recommended.

2. The function expression that is called immediately

When using a function expression that executes immediately, you can use the void operator to have the JavaScript engine recognize a function keyword as a function expression rather than a function declaration.

void function iife() {
    var bar = function () {};
    var baz = function () {};
    var foo = function () {
        bar();
        baz();
     };
    var biz = function () {}; foo(); biz(); } ();Copy the code

3. Avoid leakage in arrow functions

The arrow function standard allows you to return values 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.

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

Ensure that doSomething does not change the behavior of the function when its return value changes from undefined to true.

3. Void Priority

Since the void operator has a higher precedence (14) than the normal operator, parentheses should be used to specify the operands that the void operator operates on to avoid raising errors. In the following example, because the first line does not use parentheses, the void operator takes precedence, which is equal to (void 2) -1, which is undefined -1, and the result is NaN. In the second line, the parentheses include (2-1), so the precedence is 2-1. Void (1) = undefined.

console.log(void 2 - 1);  / / returns NaN
console.log(void (2 - 1));  / / returns undefined
Copy the code

4. Execute void

In ECMA 262, there is an explanation of the execution steps of void.

  1. UnaryExpression is executed and the return value is assigned to expR
  2. Calling GetValue (expr)
  3. Returns the undefined

Note the last sentence: GetValue must be called, even if its value is not used, but this expression can have side effects. What this side effect actually is, is not explained. Void xx(); void xx(); void xx(); void xx(); Input === undefined in moment.js.

5. Why void?

We know that undefined is a reserved word in JavaScript. Since it is a reserved word, we can assign a value to it.

function test() {
    var undefined = "Fish ER who doesn't like cats.";
    console.log(undefined); // Don't like the cat fish er
}
test();
console.log(undefined); // undefined
Copy the code

The value of undefined is not undefined after the assignment, although if we use undefined on the window object, we can also assign it. So if you just use undefined, it’s not 100% reliable. Therefore, in many frameworks or basic JS libraries, using void to get undefined is the general rule. For example, underscore. Js, backbone. js, and underscore. Js all use void 0 instead of undefined in their source code. • moment. Js

export default function isUndefined(input) {
    return input === void 0;
}
Copy the code

• Backbone. Js

if(callback ! = =void 0 && 'context' in opts && opts.context === void 0) opts.context = callback;
Copy the code

• the underscore. Js

_.isUndefined = function(obj) {
    return obj === void 0;
}
Copy the code

In addition to using void to ensure that undefined is retrieved, AngularJS sources ensure that undefined is undefined by calling functions without passing arguments.

(function(window.document.undefined) {
    / /...}) (window.document);
Copy the code

conclusion

Using void xx to obtain undefined is more reliable and safe than using undefined directly. Therefore, in many libraries and frameworks, void xx is used to handle undefined, ensuring that the use of undefined is safe and reliable. This approach can also be used for reference in daily project development or packaging.

conclusion

If there is something wrong or bad in the article, please correct it, thank you! Code word is not easy, click a like plus a concern!

reference

• developer.mozilla.org/zh-CN/docs/… • 262. ecma-international.org/5.1/#sec-11… • segmentfault.com/a/119000000… • blog.csdn.net/mm19931027/…