The early return pattern and the JavaScript void operator
Earlier this year, I wrote about my love of the early return pattern.
This week, my friend Kieran Barker taught me about the void operator, and how it can be paired with the early return pattern.
Let’s dig in!
An example of the early return pattern
With the early return pattern, you use the return operator to end a function early instead of an if...else statement. In code that involves a lot of checks, it can make your code a bit cleaner and easier to read.
For example, here’s a function that toggles password visibility.
/**
* Toggle the visibility of a password field
* @param {Node} field The field
*/
function toggleVisibility (field) {
// If the field is hidden, show it
// Otherwise, hide it
if (field.type === 'password') {
field.type = 'text';
} else {
field.type = 'password';
}
}
And here’s that same function using the early return pattern.
/**
* Toggle the visibility of a password field
* @param {Node} field The field
*/
function toggleVisibility (field) {
// If the field is hidden, show it
if (field.type === 'password') {
field.type = 'text';
return;
}
// Otherwise, hide it
field.type = 'password';
}
Using the void operator with the early return pattern
In the early return pattern, we run our return on its own line, with no value after it. The returned value from the function when you do this is undefined.
// returns undefined
let toggled = toggleVisibility(field);
If you wanted to save space, you could return the last operation that runs.
/**
* Toggle the visibility of a password field
* @param {Node} field The field
*/
function toggleVisibility (field) {
// If the field is hidden, show it
if (field.type === 'password') {
return (field.type = 'text');
}
// Otherwise, hide it
field.type = 'password';
}
But doing this means that sometimes text will get returned out of the function. We don’t want that.
The void operator runs the operation, but returns undefined.
/**
* Toggle the visibility of a password field
* @param {Node} field The field
*/
function toggleVisibility (field) {
// If the field is hidden, show it
if (field.type === 'password') {
return void (field.type = 'text');
}
// Otherwise, hide it
field.type = 'password';
}
Should you use this?
Personally, I favor readability over brevity, and think return on its own line is more readable.
But it’s nice to have options!