Shorter if Statements with Assignments

I like the way you can shorten if-then-else statements in JavaScript. I’ll illustrate this with an example. I’ll check for the day of the week with the Date() method and print out some messages accordingly. We can easily get the day of the week in numerical format from 0..6 (0-Sunday, 6-Saturday) by getting a new Date();

<script>
    var today = new Date();
</script>

But it’s hard to work with a number so I’ll create an array with the days in text format.

    var everyDay = new Array('sun','mon','tue','wed',thur','fri','sat');

To convert today’s date to a string using our array we can do this:

dayOfWeek=everyDay[today.getDay()];

We use the getDay() method to isolate the day only. Now that we have the day, we convert it to text by using the array we created earlier and feeding the variable today with the method getDay(). Here comes the good part.

Let’s say we wanted to check to see if it was a specific day and if it was, then set a variable. I wrote this on a Wednesday, so I can do this:

if (dayOfWeek=='wed') {
    message="It's hump day";
}
alert(message);

So, here’s what I get:
This is what I get since while I'm writing this on a wednesday

You can use a shortened version of the if statement to do the same thing, it looks funky at first, but it’s quite useful.

message=(dayOfWeek=='wed') ? "It's Hump Day" : '';
alert(message);

So we got rid of the curly brackets and wrote both the assignment to the variable in one line. It doesn’t seem that much shorter. The basic syntax is:

variable=(conditional) ? assignment : alternative ;

Where you set a variable and then execute a conditional statement between parenthesis as you normally would. If the condition is true, the variable gets the assignment to the right of the question mark, if it’s false, then the variable gets assigned the alternative.

This doesn’t seem that much shorter so let’s take a look at a more complicated example.

if (dayOfWeek=='mon') {
    message="Why can't it be Friday?";
} 

if (dayOfWeek=='wed') {
    message="It's hump day";
}

if (dayOfWeek=='fri') {
    message="The weekend is here!";
}

alert(message);

That’s a bit longer. We can both shorten as well as use nested versions of our if shortcut.

message=(dayOfWeek=='mon') ? "Why can't it be Friday?":
(dayOfWeek=='wed') ? "It's hump day" :
(dayOfWeek=='fri') ? "The weekend is here!":'';

alert(message);

So, we can ask a series of if then else statements in what’s technically a single line. This also happens to be more efficient since instead of doing three if statements, the message will stop checking for conditions as soon as one of the conditions is true. Of course, this kind of shortcut is not perfect for every condition, but a lot of the conditions you check have this structure.

Here’s the finished example…I’ve added a messages for other days of the week…otherwise, it would only work on the three days above. Also, I think it helps if you format it as below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Shorter If Example</title>
</head>
<body>
<script>
var today = new Date();
var everyDay = new Array('sun','mon','tue','wed','thur','fri','sat');
dayOfWeek=everyDay[today.getDay()];

    message=
    (dayOfWeek=='sun') ? "First day of the week" :
    (dayOfWeek=='mon') ? "Why can't it be Friday?" :
    (dayOfWeek=='tue') ? "Tuesdays are too much like Mondays" :
    (dayOfWeek=='wed') ? "It's hump day" :
    (dayOfWeek=='thu') ? "Almost Friday" :
    (dayOfWeek=='fri') ? "Friday is here!" :
    (dayOfWeek=='sat') ? "Last day of the week" :
    '';

    alert(message);
</script>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *