Getting To Know JS: let, const and var

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.

The Differences Between let, const, and var

While subtle, the differences can create much more readable and maintainable code.

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.

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.

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.

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!