## DEV Community is a community of 674,636 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

loading...

# Logical operators || (OR) and && (AND) and how to use them to find the first truthy or falsey value in a chain of operands

Pere Sola
Account Manager @Stripe during the day. Full stack software developer after-hours. @LambdaSchool graduate
・2 min read

Photo by Vasily Koloda from unsplash. It could be me walking through JS :)

Much of the content is based from this tutorial. It helps me put it in writing to remember!

# || OR

If any of its arguments is `true` then it returns `true`. Otherwise, it returns `false`. When combining 2 operands, there are 4 possible combinations:

``````alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false
``````

If the operand is not a boolean, it is converted to a boolean (`truthy` or `falsey`), like:

``````if (1 || 0) { // works just like if( true || false )
alert( 'truthy!' );
}
``````

## || OR to find the first truthy value

You can use `|| OR` to find the first truthy value if you have several operands. From what I read, what follows is a feature from Javascript.

• It evaluates operands from left to right.
• It converts each of them to boolean, and returns the first one being `true`.
• If it reaches the end and it has not found any `true` (all were `false`), it returns the last operand.
``````alert( 1 || 0 ); // 1 (1 is truthy)

alert( null || 1 ); // 1 (1 is the first truthy value)
alert( null || 0 || 1 ); // 1 (the first truthy value)

alert( undefined || null || 0 ); // 0 (all falsy, returns the last value)
``````

You can use the `|| OR` to do `short-circuit evaluation`: all operands will be evaluated until the first `truthy` is found, and that value is returned without reaching the following ones. For instance:

``````true || alert("not printed");
false || alert("printed");
``````

Will print the second message only because, in the first one, evaluation stops upon reaching the first operand, which is `true`.

# && AND

`true` is returned if both operands are `true`. Otherwise, `false` is returned:

``````alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false
``````

Like in `|| OR`, operands are evaluated as booleans:

``````if (1 && 0) { // evaluated as true && false
alert( "won't work, because the result is falsy" );
}
``````

## && AND to find the first falsy value

Same as with `|| OR`, multiple operands can be evaluated and this time `&&` helps you find the first falsy value:

• It evaluates from left to right.
• It converts each operand to boolean, and when it finds the first `false` it stops and returns its value.
• If it reaches the end of the operands and all of them are `truthy`, it returns the last one.
``````// if the first operand is truthy,
// AND returns the second operand:
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

// if the first operand is falsy,
// AND returns it. The second operand is ignored
alert( null && 5 ); // null
alert( 0 && "no matter what" ); // 0
``````

`&& AND` takes precedence over `|| OR`, so `a && b || c && d` is the same as if the `&&` were in parenthesis: `(a && b) || (c && d)`.