How does the || (OR) operator work in assignments

Question

What does it mean when you use the || operator to define a variable like

 mouse.x = e.clientX || e.pageX;

What is the operator used for?

It's logical 'OR' operator. Check this - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators — malkam, Apr 04 '15 at 05:48
it would be nice to change the title of this question to something like "how does the OR operator (||) work?" and to make one of the comments above into an answer — hoijui, Apr 04 '15 at 05:52
It is a logical operator, but it is quite different from most other languages. Answers should explain this difference, and not just refer to an off-site reference/documentation. — Sverri M. Olsen, Apr 04 '15 at 05:53
Assuming the asker or future visitors know or need to know other languages ;) — mplungjan, Apr 04 '15 at 05:59
@mplungjan I did not specifically target your answer; it just happened to be the only answer. I have always known the operator has this ternary-like quality, but I have never actually learnt why that is. Seeing as this question deals with the ternary-like behaviour, it would be a shame if it was not addressed properly. — Sverri M. Olsen, Apr 04 '15 at 06:07

mplungjan · Accepted Answer · 2015-04-04T08:16:23.483

Using this operator in the way you show sets the var to the second value if the first one is falsy.

In your specific example it is a shortcut for

if (e.clientX) mouse.x = e.clientX;
else mouse.x = e.pageX

to avoid accessing e.clientX twice: If clientX is not set, take pageX.

More information about this Logical Operator from MDN:

Logical operators are typically used with Boolean (logical) values. When they are, they return a Boolean value. However, the && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value.

var e = { "clientX":25,"pageX":35 }
var res = e.clientX || e.pageX; // 25
console.log(res);

e = { "clientX":0,"pageX":35 }
res = e.clientX || e.pageX; // 35, clientX is falsy
console.log(res)

e = { "clientX":0,"pageX":0 }
res = e.clientX || e.pageX; // 0 from pageX, clientX is falsy
console.log(res)

e = { "clientX":0,"pageX":null }
res = e.clientX || e.pageX; // null from pageX, clientX is falsy
console.log(res)

Nit: the `||` form avoids `e.clientX` being evaluated twice so it's not 100% equivalent. (eg. given an arbitrary `e` the `clientX` property could be a getter that returns a different value.) — user2864740, Apr 04 '15 at 05:56

score 1 · Answer 2 · edited May 23 '17 at 12:29

|| is the logical OR operator. It is used when more than one statement may be considered.

if (age > 18 || hasParentalSignature == true) {
    // Allowed to attend
}

In Javascript the operator also serves as a Null Coalescing Operator. It is not strictly null coalescing, because it recognizes "falsy" values other than null, but it is very similar.

Null coalescing is a "if value A is falsy then use B instead" operator. For example:

var x = "Hello!";
var z = y || x;

In this example the y variable was never defined, which means that it is "falsy", so instead the x variable will be used.

Using if statements it would be the same as:

var x = "Hello!";
if (y) {
    var z = y;
} else {
    var z = x;
}

Or using the ternary operator:

var x = "Hello!";
var z = (y ? y : x);

Most other languages, that have a null coalescing operator, use a dedicated operator to do this. In Javascript, for whatever reason, it is part of the OR operator.

This question deals with the OR's null coalescing properties.

How does the || (OR) operator work in assignments

2 Answers2