Javascript Logical operators

Logical AND `&&`

The logical AND && operators will be set to ture if all the operands are true. Otherwise it will be false.

const a = 1
const b = 2

console.log(a > 0 && b > 0) // true
console.log(a < 0 && b < 0) // false
console.log(a > 0 && b < 0) // false
console.log(a < 0 && b > 0) // false

All logs will display false beside first log because only operands in first log are true.

In addition, the expressions false, null, NaN, 0, undefined and empty string such as "", '' can be converted to false.

The AND operator preserves non-Boolean values and returns them as they are.

console.log('A' && 'B' && 'C') // C
console.log('A' && undefined && 'C') // undefined
console.log(null && 'undefined' && 'C' ) // null

Shortly, it will be last non-Boolean value in last operand if all operands are true.

Table

Operands	Result
True && True	True
True && False	False
False && True	False
False && False	False

Logical OR `||`

The logical OR || operators will be set to ture if one or more of its operands are true. Otherwise, it will be false.

const a = 1
const b = 2

console.log(a > 0 || b > 0) // true
console.log(a < 0 || b < 0) // false
console.log(a > 0 || b < 0) // true
console.log(a < 0 || b > 0) // true

All logs will display true beside second log because both operands are false.

Table

Operands	Result
True OR True	True
True OR False	False
False OR True	True
False OR False	True

The || operator replaced to OR keyword.

Logical NOT `!`

The logical NOT ! operator takes truth to falsity and vice versa.

const a = 1
const b = 2

console.log(!(a > 0 && b > 0)) // false
console.log(!(a < 0 && b < 0)) // true
console.log(!(a > 0 && b < 0)) // true
console.log(!(a < 0 && b > 0)) // true

The operator ! is added to all example logs used in logical AND &&.

Double !, !! is same as original value.

text

!!true = !false = true

Logical AND assignment (&&=)

The logical AND assignment (x &&= y) operator only assigns if x is truthy.

let a = 1
let b = 0

a &&= 2 // 2
b &&= 2 // 0

It is equal to x && (x = y). X is first value and Y is second value.

Logical OR assignment (||=)

The logical OR assignment (x ||= y) operator only assigns if x is falsy.

let a = ''
let b = 100

a ||= 'New text' // "new text"
b ||= 2 // 0

It is equal to x || (x = y) X is first value and Y is second value.

Advanced

chaining

console.log(true || false && true) // true
console.log(true && false || false) // false

Multiple Logical operators are allowed. However, you should make it readable when you use it. The example is hard to read. I suggest to add () to make the code look better.

console.log((true || false) && true) // true
console.log((true && false) || false) // false

Function

const a = () => {
  console.log('console log in A')
  return true
}
const b = () => {
  console.log('console log in B')
  return false
}

if (a() && b()) {} // "console log in A", "console log in B"
if (a() || b()) {} // "console log in A"

if (b() && a()) {} // "console log in B"
if (b() || a()) {} // "console log in B", "console log in A"

Set default value

The logical OR || is very useful to set default value.

const options = [] 
const a = options.at(0) || 'Default'