CODEWITHSUNDEEP
javascripthtmlvoid
Royi Namir
Royi Namir

Reputation: 148694

void(0) clarification in Javascript?

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.

Upvotes: 3

Views: 1088

Answers (2)

raina77ow
raina77ow

Reputation: 106453

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. )

Upvotes: 4

I Hate Lazy
I Hate Lazy

Reputation: 48789

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.

Upvotes: 6

Related Questions