2 Quick Tips for Better Programming in JavaScript

#javascript #webdev #programming

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 });