Why does the AND (&&) operator return an array instead of a boolean?

Question

var array = props && props.children.find(ele => ele && ele.length);

The thing that is messing me up is the AND (&&). Shouldn’t the previous line of code return a boolean? I know it doesn’t because I have tried it, and it returns an array.

Could anybody explain what is happening here?

Answer 1

The example you posted makes use of a few features of the JavaScript language:

• "Falsy"-ness: https://developer.mozilla.org/en-US/docs/Glossary/Falsy
• The short-circuiting nature of the && and || operators: https://en.wikipedia.org/wiki/Short-circuit_evaluation
• The && and || operators return the "calculated value" instead of a boolean value: Why don't logical operators (&& and ||) always return a boolean result?

It's semantically equivalent to this:

var array = undefined;
if( props /* is not null or undefined or empty-string */ ) {
    array = props.children.find( ele => ele && ele.length );
}

(Note the additional && inside the find predicate, so in-full it becomes this):

var array = undefined;
if( props /* is not null or undefined or empty-string */ ) {
    array = props.children.find( function( ele ) {
        if( ele /* is not null or undefined or empty-string */ ) {
            return ele.length;
        }
        return undefined;
    } );
}

It can also be compared to the "Elvis operator" aka Safe-navigation operator from C#:

var array = props?.children.find( e => e?.length );

Explanation:

The && operator evaluates its left operand first, in this case just props - if it is not falsy (not null, undefined or an empty string) then it evaluates the right operand (in this case, the props.children.find function invocation). Note that an empty array is not falsy.

If props were falsy, then the .children.find call would not be made, preventing a runtime error.

Answer 2

It's a way of checking to see if props is truthy before trying to delve deeper into its properties. If you simply did

var array = props.children.find(ele => ele && ele.length);

then if props was null, the line would generate an error. But if you know that props might be null and are OK with that, you can try to generate the array anyway, then when using it later, check to see if array is truthy before using it:

var array = props && props.children.find(ele => ele && ele.length);

Answer 3

Basically, if props is defined the search its children for the first one that has an element with one or more nodes and assign it to array.

var array;
if (props) {
    array = props.children.find(ele => ele && ele.length);
}