Using Logical AND in Javascript Variable Declarations

Question

I am interested in the practical application of declaring variables using && like this:

var x = undefined && 4;

// Evaluate to the first falsey value
// or else the last value.

eval(x);
// undefined

I understand how the value is evaluated (see this SO answer). I also understand its sister || (see here for a great description) and why it would be useful to declare a variable with the following expression:

// Some other variable
var y;

var x = y || 4;

// Evaluate to the first truthy value
// or else the last value.

Practically: Use the first value unless that first value is falsey; if so, use the last value. We can demonstrate this characteristic of || in the browser console:

> null || 4
  4
> 4 || null
  4

> null || undefined
  undefined
> undefined || null
  null

> true || 4
  true
> 4 || true
  4

As for &&:

> null && 4
  null
> 4 && null
  null

> null && undefined
  null
> undefined && null
  undefined

> true && 4
  4
> 4 && true
  true

Should we take this to mean: Use the first value unless that first value is truthy; if so, use the last value?

I'm interested in using coding shortcuts to minimize the use of conditional statements, and I wonder if I might be able to use this one somehow.

I found an example of this coding method in line 472 of the jQuery core source:

scripts = !keepScripts && [];

So the question is this: Can anyone describe a good context for using && in a javascript variable declaration? Do you consider it to be bad practice?

Thanks!

I'd personally recommend against it: It's really not very readable. Without knowing about this behaviour, I'd expect something like `!keepScripts && []` to evaluate to `false`, which could lead to some difficult to track down bugs. — ChrisC, Feb 19 '13 at 21:55
I would write normal conditional statements and then use advanced minifiers, such as the [Google Closure Compiler](https://developers.google.com/closure/compiler/) to minify the code. — Felix Kling, Feb 19 '13 at 22:00

score 4 · Accepted Answer · edited Jul 05 '13 at 06:12

In general, you should only only use "shortcuts" like this if it makes the code more readable for the typical JavaScript programmer than the alternative.

When thinking about what is more readable, and less surprising, consider that

var foo;
if(bar) {
    foo=[];
}

and

var foo = bar && [];

are not the same. For instance, if bar is NaN, then foo will then be NaN in the later case, which might be a bit of a head-scratcher later on.

Since there are tools to optimize/minimize JavaScript, you should focus on readability of your code, which is not always the same thing as brevity.

Lets say you have several such repetitive initializations in a row, all dependent on different variables (so that they couldn't be wrapped into a single conditional), but following the same logical formula. In this case, once the reader had mentally parsed the meaning of the formula, they could quickly scan all the instances and see the differences between each one. In this case, instead of relying on a convention that most JavaScript programmers are familiar with (such as var foo = some_opt || {}), you are creating a localized convention, that the reader will have to learn just for this file. Even in this case, I'd advise some careful consideration, its probably not worth it.

score 1 · Answer 2 · answered Jul 05 '13 at 05:19

I found one specific circumstance in which it can be useful to use && in the debugging process.

Let's say we have a variable x. Sometimes x has a value of null, and sometimes x is an Object with value {'foo':'bar'}. We want to write an expression that returns the value of x.foo if it exists.

However, we have to be careful. Calling a property of an object that does not exist can result in this:

> Uncaught TypeError: Cannot read property 'foo' of null

So we can write this:

x && x.foo

Which does the following:

If x is an Object and x.foo exists, give us the value of x.foo.
If x is an Object and x.foo doesn't exist, return undefined.
If x is null, return null.

As long as x has been mentioned somewhere (even if x is simply set to null or undefined), the expression should not break the code.

score 0 · Answer 3 · answered Feb 19 '13 at 21:57

Actually, you should not regularly use && operator like Jquery does since it is always risky code. You may forget what you have done or you may not find a bug due to the this usage. I personally consider this as a bad practice. You may prefer to use, but code becomes unreadable. We, developers should think about understandability and readability of the code.

score 0 · Answer 4 · answered Feb 19 '13 at 22:03

0

Well, it's a common idiom but maybe it makes your code less readable. So, my suggestion, keep it simple, even if it means a few more keystrokes.

answered Feb 19 '13 at 22:03

Marcos

4,643
7
33
60

Using Logical AND in Javascript Variable Declarations

4 Answers4