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 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!

• javascript

Share Improve this question Follow edited May 23, 2017 at 12:30 CommunityBot 111 silver badge asked Feb 19, 2013 at 21:50 chrisfargenchrisfargen 1,51611 gold badge1414 silver badges1111 bronze badges 2

• 1 I'd personally remend 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 Commented Feb 19, 2013 at 21:55
• I would write normal conditional statements and then use advanced minifiers, such as the Google Closure Compiler to minify the code. – Felix Kling Commented Feb 19, 2013 at 22:00

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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.

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:

1. If x is an Object and x.foo exists, give us the value of x.foo.

2. If x is an Object and x.foo doesn't exist, return undefined.

3. 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.

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 bees unreadable. We, developers should think about understandability and readability of the code.

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