void(0) clarification in Javascript?

Question

After reading both :

difference between "void 0 " and "undefined" , https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/void

I still have some questions.

I've read that window.undefined can be overwritten vwhere void operator will return the undefined value always

But the example which caught my eyes was the one in MDN :

<a href="javascript:void(0);">Click here to do nothing</a>

In order to do nothing , I always thought I should write :

href="javascript:return false;"

And this leads me to another question : (at Href context !) :

javascript:void(0); vs javascript:return false;

What is the differences ?

Also - Does

function doWork() {
    return void( 0 );
}

is exactly

function doWork() {

    return undefined;
}

Thanks.

Your writing is all over the place, and your "please 2 questions" don't help to clarify things either... — BoltClock, Sep 27 '12 at 13:56
@BoltClock Sorry, should I split this question into 2 different questions ? — Royi Namir, Sep 27 '12 at 13:57
ideally you would not use javascript in the href attribute at all! — epascarello, Sep 27 '12 at 13:57
@RobW sorry for this. ( language barrier )I tried to edit as much as I could in order to make it clearer. — Royi Namir, Sep 27 '12 at 14:00
And MDN says you should not use it. :) "Note, however, that the javascript: pseudo protocol is discouraged over other alternatives, such as unobtrusive event handlers." [MDN Void](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/void?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FOperators%2FSpecial%2Fvoid) — epascarello, Sep 27 '12 at 14:01
@epascarello lol , yeah But isn't void(0) is === return undefined ? ( my second question) and please answer in a normal answer So i'll have something to check. — Royi Namir, Sep 27 '12 at 14:03

I Hate Lazy · Accepted Answer · 2012-09-27T14:21:14.460

6

This will not work properly:

href="javascript:return false;"

because you are not in a function. You are thinking of this:

onclick="return false;"

which is correct since return false; is placed in a function. The false value tells the onclick to prevent the default behavior of the element.

For the return statement to work in an href attribute, you'd need a full function.

href="javascript:(function() { return false; })();"

but that's just long and ugly, and as the comments note, JavaScript in an href is generally discouraged.

EDIT: I just learned something. Having a non undefined expression as above seems to replace the elements with the return value (at least in Firefox). I'm not entirely familiar with the full ramifications of using JavaScript in an href, because I never do it.

Yes, this:

return undefined;

returns exactly the same thing this:

return void 0;

as long as the undefined variable has not been redefined or shadowed by some other value.

But while they may return the same thing, it's not entirely accurate to say they are the same thing, because:

undefined is a global variable whose default value is the undefined primitive
void is an unary operator that will replace the return value of its operand with the undefined primitive

So they both result in the undefined primitive, but they do so in a very different way.

edited Sep 27 '12 at 14:21

answered Sep 27 '12 at 14:14

I Hate Lazy

47,415
13
86
77

@RoyiNamir No it doesn't, look at the error console. Just because the javascript fails, doesn't mean it works. – Ian Sep 27 '12 at 14:21
yeah I looked at it and there were errors - Thanks for a great answer. – Royi Namir Sep 27 '12 at 14:21
by the way I think `onclick="return false;"` not only prevents the default behavior, but also stops propagation (bubbling) of the event. `href="#"` is just a link to an empty hash, usually the default behavior is to jump to the top of the page; without reloading – Chad Sep 27 '12 at 14:23
@RoyiNamir: That'll take you to the top of the page. – I Hate Lazy Sep 27 '12 at 14:23
2

@Chad: that's just in jQuery *(the stopPropagation)*. jQuery's behavior is non-standard. – I Hate Lazy Sep 27 '12 at 14:23
@RoyiNamir People use `href="#"` to get the appearance of a link but also include `onclick` functionality. Using `#` technically makes the page jump to the element with a specific id, but people normally `return false;` in the `onclick` to prevent it, so it's just a placeholder. – Ian Sep 27 '12 at 14:24
_return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation_ http://stackoverflow.com/a/1357151/859154 – Royi Namir Sep 27 '12 at 14:25
@user1689607 what meanning does this code has ? `function doWork() { void( 0 ); }` – Royi Namir Sep 27 '12 at 14:26
@RoyiNamir: It's just a function that returns the `undefined` value when invoked. It would be the same if it was just: `function doWork() { }` since a function's default return value is `undefined`. – I Hate Lazy Sep 27 '12 at 14:28
_returns the undefined_ ? I didnt see any return statement...please explain:-) – Royi Namir Sep 27 '12 at 14:28
@RoyiNamir: Oops, didn't notice that there wasn't a `return` statement. But it does still return `undefined`, because in JavaScript every function returns a value. If the function doesn't use `return`, then `undefined` is returned as the default value. In that function the `void( 0 )` does nothing. – I Hate Lazy Sep 27 '12 at 14:29
so `href="javascript:undefined"` is like `href="javascript:void(0)"` ? – Royi Namir Sep 27 '12 at 14:36
@RoyiNamir: Yes, as long as the `undefined` variable has not been redefined to some other value. *(Setting aside browser quirks as noted in the other answer)*. – I Hate Lazy Sep 27 '12 at 14:38
I just don't see the meaning : _do something in javascript ....yeah but what ?.....just do undefined._ (it just doesnt make any sence) – Royi Namir Sep 27 '12 at 14:40
1

@RoyiNamir: It's just a way to make the `` element display as a link (usually blue and underlined) without having the `href` lead to anywhere. Without the `href`, the `` text will look like any other text, but with the `href`, when you click it, the browser wants to take you somewhere. This is just a hack so you get the appearance of a link, but not the behavior. – I Hate Lazy Sep 27 '12 at 14:43
Exactly. ) You don't have to make such links completely useless (if you want to do something behind the curtains each time the link is clicked, fine, just don't forget to evaluate to the true `undefined`), though - still, it's much better to provide such actions as `click` event handlers. – raina77ow Sep 27 '12 at 15:02
@raina77ow: Yes, I would hope they would bind *some* behavior, otherwise it would just be frustrating. :) – I Hate Lazy Sep 27 '12 at 15:14

raina77ow · Answer 2 · 2012-09-27T14:34:03.333

If you specify javascript: something as a value of href attribute, this something will be evaluated when someone activates that link.

The result of this evaluation will be checked: if its typeof evaluates to 'undefined' string, nothing will happen; if not, the page will be reloaded with the evaluation's result as its content:

<a href="javascript: void(0);">Nothing to see here, move along...</a>
<a href="javascript: undefined;">No, still nothing...</a>
<a href="javascript: prompt('Where would you like to go today?');">Check this out!</a>

The first two links here will do basically nothing. But the third one is quite more interesting: whatever you enter in prompt will be shown to you - even an empty string! But that's not all: if you click Cancel, you would still see a new page - with null printed (as cancelled prompt returns null, and, as you probably know, typeof null is in fact object; and null converted to String is, well 'null').

It could get more interesting:

<a href="javascript: window.undefined = 333; void(0);">What happens here?</a>
<a href="javascript: window.undefined = 333; undefined;">And here?</a>

Well, here we still get nothing at the first link. But second link will show you 333 in IE8. :)

And that's, I suppose, answers your second question as well: typeof void(0) will always be undefined. typeof undefined could give you dragons if someone decided it's a good idea to reassign them to window.undefined. )

... And yes, javascript: return false; is just wrong: you cannot return from non-function environment. You probably confused it with onclick: return false, but that's completely another story. )

Well, I knew it'd take too much time to write this all. ) Just hope that all this stuff will happen to help someone. ) — raina77ow, Sep 27 '12 at 14:29

void(0) clarification in Javascript?

2 Answers2