Using Boolean And In Javascript Variable Declarations

Question

I am interested in the practical application of variable declarations using && as follows:

 var x = undefined && 4; // Evaluate to the first falsey value // or else the last value. eval(x); // undefined 

I understand how value is evaluated (see this SO answer ). I also understand his 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 if this first value is not false; if so, use the last value. We can demonstrate this characteristic || in the browser console:

 > null || 4 4 > 4 || null 4 > null || undefined undefined > undefined || null null > true || 4 true > 4 || true 4 

Regarding && :

 > null && 4 null > 4 && null null > null && undefined null > undefined && null undefined > true && 4 4 > 4 && true true 

Should we understand this: use the first value if this first value is not true; if yes, use the last value?

I am interested in using shortcuts for coding in order to minimize the use of conditional statements, and I am wondering if I can use this in any way.

I found an example of this encoding method in line 472 of the original jQuery kernel:

 scripts = !keepScripts && []; 

So the question is this: can someone describe a good context for using && in a javascript variable declaration? Do you think this is bad practice?

Thanks!

Answer 1

In general, you should only use “shortcuts” like this if it makes the code more readable for a regular JavaScript programmer than an alternative.

If you are thinking of something that is more readable and less surprising, think that

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

and

 var foo = bar && []; 

do not match. For example, if bar is NaN , then foo will be NaN in a later case, which later may be a little head scratcher.

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

Suppose you have several such repeated initializations in a string, they all depend on different variables (so they cannot be wrapped in one conditional), but follow the same logical formula. In this case, when the reader mentally analyzed the meaning of the formula, they could quickly look through all the instances and see the differences between them. In this case, instead of relying on a convention that most JavaScript programmers are familiar with (for example, var foo = some_opt || {} ), you create a localized convention that the reader will need to learn only for this file. Even in this case, I would advise you to carefully consider it, maybe not worth it.

Answer 2

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

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

However, we must be careful. Invoking a property of an object that does not exist can result in the following:

 > 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 does not exist, return undefined .

• If x is null, return null .

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

Answer 3

Actually, you should not regularly use && as jQuery, as this is always risky code. You may forget what you did, or you cannot find an error due to this use. I personally consider this a bad practice. You may prefer to use it, but the code becomes unreadable. We developers must think about the comprehensibility and readability of the code.

Answer 4

Well, this is a common idiom, but maybe it makes your code less readable. So, my suggestion, let it be simple, even if it means a few more keystrokes.