2 Quick Tips for Better Programming in JavaScript
Tags: javascript, webdev, programming
Published: 2021-11-14 21:44:32

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:

```jsx
  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?

```jsx
  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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/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:

```jsx

  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:

```jsx

const someFunc = (firstName, lastName, isActive, isValidated, isRequired, isPrimary, isMembershipValid) => {
...
}

```

Calling this function could look something like this:

```jsx

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:

```jsx

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:

```jsx

someFunc({ firstName: "Elad", lastName: "Tzemach", isActive: false, isValidated: true, isRequired: true, isPrimary: false, isMembershipValid: true });

```



Happy coding!! :rocket: