The Features of ES6 Part 1: Let

Thursday, July 31, 2014

The next version of ECMAScript is on the way, and I’m  genuinely excited about the changes to the JavaScript language. Thus, a series of posts with code and commentary will commence.

let: The Story

Variable scope in JavaScript has been a source of surprises and bugs over the years. The surprise is because JavaScript only offers function scope and global scope to control the lifetime of a variable. There is no block scope.

var doWork = function(flag){
    if(flag){
        var x = 3;
    }
    return x;
};

var result = doWork(true);
expect(result).toBe(3); // PASS!!!!!

The new let keyword of ES6 will replace var for variable declarations and provide true block scoping.  

var doWork = function(flag){
    if(flag){
        let x = 3;
    }
    return x; // ReferenceError: x is not defined
};

// Prepare for runtime error ...
var result = doWork(true);
expect(result).toBe(3);  

 

Iteration statements also benefit from let.

var doWork = function(){
    for(let x = 0; x < 3; x++) {
        // ...
    }
    return x; // ReferenceError: x is not defined
};

let: The Significance

The var keyword is still supported in ES6, but should be thought of as an obsolete keyword when writing ES6 code.

let is the new var!

Will let make JavaScript code better?

I doubt if let will prevent a significant number of bugs, but I do think JavaScript code will improve.

  • We can declare variables close to where they are needed instead of declaring all local variables at the top of a function, which is a defensive practice followed today to avoid var related bugs.
  • We don’t need to introduce a second nested function or IFFE only to control the scope of a variable (another defensive practice you’ll see in JS libraries).

The end result is code using let should be easier to read, and perhaps just a tiny bit safer, too. Next up we’ll look at const, and eventually move on to some of the prime movers for a paradigm shift in JavaScript programming.

Want more? Watch JavaScript Fundamentals for ES6 on Pluralsight!


Comments
gravatar Steve Gentile Thursday, July 31, 2014
Hi Scott, I've been wanting to move forward now with the ES6 features. I'm thinking of use Traceur. Have you tried it - and what are you using if anything ? Also, just fyi - you've probably seen this but might want to mention it: http://www.es6fiddle.com/ Thanks!!! Steve
gravatar scott Thursday, July 31, 2014
Steve, yes, traceur works well for the features it covers, which is all the new syntax plus some other things. There are grunt and gulp tasks you can combine with a watch to make development just flow.
gravatar Rob Thursday, July 31, 2014
Whenever using Traceur, be sure to have a look at the generated JS output. Some ES6 features translate cleaner to ES5 than others. let, as nice as it is, generates some very unfriendly ES5 code from Traceur right now. That might change in the future, so keep an eye on it.
gravatar scott Thursday, July 31, 2014
@Rob: Yah, the perf with let is an issue. I'd like to see a flag that would favor perf over semantics (in other words, allow me to gain perf instead of having true block scope). I can make that work.
gravatar Manuel Patrone Friday, August 1, 2014
Glad that you started this series. You have a lot of material to cover... ;-) On the subject of transpilers, have you looked at Narcissus?
gravatar scott Monday, August 4, 2014
@Manuel: I will have to try it out. So far I've only been using Traceur.
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!