5 Javascript Shorthands for Succinct Code
Code should look great! I believe code cannot be great unless it’s neat, succinct and readable — I’m sure you agree, reading extensive, messy, obscure code is no fun at all. We’ve all been there!
There are loads of Javascript shorthands and shortcuts out there. Sometimes they can be incredibly helpful, but sometimes they can obscure the meaning of the code, or introduce bugs. At Northcoders, we love showing our students how to take advantage of Javascript’s features and avoid the pitfalls — so I thought — why not share some of my favourite shorthands with the world?
I’ve picked out 5 really helpful Javascript tricks to help you write beautiful code… and given you a few heads up on how to avoid accidentally making it worse!
1. Ternary Operator
Here’s a way to make your if…else statements beautiful. Capture the essence of the if…else with a one-line alternative: the ternary operator. Consider:
this can be shortened to:
The conditional is evaluated first, and the first expression is executed if the condition passes, else the second expression is executed.
113 characters just turned into 68 bracket- and brace- free characters. What’s not to love?
You can also nest ternary statements. But nested ternary statements are pretty hard to read. If you need to nest, best practice would be to stick with if…else, to maintain a sense of priority.
2. Default Values and Parameters
You might often use if…else to set a variable to a default value, if the queried value is null or undefined.
We can use the OR operator ( || ) to neaten this up. Since logical expressions are evaluated from left to right, if the left-hand value before the operator is truthy, the variable will be assigned to the the left-hand value immediately since the truth of either part of the disjunction is enough to guarantee the truth of the entire statement. This is why it’s called “short circuiting”.
Else, if it is falsy, the variable will be assigned by default to the value after the OR operator. It looks like this:
Ah! That’s prettier. Using this increasingly common pattern has halved the length of the code in a very readable way.
You can also use short circuiting to create default parameters. Wherever arguments aren’t passed, or a falsy value is passed, the default is used. Consider what will happen if we run this code:
Well, since we’re not passing a second argument, an error will be thrown. Why? We can’t add undefined to 5! It’s NaN (not a number). To guard against this we can short-circuit using the OR operator like this:
As of ES6, Javascript has a new syntax for default parameters which are arguably even neater. Simply add default values in the function head:
A word of warning — remember that empty strings and the number zero are amongst the falsy values, so if these are passed, the default value on the right of the || will be used!
3. Object Values
With ES6, we no longer have to repeat the value of an object key where the name of the key and the value are identical. This code:
becomes:
Beautifully succinct!
4. Spread Operator
Another ES6 favourite — the spread operator (…) — lends itself to neat, concise code. Essentially, this operator expands expressions where multiple arguments, variables or elements are expected. There are many use cases for this operator, so I’ll show you a couple of my favourites to demonstrate how it works.
Here, we’ve passed a single expression, the dimensions array, to the function getVolume — but not before expanding it with the spread operator so that three arguments are provided consistently with the 3 parameters of getVolume.
Here’s another use case. Previously, we had to operate on arrays using methods like .slice(), .push() or .concat() — for example:
With the spread operator, we can perform these operations more elegantly:
There’s so much more the spread operator can do — watch out for a future blog post on this!
5. Template Literals
How often do you find yourself doing something like this?
I know I’ve always found this sort of thing a tad confusing at best, and downright ugly and unreadable at worst. Template literals allow us to compose strings with a little more concision and grace. Surround the string with backticks as opposed to single or double quotes, and interpolate your string with Javascript using this syntax: ${}. Whatever is between the curly braces will be evaluated as Javascript.
How much neater is that! It’s easy for the eye to follow, since it’s naturally drawn to the dollar signs which signify the start of a segment of evaluable code, familiarly wrapped up in curly braces just like the code within functions and loops.
BONUS: Declaring Variables
Here’s a quick time- and space-saver for you. Did you know that you don’t have to declare multiple variables over multiple lines? This code:
is equivalent to:
Wow — much nicer!
However, if you’re assigning values to many variables, it can still be more readable to do this over several lines. Use your best judgement!
Which Javascript shorthands do you use to help you write succinct, readable code? Leave a comment to let me know!
Enjoy this? Help me out and favourite/share. Thank you :)
