This content originally appeared on Go Make Things and was authored by Go Make Things
This week, we’re looking at variables and functions, and some intermediate JavaScript features that make working with them a bit nicer.
Today, we’re kicking things off with the ternary operator. Let’s dig in!
What’s a ternary operator?
A ternary operator provides a shorter way to write if...else statements. It has three parts:
let someVar = [the condition] ? [the value if true] : [the value if false];
It’s the equivalent of this.
let someVar;
if ([the condition]) {
someVar = [the value if true];
} else {
someVar = [the value if false];
}
An example of a ternary operator
Let’s say we wanted to define answer as num if num is greater than 10. If not, we’ll use 42.
We can do that with a ternary operator, like this.
let num = 0;
let answer = num > 10 ? num : 42;
It’s the same as doing this, but consolidated down to one line.
let num = 0;
let answer;
if (num > 10) {
answer = num;
} else {
num = 42;
}
When should you and shouldn’t you use ternary operators?
Ternary operators are great for defining values based simple if...else checks.
Once you start getting into complex checks with lots of and and or operators (&& and ||), they become really hard to read. This is also true for nested if...else checks.
For example, imagine something like this…
let name;
if (api.data.firstName.length > 0) {
name = api.data.firstName;
} else if (api.data.lastName.length > 0) {
if (api.data.title.length > 0) {
name = `${api.data.title} ${api.data.lastName}`;
} else {
name = `Mx. ${api.data.lastName}`;
}
} else {
name = 'friend';
}
You could write that as a nested ternary operator like this…
let name = api.data.firstName.length > 0 ? api.data.firstName : (api.data.lastName.length > 0 ? (api.data.title.length > 0 ? `${api.data.title} ${api.data.lastName}` : `Mx. ${api.data.lastName}`) : 'friend');
Is it shorter? Sort of, I guess. Is it more readable? Hell no!
The ternary operator shines when it makes your code more readable and easy to skim.
If it’s not doing that—if it makes your code harder to quickly parse and understand—use a traditional if...else check instead.
⏰🦉 Early Bird Sale! Today through Monday, get 40% off registration in the next session of the Vanilla JS Academy.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2023-03-13T14:30:00+00:00) The ternary operator in JavaScript. Retrieved from https://www.scien.cx/2023/03/13/the-ternary-operator-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.