The let Keyword

Contact Us or call 1-877-932-8228
The let Keyword

The let Keyword

In JavaScript, as we have seen, a variable declared with the var keyword has function-level scope; the variable has global scope if created outside of any function. The let keyword works in a similar fashion but has block-level scope - with for loops and if statements being two common examples of enclosing blocks.

Keep in mind that the let keyword is a relatively-recent development in JavaScript - a new feature of ECMAScript6 (also known as "ES2015"). Like any ES2015 feature, we need to keep in mind that older browsers won't always implement the let keyword. The caniuse.com site is a great reference for checking browser support.

JavaScript precompilers, like CoffeeScript, allow you to write code using ES2015 standards and compile to ES5.

Let's look at a demonstration that compares when var and let are different and when they are the same:

Code Sample:

Scope/Demos/let.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Let</title>
	<script>
		var var1 = 'foo1';
		var let1 = 'bar1';

		function setVars() {
			var var2 = 'foo2';
			var let2 = 'bar2';
		}

		function forLoops() {
			for(var var3=0; var3<10; var3++) {
				//do something here
			}
			for(let let3=0; let3<10; let3++) {
				//do something here
			}
			
			/*
				this would generate an error for
				let3 but not for var3: var3 is scoped
				to the enclosing function (forLoops) but
				let3 is scoped to its enclosing block
				(the for loop)
			*/
			document.write("var3 has value: " + var3);
			document.write("<hr>");
			document.write("let3 has value: " + let3);
			document.write("<hr>");
		}
	</script>
</head>
<body>
	<h1>Let Example</h1>
	<p><em>This page generates errors</em></p>
	<script>
		/*
			this would work: both var1 and let 1 have global scope
		*/
		document.write("var1 has value: " + var1);
		document.write("<hr>");
		document.write("let1 has value: " + let1);
		document.write("<hr>");

		setVars();

		/*
			this would generate an error - but the same error for both:
			both var2 and let2 are scoped local to function setVars,
			and thus not accessible here
		*/
		document.write("var2 has value: " + var2);
		document.write("<hr>");
		document.write("let2 has value: " + let2);
		document.write("<hr>");

		forLoops();
	</script>
</body>
</html>

Code Explanation

We have three sets of variables here - var1, var2, and var3 (all created with the var keyword) - and let1, let2, and let3 (all declared with the let keyword).

The first set of variables - var1 and let1 - are both global in scope, because neither is created inside of a function nor a block. Thus neither generates an error when we access them to write them to the screen on lines 44 and 46.

var2 and let2 are both declared inside of function setVars() and have scope specific to that function; as such, we get an error when trying to access either variable. Lines 56 and 58 both generate the same "Uncaught ReferenceError" error when we try to write the variables to the screen. (Line 56 generates an error and execution halts so we don't actually get the second error from line 58, but the error would be the same for either.)

In function forLoops() we see the difference between var and let. Variable var3 is scoped to the function, and is thus accessible after the for loop in which it is declared; we can write it to the screen on line 30. Variable let3, however, is scoped to its enclosing block (the for loop) rather than to the function forLoops(); thus we get an error when trying to access let3 on line 32 to write it to the screen.

Most of the time, you would want to restrict a for loop variable to have scope specific to the loop, to avoid unwanted side effects after the running of the loop. As such, using let is generally preferable to var in this context - but keep in mind that, as mentioned above, let may not be supported by all browsers at the time of this writing.