An Abbreviated JavaScript If Statement

Create a Shorter IF Statement in JavaScript

Javascript code
Tor Lindqvist/E+/Getty Images

The JavaScript if statement performs an action based on a condition, a common scenario in all programming languages.The if statement tests a bit of data against a condition, and then specifies some code to be executed if the condition is true, like so:

if condition {
    execute this code
}

The if statement is almost always paired with the else statement, because usually you want to define an alternative bit of code to execute.

Let's consider an example:

if ('Stephen' === name) {
    message = "Welcome back Stephen";
} else {
    message = "Welcome " + name;
}

This code returns "Welcome back Stephen" if name is equal to Stephen; otherwise, it returns "Welcome" and then whatever value the variable name contains.

A Shorter IF Statement

JavaScript provides us with an alternative way of writing an if statement when both the true and false conditions just assign different values to the same variable.

This shorter way omits the keyword if as well as the braces around the blocks (which are optional for single statements). We also move the value that we are setting in both the true and false conditions to the front of our single statement and embed this new style of if statement into the statement itself. 

Here's how this looks:

variable = (condition) ? true-value : false-value;

So our if statement from above could be written all in one line as:

message = ('Stephen' === name) ? "Welcome back Stephen" : "Welcome " + name;

As far as JavaScript is concerned, this one statement is identical to the longer code from above.

The only difference is that writing the statement this way actually provides JavaScript with more information about what the if statement is doing.

The code can run more efficiently than if we wrote it the longer and more readable way. This is also called a ternary operator.

Assigning Multiple Values to a Single Variable

This way of coding an if statement can help avoid verbose code, particularly in nested if statements. For example, consider this set of nested if/else statements:

var answer;
if (a == b) {
  if (a == c) {
    answer = "all are equal";
  } else {
    answer = "a and b are equal";
  }
} else {
  if (a == c) {
    answer = "a and c are equal";
  } else {
    if (b == c) {
      answer = "b and c are equal";
    } else {
      answer = "all are different";
    }
  }
}

This code assigns one of five possible values to a single variable. Using this alternative notation, we can considerably shorten this into just one statement that incorporates all of the conditions:

var answer = (a == b) ? ((a == c) ? "all are equal" :
"a and b are equal") : (a == c) ? "a and c are equal" : (b == c) ?
"b and c are equal" : "all are different";

Note that this notation can be used only when all the different conditions being tested are assigning different values to the same variable.

Format
mla apa chicago
Your Citation
Chapman, Stephen. "An Abbreviated JavaScript If Statement." ThoughtCo, Dec. 31, 2016, thoughtco.com/create-a-shorter-if-statement-in-javascript-2037428. Chapman, Stephen. (2016, December 31). An Abbreviated JavaScript If Statement. Retrieved from https://www.thoughtco.com/create-a-shorter-if-statement-in-javascript-2037428 Chapman, Stephen. "An Abbreviated JavaScript If Statement." ThoughtCo. https://www.thoughtco.com/create-a-shorter-if-statement-in-javascript-2037428 (accessed November 22, 2017).