CODEWITHSUNDEEP
javascriptecmascript-6babeljsiifetraceur
Plankton
Plankton

Reputation: 386

temporal dead zone (ES6) doesnt seem to work

Below is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h1 id="message"></h1>

<script src="traceur/traceur.js"></script>
<script src="traceur/BrowserSystem.js"></script>
<script src="traceur/bootstrap.js"></script>
<script type="module">

    var x = 'outer scope';
    (function() {
        console.log(x); //Expected undefined, got undefined ! this is as expected.
        var x = 'inner scope';
    }());

    //same as above, but changed to var to let and x to y
    let y = 'outer scope';
    (function() {
        console.log(y); //Was expecting ReferenceError here, but got undefined. WTF ??!!!
        let y = 'inner scope';
    }());


</script>

</body>
</html>

Its seems the temporal drop zone (TDZ) in es6 should throw a referenceError in case the let-var is used before it is declared.

However, in this example, I am getting undefined for let. Where am i going wrong?

Been at this problem for a long time and wasted a day on this. (Any pointers would be very help). I am using Chrome v58.

v58 has es6 compatibility as per https://kangax.github.io/compat-table/es6/ under current browser).

I stripped off the traceur part and posted on babel-try it out, and got the same result. enter image description here

Am wondering why is it not working in my chrome v58. Maybe it requires something else too??

Upvotes: 0

Views: 180

Answers (2)

Plankton
Plankton

Reputation: 386

I removed the transpiler code and enabled the Experimental Features in JS chrome://flags/#enable-javascript-harmony here and it worked as expected now.

Chrome version v58

Upvotes: 0

CodingIntrigue
CodingIntrigue

Reputation: 78535

You are using Traceur, which does not support TDZ for let/const. It will convert let to var - making the TDZ behaviour for let identical to your var example. Run the same code in an ES6-compatible environment and you'll see the expected result:

var x = 'outer scope';
(function() {
    console.log(x);
    var x = 'inner scope';
}());

let y = 'outer scope';
(function() {
    console.log(y);
    let y = 'inner scope';
}());

Upvotes: 0

Related Questions