Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: javascript-let-vs-var-vs-const

Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: javascript-let-vs-var-vs-const
Showing posts with label javascript-let-vs-var-vs-const. Show all posts
Showing posts with label javascript-let-vs-var-vs-const. Show all posts

JAVA SCRIPT - Using let in Your Browser Application

Using let in Your Browser Application


Problem

You’re interested in using let in your browser application, but aren’t sure which brows‐ ers support it (or other ECMAScript functionality), or what you need to do to get it to work.

Solution

Support for ECMAScript 6 functionality, such as let, can be difficult to determine, and may require setting flags, specifying JavaScript version numbers, or using specialized polyfills or other tools. Unfortunately, not all approaches are compatible across all the modern browsers. The support for let is a perfect example of fractured ES 6 support across browsers.

To use let in Firefox, you have to give a version number with the script tag:

<script type="application/javascript;version=1.7">
 if (true) {
 let i = 'testing let';
 console.log(i);
 }
 if (typeof i != 'undefined'){
 console.log(i);
 } else {
 console.log('undefined');
 }
</script>


In Firefox, the console output is what we would expect:


testing let
undefined

To get the same result in Internet Explorer 11, your HTML document must be HTML5, which means using the following DOCTYPE:

<!DOCTYPE html>

This puts IE 11 into edge mode, where many ES 6 features are supported. Unfortunately, IE 11 ignores any script block with a type of application/javascript;version=1.7, so you’ll have to remove the type setting for the script to work.

The same applies to Chrome. Chrome supports let if you remove Firefox’s peculiar use of type and if you enable the chrome://flags/#enable-javascript-harmony flag. In addition, you must also use strict mode, so the code needs to be modified to:


<script>
 'use strict';
 if (true) {
 let i = 'testing let';
 alert(i);
 }
 if (typeof i != 'undefined'){
 alert(i);
 } else {
 alert('undefined');
 }
</script>


This code snippet also works for IE, but not Firefox. The code also works in Opera if you enable the same Chrome Harmony flag (copy and paste the above flag URI into the location bar for Opera and click “Enable”). Safari doesn’t, at this time, support let.

EXPLAIN

The let keyword allows JavaScript developers to define block-level variables, rather than global variables or variables in a function block. 

An example is given in the solution, where the variable i is only available within the conditional block, but is undefined outside the block. JavaScript developers have pushed for the concept of let longer than most additions to ECMAScript 6, but its use in production applications must be restricted because of the difficulty to support it, as was demonstrated in the solution.

Yes, you can support it across browsers, but only when flags are set, and even then, Firefox doesn’t currently support a syntax that works for Chrome, IE, and Opera, and Safari is missing, altogether

The same holds for many of the ES 6 new language constructs: if the construct requires setting a browser flag, you have to assume your end user hasn’t set it so you can’t depend on it. This differs from supporting the new ES objects (covered in the rest of this chapter) because it’s easier to emulate a new object using a polyfill, than it is to emulate a new language construct. 

Even a translator-compiler (transpiler), such as Google’s Traceur, can only convert let into var, because there is no current workaround for the concept of let. Running the solution code snippet in the Traceur REPL (read-evaluate-print) results in the following: . 


$traceurRuntime.ModuleStore.getAnonymousModule(function() {
 "use strict";
 'use strict';
 if (true) {
 var i = 'testing let';
 alert(i);
 }
 if (typeof i != 'undefined') {
 alert(i);
 } else {
 alert('undefined');
 }
 return {};
});
//# sourceURL=traceured.js

In this case, the workaround is worse than not having a workaround, because var does not result in the same behavior as the use of let. The resulting print-out for the Traceur version is:


testing let
testing let


The variable i is printed out twice, as it is defined in the code outside the conditional block—the variable is no longer scoped to the block