AND and OR operators

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

AND and OR operators

Let’s say you’re trying to write a program. In this program, you want to make a person walk() if any of these conditions are met.

1. The lights are green
2. There are no cars around

If neither of the above conditions are met, you want the person to stop().

Since you have three conditions for this logic flow, you might whip out an else if statement.

// Note: Not actual JavaScript
if (isLightGreen) {
  walk()
} else if (noCarsAround) {
  walk()
} else {
  stop()
}

Notice walk() appeared twice in the control flow above? This is not ideal, because you’re running the same code in two places.

You can combine the first two conditions if you could say: “If light is green or if there are no cars around, walk”. In JavaScript, you can do this with the OR operator (||).

if (isLightGreen || noCarsAround) {
  walk()
} else {
  stop()
}

Besides OR, JavaScript also gives you the AND operator (&&). Let’s find out more about && and ||.

The AND operator

The AND operator (&&) is used to check if all expressions that are truthy. It looks like this:

const test = expr1 && expr2 && expr3

&& has the following behavior:

• && returns the first falsey expression if any expressions is falsey
• && returns the last expression if all expressions are truthy

Here are some examples of && at work:

'two' && 0 // 0 (Reason: first falsey expression)
0 && `two` // 0 (Reason: first falsey expression)
'two' && 'three' // 'three' (Reason: Both are truthy)

You can use && in a if/else condition, like this:

// Buy apples if stock is low and apples are juicy
if (juicyApples && stockLow) {
  buyApples()
} else {
  eatApples()
}

The OR operator

The OR operator (||) is used to check if at least one expression is truthy. It looks like this:

const test = expr1 || expr2 || expr3

|| has the following behavior:

• || returns the first truthy expression if any expressions are truthy
• || returns the last expression if all expressions are falsey

'Candy' || 0 // 'Candy' (Reason: first truthy expression)
'' || 'Candy' // 'Candy' (Reason: first truthy expression)
'' || null // null (Reason: Both are falsey)

You can use || in a if/else condition, like this:

// Walk if light is green or if there are no cars around
if (isLightGreen || noCarsAround) {
  walk()
} else {
  stop()
}

Exercise

What value would you get for each of the following expressions?

1. 'Benjamin' && 'Thaddeus'
2. 'Benjamin' || 'Thaddeus'
3. '' && null
4. '' || null
5. 2550284 && 0
6. 2550284 || 0