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!