JavaScript Variables: How To Name Them In The Best Possible Way?

Doesn't matter how small you project is, you will always declare,assign and read variables. But why named a good variable is so important? That's a good question and quite easy to answer : Increase readability and easier maintainability of your code. That being said, let's see good practices of how to declare and use variable correctly in JavaScript.

1 - (Good naming === easy reading) // true

Imagine the constructor function below, can you tell me what the code does at the first look? That look a mess, right? I mean, you write this today and case you need to go back to check the code 1 month later , I'm pretty sure it will take a time for you to understand it. Variables names like, z,x,y etc have no meaning, doesn't provide any info about their intent.

Now, instead of doing that, let's say you're looking at de same code, but this time you found variables with good names, at least better than before.

Well...That's look a litter better, doesn't? That's the power of good variables name.

2 - Don't use let

Do not panic, you can and should use let but sometimes is better to use const instead. As we already know the main difference between them is that const require a initial value, and once has initialized can not be reassigned. Let in other hand can be changed when needed and do not require a initial value;

A good practice is to always choose const over let, it's just a matter of preference, if that's not possible use let instead. Let's get a look at the code below. You can quickly conclude, even without knowing what happens inside anExempleFunction(), because was declared with a const type, after that it will only be read. The initialValue for instance, if was declared right, will be reassigned multiple times during execution.

3 - Declare the variables close as possible to the usage place.

Have you ever been in the situation of found a variable on the code and ask yourself where is it used? The possible problem was bad declaration place, you declared on top but used only at the end of the code.

The problem here is that result was declared at the beginning, but used only at the end. There isn't any good reason to declare the variable at the top of the function. For better understanding of the function and the purpose of result variable, always try to declare variables close as possible where its gonna be used. So...That's being said, let's improve this function by declaring close to return statement.

5 - Conclusion

First of all, prioritize const type, if the value needed to be changed use let instead. Don't declare variables on places where isn't used, that can make you look where the variable it used, try to declare close as possible where you will use. And finally, don't be afraid to use longer names: Clarity over brevity and more important write good names is very important. Like i said on the end of this article, i have read some articles before doing this and one of them said a quote that i agreed with him, he said to always follow the rule : the variable name should clearly, without ambiguity indicate what data holds the variable. To know more about this topic, you can check out it the link that i have use in below.

4 - Where did I read about that before write it?

Before I start to write all of this, I read the following articles :

1- https://www.w3schools.com/js/js_variables.asp

2 - https://www.w3schools.com/js/js_let.asp

3 - https://www.w3schools.com/js/js_const.asp

4 - https://dmitripavlutin.com/javascript-variables-best-practices/