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
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment