When should you use
Note: the tl;dr is also a table of contents! So click to jump to a section or just scroll your way through. It’s your choice and I support both options!
Before we get started
This article assumes you are familiar with the different types of variable declarations in ES6+ (e.g.
let, and our old friend
var). If you need an introduction, here are a few great resources.
- const and let from Mozilla
- A gentle introduction to ES6: const, let, var on hackernoon
- You Don’t Know JS - Chapter 2: Syntax by Kyle Simpson
Ready? Let’s go!
Goals of these best practices
- Define a standard variable declaration ruleset
- Make our code consistent and easier to read
- Signal code intent (i.e. is this variable meant to change or not)
- Avoid unintended issues (e.g. hoisting, global object pollution)
const by default
A variable should represent one thing. Declaring our variables with
const helps us achieve this goal as we cannot change the assignment of our identifier once it has been initialized. We also leave a message (i.e. signal) in our code to our future selves and future developers that this variable should not be reassigned.
constis not a value that doesn’t change, but rather it is an identifier that does not get reassigned.
Note, that while variables declared with
const cannot be reassigned, the values are still mutable when dealing with complex types (i.e. Objects)
True immutability can be obtained through using
const with primitive types.
let once you see the value contained by the variable needs to change
Why? This will help you clearly denote which variables should change and which should not. Following this principal helps improve code readability as other developers will have a clearer sense of what variables change throughout program execution and which do not.
let only if you need to reassign a variable
forloops (e.g. i, j, etc.)
- Counters (e.g. for keeping track of the current number of DOM children)
- Mathematical formulas
- Form data (i.e. text input value while the user is typing)
- Toggling a boolean flag
Let’s create better for loops with
Do not use
In honor of our old friend
var, let’s talk it out and have a little fun…
So I really shouldn’t use
Well for one, using
var has side effects and pollutes the global scope. When creating variables using
var, not only do we have to deal with hoisting, but we also inadvertently add properties to the global object. Check it out.
Well, I just won’t use
var in the global scope and I’ll be fine.
Not so fast,
var does not support block scope.
Yep, that one has caught many a developer.
If you must use
var, be sure to declare your variables at the top of your scope chain. But really, it’s time to pour one out for
var. Start targeting modern browsers and/or incorporating babel into your workflow :).
By following these best practices for using
var, we can easily signal to ourselves and others the intent of our variables within the code.
Additionally, by utilizing these best practices, we create a consistent ruleset for our variables, avoid legacy declaration ‘gotchas’, and - ultimately - produce cleaner code.
Be sure to check out the additional resources below and happy coding!