
All Levels
Anyone learning JavaScript can dive into this post
JavaScript has gone through numerous iterations over the past few years, and it only gets better and better. For the longest time, JavaScript only had var
as an option for declaring a variable. var
had numerous issues that I won’t get into at the moment, but something had to be done. ES6 brought the advent of let
and const
, which opens up new doors for JavaScript development. Let’s dive into how each option works and their main differences.
var
If a var
is defined in a block or function, it is stored in that scope/block. A var
outside of the current scope can be reassigned. var
was originally the only way to assign a variable before ES6+ introduced let
and const
. There are no real advantages to using var
unless you want to be able to change the variable outside of its scope.
Disadvantages:
- Can be updated outside of the scope which can lead to accidental overrides.
- Can be assigned multiple times in the same scope, which is not good practice.
let
Not too different on the surface, but it does have some significant advantages. Can only be assigned once in the same scope, throws an error if a variable with the same name is declared again. A let
declaration cannot be updated outside of the current scope or block. This effectively limits the declaration to its own block.
Advantages:
- Throws error if the same variable is assigned twice.
- Good for
for
loops, functions, and blocks that shouldn’t have their declarations overwritten from other blocks and scopes.
const
Similar to let
, const
is defined in the block scope. const
cannot be reassigned, making it a read-only variable declaration. Useful for values that aren’t intended to be changed throughout the entire lifecycle of your code. You will often see const
assignments in all caps since that is good practice.
Advantages:
const
variables can’t be reassigned, making it the safest way to enforce a read-only value.- Good for enforcing and organizing types of variable assignments(instead of everything being a var, you can have some variables be a
const
, which helps knowing the intended purpose of a variable and separating logic).
let and var Scope Examples
Let’s dive deeper into how declaring with let
limits the variable to a block.
function run() { let foo = 'bar' if(true) { let foo = 'foo' console.log('block call: ', foo) } console.log('function call: ', foo) } run() // CONSOLE: // block call: "foo" // function call: "bar"
Here, we have two scopes: the function run
() and the if
block. The function call foo
remains the same despite the same variable being declared in the if
block. The function has its own foo
, and the if
block has its own version of foo
. Let’s see what happens when we use var
instead.
function run() { var foo = 'bar' if(true) { var foo = 'foo' console.log('block call: ', foo) } console.log('function call: ', foo) } run() // CONSOLE: // block call: "foo" // function call: "foo"
What’s happening here? By the time we get to the foo
call in the if
block, we declare foo
again. Since var
has access to scopes outside of it, the foo
in the function scope is accessible. As a result, it is updated to be "foo"
instead of its original value "bar"
.
When we use let
, we don’t have to worry about affecting variables outside of the scope we’re working in. That is why ES6 gave us this feature, it allows for more maintainable code as projects get larger and larger.
Declaring let Twice in The Same Scope
Simply put, JavaScript does not allow you to do this. This is mostly to prevent accidental overrides of a variable. You should never intend to declare a variable twice in the same scope.
// Throws error, don't do this // Uncaught SyntaxError: Identifier 'dontCopy' has already been declared let dontCopyMe = 1 let dontCopyMe = 2 function copied() { let dontCopyMe = 1 let dontCopyMe = 2 // Also throws error }
// This will work, but you should never do this var dontCopyMe = 1 var dontCopyMe = 2 console.log(dontCopyMe) // RESULT: 2
When To Use const
Let’s start with what you can’t do with const
. When you assign a variable, whether that’s just a string or an array, you cannot reassign a different value to that variable. You can mutate an array that is assigned as a const
variable as long as you don’t redefine the variable.
You should use a const
declaration when you want to enforce an assignment to a variable. When you use const
, you are guaranteeing that the assignment will stay the same despite the state of your application. It’s the most secure way to make sure you don’t accidently reassign a variable.
The benefits of using either of these 3 options correctly becomes more apparent as you develop your application(s). It goes without saying that having more options is always better. Happy coding!