I’ve recently started using the ternary operator more. For those not in the know already, it’s a bit like shorthand for
if () {
} else {
}
but with a few similarities to other parts of the language too (NB this is based on the javascript implementation – other languages may differ slightly).
So, in the simplest case, instead of writing
if (statement)
{
codeblock1
} else {
codeblock2
}
we can write
(statement) ? codeblock1 : codeblock2 ;
which is a great way of cutting down on lines of code when each code block is only a single line. A few tricks to make using it more fulfilling are as follows.
The ternary operator can be split over two lines
So instead of
(statement) ? codeline1 : codeline2 ;
I mostly use
(statement) ? codeline1 :
codeline2 ;
I find it more readable, as it really draws out the structure of what the code is doing. It also looks a bit like a switch statement (which, incidentally, I hear runs slow in javascript), which will come in useful later.
You can get rid of the brackets/parentheses
I tend to leave them in though as if the statement to be queried is long it would otherwise be easy to not notice that at the end of it comes a ?. The brackets remind you that what’s within is to be evaluated as true or false.
The ternary operator doesn’t have to start the line, and often shouldn’t
The following lines are equivalent:
(cetacean.mass > 1000) ? var family = 'whale' : var family = 'dolphin';
var family = (cetacean.mass > 1000) ? 'whale' : 'dolphin';
As you can see the second version results in less code, which is also easier to comprehend as the action of the line – assigning a value to a variable – is clear from the beginning of the line. As a rule of the thumb I put as little within the ternary operator as possible.
(As an aside the && and || operators – normally seen within if statements – can also be employed, using similar syntax, to assign values to variables. This is why I don’t think it’s fair to say that the ternary operator is just shorthand for if … else …, as it bears similarities to other bits of the language too. )
Sometimes the ternary operator can’t start the line
The only example I’ve come across so far is
return (cetacean.mass > 1000) ? 'whale' : 'dolphin';
Putting the return after the statement to be queried causes an error.
The ternary operator can be nested to emulate ‘else if’
First of all
if(statement1) {
code1
} else if (statement2) {
code2
} else if (statement3) {
code3
} else {
code4
}
Can be rewritten as
if(statement1) {
code1
} else {
if (statement2) {
code2
} else {
if (statement3) {
code3
} else {
code4
}
}
}
and so on for more statements.
But we know ifs can be rewritten using ternary, so it’s also equivalent to:
(statement1) ? code1: ((statement2) ? code2 :( (statement3):?code3: code4));
which can unbelievably be rewritten on more lines as
(statement1) ? code1 :
(statement2) ? code2 :
(statement3):? code3 :
code4 ;
So now you can construct very concise, relatively fast and, in my humble opinion, readable if … else …/switch statements. This is particularly valuable for defning the value of a variable quickly, and based on a variety of conditions, eg:
var family = (cetacean.mass > 1000) ? 'whale' :
(cetacean.noseshape == 'cylinder') ? 'dolphin':
'porpoise';
Neat!
A very short post to announce my third jQuery plugin: listSplitter, which takes a long list of categorised items (where the categories can overlap) and creates a tabbed interface to show only one category at once. I haven’t done a demo yet (well, I have, buthaving teh same old problem transferring to the server as the server runs on UNIX while my laptop is Windows. I recently found out why this causes a problem, but no easy fix has presented itself) so you’ll just half to take my word for it, though before too many months have gone by I will use it as the basis for a new portfolio.
Subscribe to some, or all, of my blog
