Code Patterns in JavaScript
See this and many other articles at lucaspaganini.com
Suppose you have a function that should only run if a given condition is true.
You could wrap your implementation in an if statement.
const onSubmit = (form) => {
if (form.valid) {
// Do something here
}
};
But a clearer approach is to use an early return if the condition is false.
const onSubmit = (form) => {
if (form.valid === false) {
return;
}
// Do something here
};
See, instead of running if the condition is true, you can invert the logic and refuse to run if the condition is false.
Those if statements are called guards because they prevent your code to run. And you can have as many guards as you want.
const onSubmit = (form) => {
if (form.valid === false) {
return;
}
const userData = form.value;
if (isValidUser(userData) === false) {
return;
}
if (emailIsTaken(userData.email)) {
return;
}
// Do something here
};
That avoids unnecessary layers of nesting and makes it very clear to anyone reading your code what are the requirements for it to run.
Early Exits
This pattern is called “early returns”, but I don’t really like that naming because it seems to only apply to return
statements and that’s not what this is about.
A better name for it is “early exits”, after all, you can exit your code in other ways.
For example, if you’re not expecting those conditions to be false
, you can throw
instead of returning.
const onSubmit = (form) => {
if (form.valid === false) {
throw Error('Form is invalid');
}
const userData = form.value;
if (isValidUser(userData) === false) {
throw Error('Invalid user data');
}
if (emailIsTaken(userData.email)) {
throw Error('Email is already taken');
}
// Do something here
};
Conclusion
References are in the references.
If you enjoyed the content, you know what to do. We have many other short and informative articles on our site. Subscribe if you’re interested in that.
Have a great day and see you soon.
Top comments (0)