JavaScript Short Circuit Logic

Question

After seeing some examples online, I've collected two different explanations:

Ex: var x = A || B;

1. If A exists and B does not, left side is returned.
2. If A exists and B exists , return right side (last evaluated value).

Based on that logic, I would assume that x would return: v.item(0).click(). But when testing it x first returned B then A, aka fired B then fired A as well. Why? (http://jsfiddle.net/nysteve/QHumL/59/)

HTML:

<div class="indeed-apply-button" onclick="alert('BOOM BUTTON');">boo</div>
<div class='view_job_link' onclick="alert('BOOM LINK');">boo</div>

JavaScript

var v = document.getElementsByClassName('view_job_link');
var i = document.getElementsByClassName('indeed-apply-button');
var x = v.item(0).click() || i.item(0).click();

EDIT 1:02 PM 10/10/2013

Did not mention my true intentions, but based on the answer and discussion, my goal was essentially to convert the following piece of code into the JavaScript code I originally mentioned.

var v = document.getElementsByClassName('view_job_link');
var i = document.getElementsByClassName('indeed-apply-button');
if(v){v.item(0).click();}
else if(i){i.item(0).click();}
else{}

In the code above, how would you read if(v){v.item(0).click();} vs. the short-circuit?

Answer 1

Neither of your two descriptions are accurate.

var x = A || B;

What that does is:

1. Evaluate "A". Call the result V_A.
2. If V_A is not null, undefined, 0, NaN, false, or the empty string, then the value of the overall expression is V_A and evaluation stops.
3. Evaluate "B". Call the result V_B. That value, V_B, is the value of the expression.

Your test code first tests the return value of calling the "click" function on the first element and then the second. Those functions both return undefined, so the subexpressions on both sides of the || are evaluated. That is, the first call gets V_A and it's undefined, so that means that the other side will be evaluated too, and that'll be the value of the expression. (It's going to come out undefined.)

edit — OK now that you've added more to the answer, I think I see what you're up to.

In your actual code (or, I guess, the sample code that's closer to reality), you've got:

if(v){v.item(0).click();}
else if(i){i.item(0).click();}
else{}

That means something quite different than:

var x = v.item(0).click() || i.item(0).click();

Note that in the if statement version, it's explicitly checking "v". A test like that will perform a "truthy/falsy" test on the value of "v". In this case, it's really checking to make sure that "v" isn't either null or undefined. In the || version, however, there's no such explicit test for the "goodness" of variable "v"; it's just used directly. (If it happens to be null there, that'd result in a runtime error.)

A version of the actual code using || and && is possible, but in my opinion the existing code is clearer. However, just for discussion purposes, you could replace the if version with:

v && (v.item(0).click(), true) || i && i.item(0).click();

Personally I think that looks kind-of ugly.