JavaScript Control Flow Conditionals

If

An if statement executes a code block if the specified condition is truthy.

Copy
if (condition) {
  // execute the code within this code block
}

We can omit the curly braces if we only want to execute a single statement as shown below.

Copy
if (condition) singleStatement()

Statements

Up until this point we've mostly worked with something called expressions or values that can be assigned to constants and variables (numbers, strings, arrays, objects, etc).

Statements do things. They do not necessarily give us a value back. An if statement is an example of a statement that has no return value.

Copy
// this is invalid
const x = if (cond1) {
  return a
} else {
  return b
}

Running the code above will give us

Copy
SyntaxError: expected expression, got keyword 'if'

because an if statement is not an expression.

A function call is also often referred to as a call statement. In JavaScript (and most other langauges) a call statement ends up returning a value, and is therefore completely valid to use in situations where expressions are expected. Even a function that doesn't explicitly return anything returns undefined.

Code example

Copy
const greetMessage = user = {
  if (user.authenticated) {
    return `Welcome back, ${user.firstName}!`
  }
  return `Welcome!`
}

In the greetMessage function we return different messages based on the user's authentication status. The last return statement acts as a catch-all in case the condition of the if statement is falsy.

Beginner mistake: redundant returns

A common beginner mistake is to explicitly return true or false where directly returning the result of the calculation would have done the same thing and been easier to read.

Copy
const isScreenLarge = width => {
  if (width >= 1024) {
    return true
  } else {
    return false
  }
}

The above isScreenFunction can be written as a one-line function as shown below.

Copy
const isScreenLarge = width => width >= 1024

Copy
oddOrEven

Copy
even

Copy
odd

const oddOrEven = x => {
  return "odd"
}