Can someone please explain this syntax in Javascript - " type = type || 'fx' "

Question

Possible Duplicate:
What does this construct (x = x || y) mean?

I've seen this code here. And some similar code on other places that I can't recall.

time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
type = type || "fx";

What does it mean?

I don't understand a) at all but I *think* I understand b) like this:

If type is false then type will be equal to "fx" otherwise type will equal whatever it was before.

I'm not sure, but perhaps I'm wrong.

What is this syntax called? Conditional variable? :P I tried Googling for an answer but have no idea what to use in my query.

You should probably also have a look at [Question mark in JavaScript](http://stackoverflow.com/questions/1771786/question-mark-in-javascript). — Felix Kling, Nov 22 '11 at 18:46
@Felix Kling I appologize, I see that it is somewhat similar, but as I stated in my original question, I did not know how to structure an effictive query with which to search, the terms I searched yielded no results. But thanks for pointing to those links it also helped :) — tone7, Nov 22 '11 at 19:32

score 4 · Accepted Answer · answered Nov 22 '11 at 18:44

4

a)

time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;

is synonym for

if (jQuery.fx) {
    if (jQuery.fx.speeds[time]) {
        time = jQuery.fx.speeds[time];
    }
}

which is almost the same as

b)

type = type || "fx";

is synonym for

if (!type) {
   type = "fx";
}

Simply it checks if type is not false, null, undefined. If yes, type is being filled with fx

answered Nov 22 '11 at 18:44

Martin.

10,051
3
35
65

thanks for clearing that up :) – tone7 Nov 22 '11 at 19:13

Jemaclus · Answer 2 · 2011-11-22T19:29:59.610

For A, what we're doing is a shortcut for an if-else statement. The stuff before the question mark refers to the if statement, the next element is the "then" statement, and the final part is the "else" statement.

var action = my_status == 'hungry' ? 'eat' : 'do not eat';

In this case, it would translate into something like this:

if (my_status == 'hungry')
   action = 'eat';
else
   action = 'do not eat';

For B, double pipes (||) mean "or". What we're evaluating here is a Boolean value based on whether one OR the other is true.

var not_hungry = ate_lunch || full;

If either ate_lunch OR full is true, the not_hungry is also true.

You can do the same thing with double ampersands (&&) which mean AND.

var single = nerdy && cocky;

If nerdy AND cocky are true, then single is also true. If only one of those is true, then the statement resolves to false (since both must be true for single to be true).

Hope that helps. :)

Edit (h/t Phrogz): It's worth noting that || and && in JavaScript don't only operate upon and evaluate to a Boolean value, but rather are "guard" operators that test for 'truthiness' and evaluate to one of the two operands. (

Good answer, but you should amend it to point out that `||` and `&&` in JavaScript don't only operate upon and evaluate to a Boolean value, but rather are "guard" operators that test for 'truthiness' and evaluate to one of the two operands. — Phrogz, Nov 22 '11 at 19:04

score 1 · Answer 3 · answered Nov 22 '11 at 19:10

time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;

Can be written as:

if (jQuery.fx) {
   if (jQuery.fx.speeds[time]){
       time =  jQuery.fx.speeds[time];
   } 
}

In this case the ternary operation (? :) is redundant. The statement returns time if JQuery.fx.speeds[time] doesn't exist - so it returns itself.

More general: somevar = a || b is called short circuit evaluation. Basically it's a short way of writing

if (a) {
  somevar = a;
} else {
  somevar = b;
}

Thanks, this also answers my questions :) – tone7 Nov 22 '11 at 19:19 — tone7, Nov 22 '11 at 19:19

score 0 · Answer 4 · answered Nov 22 '11 at 18:45

0

a) Set time to jQuery.fx.speeds[time] if and only if jQuery.fx and jQuery.fx.speeds[time] exists:

if(jQuery.fx && jQuery.fx.speeds[time])
    time = jQuery.fx.speeds[time];

b) Your description is correct

answered Nov 22 '11 at 18:45

Eric

87,154
48
211
332

nmichaels · Answer 5 · 2011-11-22T19:02:33.023

0

Yes, you're right about what it does. It's known as short-circuit evaluation. It does something similar to C's ternary operator.

edited Nov 22 '11 at 19:02

answered Nov 22 '11 at 18:45

nmichaels

45,418
12
95
127

1

think this is more like a comment not an answer... – evilone Nov 22 '11 at 18:46
@evilone: The question is in two parts: What it does and what it's called. Did I miss one? – nmichaels Nov 22 '11 at 18:51
@nmichaels thanks, it actually answers the 2nd part of my question. Thanks :) – tone7 Nov 22 '11 at 19:15

BZink · Answer 6 · 2011-11-22T19:03:08.733

0

It's a ternary operator

http://en.wikipedia.org/wiki/Ternary_operator

I was trying to link to the first result here...

https://www.google.com/#hl=en&cp=4&gs_id=1j&xhr=t&q=wiki+inline+if&

edited Nov 22 '11 at 19:03

answered Nov 22 '11 at 18:46

BZink

7,106
10
34
54

1

Do you care to edit your link? – Martin. Nov 22 '11 at 18:51
Well, that isn't the link I wanted to show. There is actually a wiki page to '?:' but I can't link to it. 3 down votes? Seems a bit harsh. – BZink Nov 22 '11 at 19:04

score 0 · Answer 7 · answered Nov 22 '11 at 18:51

0

a.) is structured using ternary operator, in simple term think of

time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;

as equivalent to:

time = if(jQuery.fx){ jQuery.fx.speeds[time]; } else { time : time; }

b.) you are correct in that type will be defined if type is already defined, otherwise it'll default to "fx". However, I'm not sure if there's a technical name for it except it is the logical expression for OR

answered Nov 22 '11 at 18:51

Jeff

1

Maybe "equivalent to the following pseudo code that is not valid JavaScript syntax but perhaps you can understand what I'm trying to illustrator" :) – Phrogz Nov 22 '11 at 18:54

Can someone please explain this syntax in Javascript - " type = type || 'fx' "

7 Answers7