× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Introducing JavaScript 6 - Using the let keyword

JavaScript 6 is the upcoming version of JavaScript language. In this article we'll introduce it's let keyword.

Motivation

In this article we will introduce the let keyword and see how it resolves some of the issues encountered with the var keyword.

What is ECMAScript?

ECMAScript is a script language standardized by ECMA International and the base language for JavaScript. So, the first version of JavaScript used ECMAScript-262 and the new one is been building over ECMAScript 2015. Because of it relationship it’s common to refer to JavaScript 6 as ES6, ECMAScript 6 or ECMAScript 2015.

Running ES6 on plnker

There are many applications and workarounds to test all ES6 features from Babel to Node.js. Babel is a compiler that translates ECMAScript 6 to the current version, in the other hand Node.js tries to incorporate all these features in its core. We also have browser in it’s own running to implement this new language, but for experimentation purposes, we can use some of the online applications, such as plnkr. That is what we will do in this article.

On plnkr, you will be able to benefit from Google Traceur compiler that transforms your files to something the browser can understand. All you have to do is append “es6” to the JavaScript file right before the “js” extension. So, if your file is “test”, you name it “test.es6.js”. When you need to reference your JavaScript in the HTML file, you simply use the js name without the es6 as follows:

<script src="test.js"></script>

One of the major changes in ES6 is using the let keyword, instead of var. With such keyword you have a better control of the variable scope. Let’s look at some examples by starting with the var keyword. Here are the contents of the HTML and JavaScript files:

<!DOCTYPE html>
<html>
	<head>
		<title>Testing let</title>
	</head>
	<body>
		<h3>Welcome to ES6</h3>
		<div id="result"></div>
		<script src="teste.js"></script>
	</body>
</html>

Notice how the script is referencing the “test.js” file and not “test.es6.js”. In the showResult() function, we are referencing the value variable before we declare it. Remember that JavaScript supports variable hoisting, which means that during compilation the variable will be hoisted (or moved) to the top of the function with the value of undefined (the right hand side is not hoisted). Therefore the result displayed from this code will be: value = undefined

'use strict';
function showResult(){
	var content = document.getElementById("result");
	content.innerHTML = "value = " + value;
	var value = Math.random();
}
showResult();

Now let’s make changes to the code and replace var with let. Here is the body of the function:

var content = document.getElementById("result");
content.innerHTML = "value = " + value;
let value = Math.random();

With this change, nothing gets generated because there is an error. The difference is that let does not support hoisting. Since you are using a variable that is not defined, a reference error takes place. Therefore, let protects you from these hard to find errors and help you create variables only when you need them.
Let’s try another approach. Here is the JavaScript code after some changes:

'use strict';
function showResult(){
 var content = document.getElementById("result");
  let value = Math.random();
	{
		let value = 42;
	}
	content.innerHTML = "value = " + value;

}
showResult();

Notice that I am displaying the content at the end of the function now. But more importantly, I am declaring value twice: Once inside the function and once inside a block within the function. Recall that JavaScript supports function scope. And now with the let keyword we are supporting block scope. The value declared within the block has no impact on the outcome because its lifetime is only within that block. Therefore, what gets displayed is: value = 0.33842312169682254.

Keep in mind that you will get a different random number when you run it. Now try to replace the let keyword with var. What do you expect the result to be?

Conclusion

In this article, we experimented with an ES6 feature, the let keyword. We saw the impact on scope when using this keyword versus var. You can start using the let keyword in your projects because it is safer and the recommended way going forward.



Senior Software Engineer with experience in C#, JavaScript, jQuery, Knockout JS, Kendo UI, HTML5, and SQL Server. Ayad has more than 20 years experience in technical training and teaching. Contributor to MrBool for about 7 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login