Recently, I saw a master mention during a live broadcast that in a large company, the var variable cannot be directly assigned undefined, but must be assigned using void 0.
// Bad
var a = undefined;
// Good
var a = void 0;
What is void 0? Aren't these two assignment effects the same?
What is the void operator?#
MDN describes it as follows:
The void operator evaluates the given expression and then returns undefined.
The void operator evaluates the given expression and then returns undefined.
This operator allows evaluating expressions that produce a value into places where an expression that evaluates to undefined is desired.
This operator allows evaluating expressions that produce a value into places where an expression that evaluates to undefined is desired.
The void operator is often used merely to obtain the undefined primitive value, usually using "void(0)" (which is equivalent to "void 0"). In these cases, the global variable undefined can be used.
The void operator is often used merely to obtain the undefined primitive value, usually using "void(0)" (which is equivalent to "void 0"). In these cases, the global variable undefined can be used.
What is undefined?#
undefined is one of the seven primitive data types in JavaScript.
Tips: The characteristics of primitive data types: the value is stored locally in the variable, and after assigning it to another variable, changing the other variable does not affect the original value, and the variable is stored in the stack area (the stack area refers to the stack memory in memory).
At the same time, undefined is also a property of the global object. In other words, it is a variable in the global scope. The initial value of undefined is the primitive data type undefined.
Why use 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 = 1;
console.log(undefined); // 1
}
test();
console.log(undefined); // undefined
After assigning a value, the undefined you extract is no longer equal to undefined. Of course, if we use undefined on the window object, it may also be assigned a value. So the undefined you use directly may not be 100% reliable. This is also the first purpose of void.
Other uses of void#
Immediately Invoked Function Expression (IIFE)#
When using an immediately invoked function expression, the void operator can be used to make the JavaScript engine recognize the "function" keyword as a function expression rather than a function declaration (statement).
Before this, we used this syntax to make a function immediately invoked (executed when defined):
(function IIFE(){
// ...
})()
And void can achieve the same effect as the above code: convert function declaration to function expression.
void function IIFE(){
// ...
}()
JavaScript URIs#
This is the method I used most before, and it is used when preventing the default event of an anchor tag.
<a href="javascript:void(0);">This link will not do anything when clicked. If you remove void(), the entire page will be replaced with the character 0 when clicked.</a>
<a href="javascript:void(document.body.style.backgroundColor='green');">Clicking this link will make the background of the page turn green.</a>
Avoiding leaks in arrow functions#
In the arrow function standard, it is allowed to directly return a value without using parentheses in the function body. If a function that originally did not return a value is called on the right side, changing its return value will cause unexpected side effects. For safety, when the return value of a function is not used, the void operator should be used to ensure that undefined is returned. In this way, when the API changes, it will not affect the behavior of the arrow function.
button.onclick = () => void doSomething();
This ensures that when the return value of doSomething changes from undefined to true, it will not change the behavior of the function.
References#
void operator - JavaScript | MDN