LEARNING: Conditional (Ternary) Operator

Quick post on the Javascript Ternary Operator and how it works.

This'll be a short-ish one, but I wanted to quickly dive into the Javascript ternary operator, which sort of functions as a clean shorthand for an if statement.

First, let's get the basic syntax out of the way:

condition ? expr1 : expr2 

Where:
condition is a boolean expression (an expression that evaluates to either true or false)
expr1 is returned if the condition evaluates to true
expr2 is returned if the condition evaluates to false

Spotify + Hulu just released a new promotion, where if you're a Spotify Premium member, you can get a Hulu Premium account for $0.99 / month (or something like that). So let's imagine you sign into your Spotify account and a Hulu ad pops up with a price. If you're a Spotify Premium member, the $0.99/month price displays, otherwise the regular $7.99/month price displays.

WITHOUT using the ternary operator, we might write the above logic like so:

let premiumMember = true; // we'll say the user is a premium spotify member

if (premiumMember) { // if the user is a spotify premium member
  var huluDisplayPrice = 0.99;
} else { // otherwise
  var huluDisplayPrice = 7.99;
};
console.log(huluDisplayPrice);
// 0.99

WITH the ternary operator, We can implement this same logic in one line of code:

let premiumMember = false // we'll say the user is NOT a premium spotify member this time
let huluDisplayPrice = premiumMember ? 0.99 : 7.99; // one-liner equivalent to entire if-else block above
console.log(huluDisplayPrice);
// 7.99

Since the condition (premiumMember) evaluated to false, expr2 (7.99) was returned.

This is a super simple example. There are a lot of different ways to play with the ternary operator... You can plug various types of expressions into the three ternary operands (condition, expr1, expr2), and it can get prettayyy prettay nifty. Feel free to explore more in the MDN docs.

---

I wanted to include a quick aside about the example above, relating to variable scope. I'll expand more on scope in a separate post, but check it out:

If we try to implement the above if-else block with a slightly different variable syntax (let huluDisplayPrice = vs. var huluDisplayPrice =)...

let premiumMember = true;

if (premiumMember) {
  let huluDisplayPrice = 0.99;
} else {
  let huluDisplayPrice = 7.99;
};
console.log(huluDisplayPrice);
// ReferenceError: huluDisplayPrice is not defined

Good god what happened. The code looks almost identical. This is where we see why variable declaration words matter. In ES6, variables defined with the let and/or const keywords are block-scoped, meaning they can't be referenced outside of the block that they're defined in. Just to illustrate this further, note that the following would technically work, bc the console.log() statements are implemented within the same block in which the let variables are defined:

let premiumMember = true;

if (premiumMember) {
  let huluDisplayPrice = 0.99;
  console.log(huluDisplayPrice); // 0.99
} else {
  let huluDisplayPrice = 7.99;
  console.log(huluDisplayPrice); // 7.99
}

Scope is a much more complex issue that I'll try to expand upon in a later post (some variable scoping concepts still confuse me), but I just wanted to point that out here.

--

Thx for reading, love you guys,

noah

view raw ternaryOperator.md hosted with ❤ by GitHub