What is the exact meaning of this code using the || (“OR”) operator?

问题

I saw somewhere this code snippet:

var idx = SOME_VALUE;

var color = {
  yellor: 1,
  red: 2,
  black: 0
};

var x = color[idx] || []; // Is this means if color[idx] is null, then return an empty array?

I can only guess the code var x = color[idx] || []; means if color[idx] is null, then return an empty array to x otherwise x= color[idx]. Am I right?

Still, I need an explaination. Does this code has the same logic as the following?

CONDITION==VALUE? TRUE_goes_here : FALSE_goes_here

回答1:

What it means is that if color[idx] is "falsy," use an empty array instead. "Falsy" values are false (of course), 0, NaN, "", undefined, and null (all other values are "truthy"). That idiom is an example of JavaScript's curiously powerful || operator*.

In this case, it's supplying a default value if color doesn't contain a property with the name contained by idx (because when you index into an object like that and the key doesn't match any existing property name, the result is undefined): x will be 1 (if idx is "yellor"), 2 (if idx is "red"), 0 (if idx is "black"), or [] if idx is anything else.

So answering your question at the end of your question, basically, yes. It's:

var x = color[idx];
if (!x) {
    x = [];
}

or

var x = color[idx] ? color[idx] : [];

---

* (That's a post on my anemic little blog.)

回答2:

You are correct.

In Javascript, a || b evaluates to the first "truthy" operand.
If a is "falsy" (eg, null, false, undefined, 0), it will evaluate to b.

回答3:

The or operator || will give you the first value that doesn't evaluate as conditionall false (like 0 or null do).

This means that using 0 || null || 5 will yield 5 as a result.

What you have in that code is a common practice in JavaScript which is using the || operator to specify default values upon variable initialization. That's just because

var x = something || default_value;

is a bit more readable than

var x = (something ? something : default_value);

回答4:

var x = color[idx] || [];

If color is an object with a property which name is String(idx) and the value of that property is truthy, assign the value of that property to x. Otherwise, let x be an empty array.

回答5:

In the case, || is the "boolean or" operator. As in many languages, the boolean operators in JavaScript are short-circuited. For example, let us suppose I have the following boolean expression:

var booleanValue = someFunction() || otherFunction()

If the first function returned value is true-equivalent, there is no need to evaluate the second value and the otherFunction() will not be executed because the "or" operator returns a true-equivalent value whether some of its operated is true-equivalent. This is good because it makes your code more efficient: only the needed expression is evaluated.

Also, there is a curious behavior in this case: since the first value of the expression is true-equivalent, JavaScript just returns it as the result of the expression because that would mean the entire expression is true anyway.

In your code, the value of color[idx] is true-equivvalent if it is set. Since it is true-equivalent value in an "or" operation, it is returned as the value of the expression. However, if it not set, undefined is returned, which is a false-equivalent value. So JavaScript has to evaluate the next value to define if the "or" expression is true. Since the next value is the last one and the value of the expressions depends entirely of it, the expression returns the next value if the first is false-equivalent.

来源：https://stackoverflow.com/questions/5706372/what-is-the-exact-meaning-of-this-code-using-the-or-operator