Difference between if (x) { foo(); } and x ? foo() : 0;

Question

Snippet 1:

if ( x ) { 
    foo();
}

Snippet 2:

x ? foo() : 0;  

What are the differences between those two snippets?

Edit: Corrected the syntax error.

Update: btw, it seems that there is an even shorter notation:

x && foo();

Emergency

Answer 1

Generally, if is a statement (e.g. you can't assign it to a variable) and the ternary operator ?: is part of an expression (yields a value which can be assigned to variables).

Also, the if block can contain statements while the components of ?: can only contain expressions.

In the example you give, there is no difference, since you don't use the result of the ?:. Both snippets evaluate foo() only if x is a true value.

Correspond

Answer 2

Snippet #2 is an invalid ECMAScript expression since it lacks the required : blah in order to make it a ternary.

EDIT: There isn't really a difference between the two snippets, they both invoke foo if x is truthy. If x is falsy (undefined/false/empty string/0/) then first snippet wouldn't evaluate to anything, latter snippet would evaluate to 0 but that 0 really has no impact on the script.

Colcannon

Also, the block syntax does not evaluate to any value (it's not an expression). The ternary operator does evaluate to a value. – Buna

@Buna Yea, but the ternary expression is not assigned to anything in my code, so this is not a difference in this case. – Godless

If we had x ? foo() : bar() and the functions didn't return anything. Would it be ECMA valid because it's actually value undefined? – Iatrogenic

@Martin: Yes. Expressions can be used as statements. And any function can return undefined without error. It's when you try to use the value undefined that you crash. – Buna

@meder OK, I figured it out. Thanks. (I thought there might be a slight distinction between those two, but I guess there isn't.) – Godless

Ok do it works as expected, but do I interpret the answer as "yes that is good ECMA script"? – Iatrogenic

@Martin It's a shortcut notation. As long as your right-hand sides are just expressions, you should be fine. – Godless

Answer 3

I think you meant to ask the following

// Why should I use
if (x) {
  do();
}

// instead of 
x && do();

or

// Why should I use
if (x) {
  do(); 
} else {
  dont();
}

//instead of 
x ? do() : dont()

As they are written, there is no difference in the output. I don't like using the ternary or the && operator in these cases because of the semantics of using the ternary and &&. A ternary returns a value that you're not using, as does the && expression. Therefore, I'd rather use the way the language intends operators to be used.

However, I love using && for null checks

var val = obj && obj.getValue();

Note that in this case, we are using the return value of the expression

Hachmin

+1 I like this technique: x && foo(); instead of if (x) { foo(); }. I'll remember that. :) – Godless

Sure... even though that was my anti-suggestion. I used to use it, but was convinced by fellow developers not to do it. – Hachmin