Categories
JavaScript Best Practices

JavaScript Best Practices — Strings, Booleans and Constants

Spread the love

JavaScript is a very forgiving language. It’s easy to write code that runs but has issues in it.

In this article, we’ll look at how we should work with strings, booleans, and constants in JavaScript.

Avoid Magic Strings

Just like magic numbers, magic strings are just as bad.

If we have the same string used in multiple places without explicitly stating the meaning, then we should assign the value to a named constant.

For instance, if we use the string 'employee' everywhere, then we should explicitly assign it to a constant.

We can assign it by writing;

const WORKER_TYPE = 'employee';

so that we know that it’s referring to the type of worker in a company.

Also, changing it would be easier since we only have to change it once rather than in many places.

We may also decide to make our program international. Then this can let us translate it easily.

Watch for Off-by-One Errors

We should watch for the index of a string so that we won’t try to access an index beyond the length of the string minus 1.

Check How Our Language and Environment Support Unicode

If we work with Unicode characters, then we’ve to check if our language or environment actually supports it.

JavaScript programs should support Unicode in most cases, but we still have to check.

Decide on an Internationalization/Localization Strategy Early in the Lifetime of a Program

Internationalization and localization are major issues.

If we have to translate and localize our program, then it’s going to be a lot of working doing the translations and making everything act right in all the supported languages.

If we Need to Support Multiple Languages, Use Unicode

Unicode supports many languages ut of the box.

Use Boolean Variables to Document Our Program

We can assign boolean expressions to a variable so that we know what the expression is testing.

For instance, instead of writing:

navigator.userAgent.toLowerCase().indexOf('mac') !== -1

We can assign that to a variable by writing:

const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;

Then we know that we’re checking for Mac users on our website.

Use Boolean Variables to Simplify complicated Tests

If we have complex tests, then we can also assign the expressions to variables so that we can see them easily.

For instance, if we have:

!error && MIN_COUNT < lineCount && lineCount < MAX_COUNT

We can define a variable to store that as follows:

const successfullyReadFile = !error && MIN_COUNT < lineCount && lineCount < MAX_COUNT

Now we know that those expressions together are for checking whether we read a file successfully or not.

Simulate Enumerated Types

Enum types are great for setting variables that can take on a few possible choices.

However, JavaScript doesn’t have an enum type.

However, we can simulate that with static variables of a class as follows:

class Colors {}
Colors.RED = 'red';
Colors.GREEN = 'green';
Colors.BLUE = 'blue';

We can also put the choices in an object:

const Colors = {
  RED: 'red',
  GREEN: 'green',
  BLUE: 'blue',
}

Then we can use them as follows:

const color = Colors.RED;

Use Named Constants in Data Declarations

Named constants are great for data declarations.

If there’re values that we don’t change and use in many places, then we should assign them to a named constant.

For instance, we can write:

const MAX_DONUTS = 10;

to set the maximum amount of donuts someone can eat.

Avoid Literals

It’s similar to the advice of the previous section. If we have literals that don’t have an obvious meaning, then we should assign them to a named constant.

For instance, if we have:

for (let i = 0; i < 10; i++) {
  //...
}

We have 10 that we don’t know the meaning of.

So instead, we write:

const MAX_DONUTS = 10;
for (let i = 0; i < MAX_DONUTS; i++) {
  //...
}

so that we know 10 is the maximum number of donuts.

Use Named Constants Consistently

We should use name constants consistently rather than using constants in some places and literals in others.

This way, we won’t forget to update values in some places if we need to.

Conclusion

We should avoid any magic strings and use named constants instead. This way, we’ll only have to change one place if the constant value needs to be changed.

They also make reading the code easier since we know the meaning of them.

If we have boolean expressions that are long, we may want to assign them to a variable so that we know what they’re checking.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *