2 Quick Tips for Better Programming in JavaScript
Elad Tzemach
Posted on November 14, 2021
Hi everyone!
I wanted to share 2 quick tips that have really helped me avoiding confusion in my JavaScript applications.
1. Use a Function to Set a Constant Value
Imagine you have the following code:
let userRank;
// some code..
// some more code..
if (condition1) {
userRank = 5;
} else if (condition2) {
userRank = 10;
}
Looks familiar? I've personally seen so many use cases of this.
It would work as we expect, but what if in 6 months one of our peers accidentally update userRank
on a different line of our code?
let userRank;
// some code..
// some more code..
if (condition1) {
userRank = 5;
} else if (condition2) {
userRank = 10;
}
// some code..
// some more code..
userRank = -10;
That's a bit confusing.. especially if it's a really long file, and it could lead to many weird issues.
If userRank
is supposed to be a constant value that depends on some conditions and cannot be changed throughout our application logic, why are we not declaring it as const
?
We could use the conditional operator, but it doesn't scale well in terms of code readability when there are multiple complex conditions to check for.
Another way we could solve it, is to store the value of userRank
in a getter function:
const getUserRank = () => {
let userRank;
// some conditions calculation
return userRank;
}
const userRank = getUserRank();
That way, no matter what, the value of userRank
could never be modified outside of that getUserRank()
function.
2. Use Object Destructuring When Passing Arguments to Functions
Have you ever created a new simple function that accepted only one argument? It was pretty clear to everyone what argument was needed to be passed in.
And then it was extended to support 2 arguments.. and then 5.. and before you knew it, you had something like this:
const someFunc = (firstName, lastName, isActive, isValidated, isRequired, isPrimary, isMembershipValid) => {
...
}
Calling this function could look something like this:
someFunc("Elad", "Tzemach", false, true, true, false, true);
As someone who is reading this function call, how am i supposed to know which function argument false
or true
is referring to?
It could be very challenging to memorize function signatures and not get them wrong when passing in different arguments.
One good way of handling it that is very simple and only requires a couple of more characters is using object destructuring:
const someFunc = ( { firstName, lastName, isActive, isValidated, isRequired, isPrimary, isMembershipValid } ) => {
...
}
This way, the arguments order doesn't matter, as long as you pass them all inside of an object to the function, and the code that is calling the function is much more readable:
someFunc({ firstName: "Elad", lastName: "Tzemach", isActive: false, isValidated: true, isRequired: true, isPrimary: false, isMembershipValid: true });
Happy coding!! 🚀
Posted on November 14, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 28, 2024