JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.
In this article, we’ll look at the best ways to define and use variables in our JavaScript code.
Always Use const or let to Declare Variables
We should use let and const to declare variables and constants respectively.
This way, we get block-scoped variables and constants so we won’t run into issues with variables or constants being accessed in places that we won’t expect.
Without strict mode on, using let and const will also stop us from creating global variables.
Global variables pollute the global namespace and the more complex our code is, the more likely that our global variables will have the same name in different places. Then unexpected behavior will occur because of that.
const also prevents us from the reassignment of its value after it’s set. Both let and const prevents us from declaring a variable with the same name twice.
For instance, we can declare variables and constants with let and const as follows:
let a = 1;
const b = 2;
In the code above, we declared a variable a with let and a constant b .
Then we don’t have to worry about them being declared somewhere else or in the case of b , its value being reassigned to something else.
Use One const or let declaration Per Variable or Assignment
We should put each of our let and const declarations in their own line.
For instance, instead of writing the following code to declare multiple variables in one line:
const a = 1,
b = 2,
c = 3;
We should instead put the const keyword in front of every declaration as follows:
const a = 1;
const b = 2;
const c = 3;
This way, we know that every line in the code above is declared with const . In the first example, we aren’t sure how they’re declared.
Also, it’s easier to swap variables that are in their own line since we can cut or copy and paste the whole line.
We can also step through each line with the debugger instead of looking at all the declarations at once.
Group All consts Declarations Together and Then Group All let Declarations Together
We should group all the const declarations together and then group all the let declarations together.
If we scatter them everywhere, then we’ll have a problem finding them later.
Also, we might need to assign a variable depending on one of the previously assigned variables.
For instance, if we have the following code:
const a = 1;
let foo;
const b = 2;
let bar;
const c = 3;
Then it’s hard to read and trace which variable is assigned to what. Instead, we should write the following:
const a = 1;
const b = 2;
const c = 3;
let foo;
let bar;
which is much more organized.
Assign Variables Where We Need Them But Place Them in a Reasonable Place
We should assign variables where we need since let and const variables are block-scoped and what those are the variables and constants that we should have.
Variables declared with var are function scoped and are hoisted so they can be accessed in places that we may not expect them to be accessed.
For instance, we should place our variables as follows:
const getGreeting = () => 'hi';
const greet = (name) => {
if (!name) {
return '';
}
const greeting = getGreeting();
return `${greeting} ${name}`;
}
In the code above, we have the greeting constant inside our greet function. We put it there so we don’t have to run the getGreeting function unnecessarily.
We only run the getGreeting function when the name is a truthy value so that we don’t have to run it on every call.
Therefore, we didn’t place the code for the greeting declaration at the top line of or greet function as follows:
const getGreeting = () => 'hi';
const greet = (name) => {
const greeting = getGreeting();
if (!name) {
return '';
}
return `${greeting} ${name}`;
}
It’s more efficient to declare variables and constants only when we need to use them.
Conclusion
When we declare variables, we should always use let or const to only declare block-scoped variables and constants.
const and let variables should be grouped in their own group. Also, they should be declared only when they’re needed.
