The ES6 Chronicles: Let there be "let"

In the beginning, ECMA created ECMAScript 5. And all seemed very good in the kingdom of JavaScript. But, behold, when the naïve undersea warriors who were from the land of Java used "var" in their JavaScript for loop...

function fireTorpedo(i){ console.log("Fireth Torpedo Tube #" + i + "!") }

for( var i=1; i<=4; i++ ){
    setTimeout( function(){ fireTorpedo(i) }, 1000*i );
}

...they got this output (in 1-second (1,000 milli-second) intervals)...

Fireth Torpedo Tube #5!
Fireth Torpedo Tube #5!
Fireth Torpedo Tube #5!
Fireth Torpedo Tube #5!

...(???!!!)...and they were greatly confounded, for they did not realize that "var" variables were global-scoped or function-scoped. And many JavaScript submarines were sunk in those days of great confusion (inasmuch as thou canst sinketh a ship that spendeth most of its time underwater) for the submarines only had 4 torpedo tubes. And a great wailing went up in all the land.

And behold, the magicians and astrologers came forth and said, "Hark, if thou usest a higher-order function that returneth a function with the loop variable sealed in a closure, thou canst fireth from torpedo tubes #1, #2, #3, and #4 in sequence, even as thine heart desirest."...

function getFireTorpedoFuncWithISealedInAClosure(i){
  return function(){
     console.log("Fireth Torpedo Tube #" + i + "!")
  }
}

for( var i=1; i<=4; i++ ){
    setTimeout( getFireTorpedoFuncWithISealedInAClosure(i), 1000*i );
}

Fireth Torpedo Tube #1!
Fireth Torpedo Tube #2!
Fireth Torpedo Tube #3!
Fireth Torpedo Tube #4!

But the undersea warriors were uneasy with the incantations of the magicians and astrologers. Whereupon, ECMA had compassion upon the people of the kingdom of JavaScript. And ECMA said,

Let there be "let", and let variables declared with "let" in this new
ECMAScript6 incarnation of JavaScript be block-scoped — just like in Java —
rather than global-scoped or function-scoped as they are when declared with
"var", and let this chaos and confusion end, and let the kingdom of JavaScript
be healed...

function fireTorpedo(i){ console.log("Fireth Torpedo Tube #" + i + "!") }

for( let i=1; i<=4; i++ ){
    setTimeout( function(){ fireTorpedo(i) }, 1000*i );
}

Fireth Torpedo Tube #1!
Fireth Torpedo Tube #2!
Fireth Torpedo Tube #3!
Fireth Torpedo Tube #4!

And, behold a cry of joy went up from all the land...for now the good guys could — without the incantations of the magicians and astrologers — sinketh the ships of the bad guys and not vice-versa...

I love happy endings, don't you?

For a more formal exposé of ES6's newfangled let keyword, clickest thou upon this MDN Web Docs link...fear not, for it shall open in a new brower tab...

P.S. And for let's ES6 cousin const, clickest thou here...

P.P.S. And for old-fashioned var, clickest thou here

P.P.P.S And until we meet again in cyberspace...The Tenacious Techie says...keep...on...hacking!

P.P.P.P.S. This blog post was originally published at http://johndavidaynedjian.com/blog/es6-chronicles-let-there-be-let/