JavaScript in 3 Minutes: ES 2015 — let & const

Three minutes to learn the basics of var, let, and const

The block-scoped variables let & const are new in ES 2015. In addition to being block-scoped, they do not hoist. Over the next three minutes you’ll learn exactly what this means as we explore the basics of var, let, and const…

var - let - const

Let’s look at some definitions. We’ll start with var as it is the broadest of the three variables.

var — The variable may or may not be reassigned, and the variable may or may not be used outside of its block.

let — Is slightly less broad than var. With let, the variable may be reassigned, but the variable will only be scoped to the block which it is defined.

const — Is the strictest of all the variables. const cannot be reassigned, and is scoped to the block which it is defined. (However, properties can be mutated)

Block Scoped

With var, a variable is either globally scoped, or locally scoped to the function in which it is defined. Block scopes like if, for, while, {}, etc. have no effect on var.

let & const, on the other hand, are scoped within the block which they are defined. Let’s look at an example:

let x = 1;
{
  let x = 2;
  console.log(x); // 2
}
console.log(x); // 1

As you can see above, simply using brackets to create a code block will locally scope any variable declared within that block.

Be careful though. If you accidentally redeclare the same variable with the same block scope you will get an error:

let x = 1;
let x = 2;
Uncaught SyntaxError: Identifier 'x' has already been declared

Hoisting

let & const are not subject to hoisting and thus cannot be referenced prior to initialization.

Consider the following example:

function sayMeow(){
  console.log(cat); // undefined
  console.log(dog); // Uncaught ReferenceError: dog is not defined
  var cat = 'meow';
  let dog = 'woof';
}

Since the var declaration is hoisted, when we log cat, we get undefined. As let & const are not hoisted, if we try to reference the variable dog prior to its declaration, we get a ReferenceError.

const

One last thing I want to explore in this article is const. All of the above block scoping rules apply to const in the same way they do to let. The one difference between the two is that const cannot be reassigned. Let’s look at an example:

const cat = 'meow';
console.log(cat) // 'meow'
cat = 'woof'; 
// Uncaught SyntaxError: Identifier 'cat' has already been declared

But const does not make a variable entirely immutable. You can still alter properties on a const. Consider the following:

const cat = {
  sound: 'meow'
}
console.log(cat.sound); // 'meow'
cat.sound = 'woof';
console.log(cat.sound); // 'woof'

Key Takeaways

• var is the broadest of the three variables and provides no added value to your code with the addition of let and const.
• There is no need to continue using var. If you never need to reassign a variable, you should always be using const, otherwise, use let.

Closing Notes:

Thanks for reading! If you’re ready to finally learn Web Development, check out the Best Courses for Learning Full Stack Web Development. If you’re just looking to improve your JavaScript Skills, check out: A Beginners Guide to Advanced JavaScript

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.

If this post was helpful, please click the clap 👏button below a few times to show your support! ⬇⬇