JavaScript ternary operators and nullish coalescing
optional shorthand ways of writing if/else statements
Introduction
As a beginner, you might write something like this:
function calculatePrice(price, taxes, desc) {
// using if statements
if (taxes >= 0) {
taxes = taxes
} else {
taxes = 0.05
}
if (desc || desc == "") {
desc = desc
} else {
desc = "default item"
}
const total = price * (1 + taxes)
console.log(`${desc} with tax: $${total}`)
}
calculatePrice(100, 0.07, "Item A")
calculatePrice(100, 0, "Item B")
calculatePrice(100, undefined, undefined)
/* output:
"Item A with tax: $107"
"Item B with tax: $100"
"Default item with tax: $105"
Ternary operators
To avoid those if { // one liner } else { // one liner } structures, we can use the ternary operator to put this branching structure in one line, thereby reducing the number of lines of code:
function calculatePrice(price, taxes, desc) {
// using ternary operators
taxes = (taxes >= 0) ? taxes : 0.05
desc = (desc || desc == "") ? desc : "Default item"
const total = price * (1 + taxes)
console.log(`${desc} with tax: $${total}`)
}
calculatePrice(100, 0.07, "Item A")
calculatePrice(100, 0, "Item B")
calculatePrice(100, undefined, undefined)
/* output:
"Item A with tax: $107"
"Item B with tax: $100"
"Default item with tax: $105"
10 lines of code become 2!
Nullish coalescing (??)
Even better than ternary operators, we have the nullish coalescing operator which looks like this, when taking the above example:
function calculatePrice(price, taxes, desc) {
// using nullish coalescing
taxes = taxes ?? 0.05
desc = desc ?? "default item"
const total = price * (1 + taxes)
console.log(`${desc} with tax: $${total}`)
}
calculatePrice(100, 0.07, "Item A")
calculatePrice(100, 0, "Item B")
calculatePrice(100, undefined, undefined)
/* output:
"Item A with tax: $107"
"Item B with tax: $100"
"Default item with tax: $105"
Browser compatibilities
Nullish coalescing may not work in some browsers such as Internet Explorer, but ternary operators have greater compatibility