Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan
JavaScript

JavaScript ES6 let

Cory Rylan

- 2 minutes

There are some very exciting features coming to JavaScript over the next few months in ES2015 or known as ES6. Not all browsers support all of the new ES6 feature set but you can use a transpiler such as BabelJS or TypeScript to transpile ES6 to working in the browser ES5. Browsers are actively working on these features and some you can try out today.

This post I am going to cover the let statement. let brings some new functionality that will help keep our code from falling into some of JavaScript's tricky parts.

JavaScript ES5 and earlier has function scoping available. It turns out you can do just fine with function scope but programmers coming from a Java or C# background may get tripped up from using block scoping. So lets look at a example.

function foo() {
var bar = 0;
if (true) {
var bar = 1; // Same variable
}
console.log(bar); // '1'
}

In this example foo() returns 1 even though the inner bar assignment is in the if block. This is because the inner bar assignment is not scoped to the if block but rather the function. This can be a common source for bugs. In JavaScript any variables declared in a function are hoisted to the top of the function. So the previous example is behaves as if you wrote it in the following format.

function foo() {
var bar = 0;
var bar = undefined;
if (true) {
bar = 1; // Same variable
}
console.log(bar); // '1'
}

The inner bar is hoisted to the top of the function then reassigned to equal one in the inner block. Another common case of this behavior is in for loops.

function foo() {
var i = 'hello'; // Same variable
for (var i = 0; i < 3; i++) {
// Same variable
console.log(i); // '1 2 3'
}

console.log(i); // '3'
}

We get back 3 instead of 'hello' because our i variable was hoisted to the top of the function. As you can see this can cause confusion and introduce bugs into our code. So using the new ES6 let statement we can solve some of these issues.

function foo() {
let i = 'hello'; // Different variable
for (let i = 0; i < 3; i++) {
// Different variable
console.log(i); // '1 2 3'
}

console.log(i); // 'hello'
}

Using let we can block scope our variables and prevent them from being hoisted. Using let also prevents the accidental creation of duplicate variables. We will get a error if we have two variables named the same and declared with let within the same block. var would of silently
and override the first declaration.

function foo() {
console.log(bar); // ReferenceError
let bar = 2;
}

function foo() {
let bar;
let bar; // TypeError
}

Once you start using ES6 its recommended to always use let over var for variable creation. This will help keep consistency and prevent confusion of the two. let and many other ES6 features will make JavaScript easier to maintain and use for the future.

Twitter Facebook LinkedIn Email
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

JavaScript

Use JavaScript Date Objects with the HTML5 Date Picker

Learn how to easily use both the native HTML5 datepicker and JavaScript Date objects together.

Read Article
Web Performance

Design System Performance with Clarity Core Web Components

Learn how to build high performance UI and Design Systems on the Web using Clarity Core.

Read Article
Web Components

State of Web Components in 2020

Learn a brief overview on Web Components and the latest tech available to build and distribute components across the Web.

Read Article