ECMAScript 6 features: let

With the target date of December 2013 looming ever closer, I thought it would be good to write up a series of posts concerning the upcoming ECMAScript 6. This post will talk about the let keyword. It’s a pretty simple concept, but I think it will clear up a lot of headaches with development.

let vs var

In JavaScript, the var keyword declares a variable. The scope of the variable defined using the var keyword is the enclosing function, or, if the variable is defined outside a function, the global scope (for front end development, usually the window object). The way JavaScript handles scoping can be confusing at times; especially because JavaScript has function-level scope. First, an example:

var x = 1;
console.log( x ); // 1

if ( true ) {
	var x = 2;
	console.log( x ); // 2
}

console.log( x ); // 2

People coming from a C family would be confused at this output, expecting x to output 1. That’s because the C family (as well as many other languages) enjoys block-level scope. That means a variable declared within any block, such as an if statement, won’t affect the global scope. In current JavaScript, however, variables enjoy function-level scope. That means blocks (such as the one above) won’t create a new scope—only functions do. A variable declared within a block statement gets hoisted up to the nearest function block, and if one doesn’t exist, the global object. So our code above might as well have read like this:

var x = 1;
console.log( x ); // 1

var x = 2;
if ( true ) {
	console.log( x ); // 2
}

console.log( x ); // 2

let, on the other hand, allows you to declare variables limited in scope to the block, statement, or expression where it’s used. Let’s try the example again, subbing in let for the x declared within the if statement:

var x = 1;
console.log( x ); // 1

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

console.log( x ); // 1

Much better! In my opinion, this is something that should have been included in JavaScript from the get-go. That’s not to say that it’s without its own caveats. You need to be mindful of redeclaration within things like switch statements, for example:

switch ( x ) {
	case 0:
		let foo;
		break;
	case 1:
		let foo; // TypeError for redeclaration
		break;
}

Barring this, I believe the let keyword will clear up some confusion that might come up with a variable declared within a for loop or if statement.