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. 
Am wondering why is it not working in my chrome v58. Maybe it requires something else too??
You are using Traceur, which does not support TDZ for let/const. It will convert
lettovar- 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: