CODEWITHSUNDEEP
javascript
Batakj
Batakj

Reputation: 12743

Javascript: meaning of the event and function separated by OR Operator

I found a block of code in a javascript. The event and function is separated with OR operator.

    var t = document.onmouseup || function () {};

Please help me to understand the above line.

Upvotes: 0

Views: 74

Answers (6)

thefourtheye
thefourtheye

Reputation: 239473

This line is to make sure that, t has a valid function, for the rest of the code.

It means that, if the document.onmouseup is already defined, assign it to t, otherwise assign the dummy function function() {}; to t. So that, later on I can do t() without worrying whether t is a function or not.

The code takes advantage of the shortcircuit evaluation of JavaScript's logical operators.

But I believe, this is not foolproof enough. I would use

var t = typeof document.onmouseup === "function" ? document.onmouseup : function () {};

The difference between both the codes is that, the code in question just makes sure that document.onmouseup has a truthy value or not. But the code proposed in this answer makes sure that the type of document.onmouseup is a function.

Check this program to understand, why the code in question might fail.

function func1() {
    return 1;
}
var t = func1 || function() {};
console.log(t());
func1 = 1;
var t = func1 || function() {};
console.log(t());

Output

1
TypeError: number is not a function

Upvotes: 4

WebServer
WebServer

Reputation: 1396

consider expression ( A || B ) then its evalutation is :

if !!A is true then evaluate to A
else evaluate to B

So when you write

var t = A || B

then if !!A evaluates to true then value of t will be A else value of t will be B

Here in your example A is document.onmouseup and B is function () {}

so if document.onmouseup exists then !!document.onmouseup will be true and t will be assigned to it, else t will be assigned to function(){}

Upvotes: 0

Entoarox
Entoarox

Reputation: 703

The piece of code you found is a shorthand declaration, it is functionally equal to the following:

if(document.onmouseup)
{
    var t=document.onmouseup;
}
else
{
    var t=function(){};
}

shorthand declarations are one of the things that make javascript the powerful and usefull language it is (and the reason its one of the few languages that doesnt have elseif)

Shorthand declarations are always shorter, and in some cases actually improve readability.

Upvotes: 0

rab
rab

Reputation: 4144

it means 

var t;
if ( document.onmouseup ) {
    t = document.onmouseup ;   
} else {
    t = function () {};
}

Upvotes: 0

Henrik Andersson
Henrik Andersson

Reputation: 47172

This line means that the variable t shall take on the function of document.mouseup or if that's not defined, null or false use the anonymous function() {}.

Upvotes: 1

Barmar
Barmar

Reputation: 781013

The OR operator returns its left argument if it's truthy, otherwise it returns its right argument.

So this sets t to the mouseup handler if it's set, otherwise it sets it to a function that does nothing.

Upvotes: 0

Related Questions