On Javascript Shortcuts

Today I’m going to go over a few useful Javascript shortcuts I’ve picked up. I’ll start with a few that most people probably know about, then move on to some other stuff I’ve recently picked up.

The Ternary Operator
The ternary operator is a shorthand way of writing an if/else statement. It takes a condition and two expressions, making it the only Javascript expression (currently) to take three operands. The operation returns the first expression if the condition equates to false, the second if it equates to true.

const result = 10 > 9 ? ‘10 is greater than 9’ : ‘9 is greater than 10’;

Our result variable will be assigned the string ‘9 is greater than 10’.

A possibly less known fact about the ternary is that you can use it to perform multiple operations per evaluation.

let red = ‘red’, isBlue = true, counter = 0;
(red === isBlue) ? (
isBlue = true,
counter++
) : (
isBlue = false,
counter--
);

After the ternary completes, isBlue will evaluate to true and counter will equal -1. Just don’t forget your commas to separate lines and parentheses to distinguish the expressions.

A Shorthand ‘for’ Loop
Everyone with a basic knowledge of Javascript is familiar with a for…in loop used to iterate over an array,

let array = [1, 2, ‘cat’, ‘blue’];
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}

This will log 1, 2, 'cat', 'blue' to the console, as i is set to zero and increases as long as it’s less than the length of array, making it equivalent to each index of the array and logging it in turn. Now check this out.

let array = [1, 2, ‘cat’, ‘blue’];
for (let i in array) {
console.log(array[i]);
}

This will ALSO log 1, 2, 'cat', 'blue' to the console, and takes about half the time to write (the actual loop part). Obviously if you want to increment by a different number this won’t work, but the majority of the time you’re using a loop it’s probably to check or manipulate every value. NEAT.

A Shortened Math.floor
I find myself using Math.floor(n) pretty often when doing things like grabbing a random array index or generating a random whole number. It’s not really a long operation syntactically , but when used in combination with other math operations it can be less than attractive:

Math.floor(Math.random() * 10)

That’s a lot of Math. ‘s just to get a random number. Enter bitwise operators.

~~(Math.random() * 10)

Yes, I did just do that. Same result as the previous example, less code. Some fancy stuff is going on here behind the scenes involving flipping all the binary 1’s and 0’s that make up a base-ten number twice, leaving us with essentially a rounded number. This will round down to the closest whole number for number greater than zero, and round up for numbers less than zero.

A Quick and Dirty ‘if’ Statement

This one’s very straightforward and easy to understand, but might not be immediately obvious if you’ve never encountered it. First a normal if statement:

if (sunny === true) {
goToTheBeach();
}

Although the shorthand might be a bad idea for anything much more complex than the example above, if you keep the code to one line it probably won’t destroy everything:

sunny && goToTheBeach();

That’s it! If both sunny and goToTheBeach are defined and not falsey, the function executes. Quick, simple, and probably easy to screw up your code if you’re not careful about what you pass. But in the constant struggle for short and succinct code, you should always take risks if there’s even a chance it’ll get you a leg up on the slower version of you that still writes if statements in three lines.

(Editors Note: Although you should take the advice presented here at your own risk, all the above examples should be perfectly functional in the way they are presented. For example, the for…in loop may not necessarily loop over your array in the order you expect. If this bothers you, see note above about taking risks to get ahead, or read the documentation at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in)

Like what you read? Give Chris Dakin a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.