The void operator in JavaScript

Syntax.

    void expr

evaluates expr and returns undefined. Examples:

    > void 0
    undefined
    > void(0)
    undefined
    
    > void 4+7  // same as (void 4)+7
    NaN
    > void(4+7)
    undefined
    
    > var x;
    > x = 3;
    3
    > void(x = 5);
    undefined
    > x
    5

Thus, if you could manually implement void as a function, it would look as follows:

    function void(expr) { // not possible: syntax error!
        return undefined;
    }

Operator precedence. The operator is associated closely with its operand. You should therefore put parentheses around its operand if it contains more than a single token. For example, void 4+7 binds as (void 4)+7.

Three use cases for void. The following subsections describe three use cases for the void operator:

1. Use case: void 0 as undefined
2. Use case: bookmarklets
3. Use case: links that execute JavaScript code

Use case: void 0 as undefined

void 0 and void(0) are the same as undefined, with one exception: undefined can be shadowed or redefined:

    > function a(undefined) { return undefined; }
    > a("hello")
    ’hello’

    > undefined = "foo";
    > console.log(undefined);
    foo

In contrast, void cannot change its meaning (the arrow always points behind the offending token):

    > function b() { var void = function() {}; return void(0); }
    missing variable name
    function b() { var void = function() {}; return void(0); }
    .......................^
    
    > void = "foo";
    syntax error
    void = "foo";
    ......^

In case you were wondering: strict mode does not prevent the value of undefined from being changed.

Best practice. If you are paranoid about shadowing or globally changing undefined, use void 0. Otherwise, use the more descriptive undefined; not everyone reading your code might be familiar with the void operator.

Use case: bookmarklets

Bookmarklets are URLs with JavaScript programs that are “executed in the address bar”. If a bookmarklet returns a result that is not undefined, the content of the currently shown web page is replaced with it. It is such a perfect use case for the void operator. Compare [This difference only exists on non-Webkit browsers. E.g., Safari and Chrome don’t exhibit it, Firefox does.]:

• javascript:3+4 displays 7 as the current document.
• javascript:void(3+4) does not change the current document. void “hides” the result of the expression 3+4.

Similarly:

• javascript:window.open("http://www.whitehouse.gov/") replaces the content of the current page.
• javascript:void window.open("http://www.whitehouse.gov/") does not change the content of the current page.

A more involved example: The following bookmarklet lets one submit the URL of the current web page to the site submit.example.com:

javascript:void window.open("http://submit.example.com/submit?"+encodeURIComponent(document.location.href))

This bookmarklet does not change the current page and displays the confirmation of a successful submission in a new window/tab.

Use case: links that execute JavaScript code

A discouraged, but possible, use case is to embed a link in a webapp that invokes a JavaScript function. If the function returns void (which also happens if it does not have a return statement at all), then everything is OK. On the other hand, if the function that is called returns a value, you need to prevent the page content from being changed, via the void operator. [This difference only exists on non-Webkit browsers. E.g., Safari and Chrome don’t exhibit it, Firefox does.] In the following example, function computeResult() returns a number.

    <a href="javascript:void computeResult()">Compute</a>

---