DEV Community 👩‍💻👨‍💻

Elad Tzemach
Elad Tzemach

Posted on

2 Quick Tips for Better Programming in JavaScript

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;
     }
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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) => {
...
}

Enter fullscreen mode Exit fullscreen mode

Calling this function could look something like this:


someFunc("Elad", "Tzemach", false, true, true, false, true);

Enter fullscreen mode Exit fullscreen mode

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 } ) => {
...
}

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Happy coding!! 🚀

Top comments (1)

Collapse
 
pachverb profile image
new/bird

fine, good job

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await