Photo by Johnson Cameraface onĀ Flickr
In many languages,
voidis a type that has no values. In JavaScript,voidis a operator that takes an operand and returnundefined. This is not useful, and it is very confusing. Avoidvoid. ~ Douglas Crockford. JavaScript: The Good Parts
If you agree with that statement I do not want to waste your time, jump out from here and keep saving the world. š If not, letās discover why void is useful and you should not avoid it.
Why void confuses?
void 0 === undefined //true š° š± šµ
Why? How? What is void? Is this even JavaScript?
Answers which I got when asked developers about the void and the main confuse here is that developers forgot or have not known or find strange.
The [**void**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void) operator evaluates the given _expression_ and then returns [undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined "The global undefined property represents the primitive value undefined. It is one of JavaScript's primitive types."). That is all what you need to know about void operator.
How void can beĀ useful?
1. Evaluate expression and jump out from aĀ function
One time Iāv done a code review and found a method like that:
function doStuff(a) {if (a) {doSomething()} else {doSomethingElse()return}
doSomethingMore()
}
So, from this method you may see that in case doSomethingElse() we return undefined and jump out from the function. Letās save one line and make it more readable with void.
function doStuff(a) {if (a) {doSomething()} else {return void doSomethingElse()}
doSomethingMore()
}
From void description you know that it evaluates doSomethingElse() and return undefined. That exactly what we need š
2. Check for undefined
Old browsers allowed undefined to be re-assigned undefined = 'test'. However, this was fixed in 2009 with ECMAScript 5.
Annotated ES5_This is an annotated, hyperlinked, HTML version of Edition 5.1 of the ECMAScript Specification, the source for which isā¦_es5.github.io
If you need to support old browser e.g. IE8, here is a helper function š
function isUndefined(value) {return value === void 0}
3. preventDefault() behavior for aĀ link
We all know that a tag without href attribute is not valid, but in HTML5 href attribute is not required, so you can omit.
HTML 5.1: 4.8. Links_Similarly, for and elements with an href attribute and a attribute, links must be created for the keywords of theā¦_www.w3.org
Somehow, if you need to prevent hrefworks use void.
<a href="javascript: void(0)">About</a>
4. Immediately Invoked Function Expressions
When using an immediately-invoked function expression, void can be used to force the function keyword to be treated as an expression instead of a declaration.
void function IIFE() { // do something ...}()
Conclusion
void is a simple operator and I find it useful. I guess, more developers do not use it because they have not touched it while learning. Of course, if a team find it confused better to discuss. In help, ESLint has the rule (no-void). Happy coding! š
š Thank you for reading. Suggestions, comments, thoughts are welcomeĀ :)
If you like this, clap, follow me on medium, twitter, github share with your friends āļø