Block Scope in ES6

Who's doin' the talkin'?

• Marek Stępień - @marcoos
• „I wear many hats”
  • sr. web developer at Interia.pl
  • Mozilla contributor (Firefox PL, tech-evang, Moz-Eu & Aviary.pl member)
  • tech blogger - blog.marcoos.com
• Which hat am I wearing today? You tell me :)

This talk does not represent the views of my employer.

ECMAScript 5

• JSON.parse(str), JSON.stringify(obj)
• Object.create(), defineProperty(), seal(), freeze() etc.
• Function.prototype.bind() - bound functions
• higher-order functions for arrays (reduce, map, filter etc.)
• Strict Mode
• fully supported in Firefox 4+; for other browsers see kangax's table

Warning!

All of this stuff is pretty bleeding-edge, not yet accepted by ECMA/TC-39. Everything can change and look totally different in the final ES6 spec. :-)

ECMAScript 6 „Harmony”

• block scope thanks to let
• constants: const answerToEverything = 42;
• destructuring assignment: [a, b] = [5, 10];
• lambdas: [1,2,3].map((x) -> x*x)
• Proxy objects facilitating metaprogramming
• iterators and generators, yield x
• WeakMap
• default argument values: function f(someArg = 5) {}
• rest and spread for function calls
• modules
• classes (possibly just syntactic sugar)
• and more...

ES6 support in Firefox

• block scope thanks tolet (JS1.7, Fx2)
• constants: const answerToEverything = 42; (JS 1.5, even in NS 6)
• destructuring assignment: [a, b] = [5, 10]; (JS 1.8, Fx3)
• lambdas: [1,2,3].map(function(x) x*x) (JS 1.8, Fx3)
• Proxy objects (JS2, Fx4)
• iterators and generators, yield x (JS 1.7, Fx2)
• WeakMap (Fx6)

~ = differences with the final spec highly probable

Opt-in for the new syntax in Fx

Some ES6 features have a syntax that is incompatible with older JS versions, so ES6 code has to be marked in a special way. To get all the features in current Firefoxes:

<script type="application/javascript;version=1.8">
let x = 5;
</script>

The final standard will surely differ here ("application/ecmascript;version=6"?)

ES6 stuff not needing new syntax can work without this type attribute.

Scope in JS (ES3) - how it's been

What will c0nsole.write show? why?
Know the answer? NOT SO FAST! Let others think about this for a while, too! :)

Scope in JS (ES3) - how it's been

• var someVar - defines a variable visible in the current function
• regardles of where var appeared in the function ("hoisting")

  Code from the previous example is interpreted the same way as this:

  var foo = 42; (function () { var foo; if (!foo) { foo = 1701; } c0nsole.write(foo); }());

Scope in JS (ES3) - how it's been

• inner functions see variables from outer functions
• ...unless there are local variables with the same name

Scope in JS (ES3) - how it's been

• global variables are also properties of the global object (window in browsers)
• accessing a variable not declared with var = accessing a global

Problem with var

Old solution: closure

ES5 solution: bound function

ES3: crazy evil trick with throw

TEH EVILZ! Don't use it. EVER!

ES6: let the sunshine in :)

Three variants of let

• let definition
• let statement
• let expression

let definition

• defines a variable with scope limited to the block in which the definition is contained
• syntax – identical to var:
  let varName;
let varName = expression;
let v1 = exp1, v2 = exp2, …, vN = expN
• you've already seen the example :)

let statement

• let (variable_definitions) { code_block }

let expression

• let (variable_definitions) expression
• variables are local to the expression, which forms an implicit block:

let expression

• can be used everywhere you can put a normal expression:

Where to play with let?

• Mozilla SpiderMonkey (Gecko 1.8.1+, including Firefox 2.0+)
• Server-Side JS: RingoJS
• Mozilla Rhino (1.7+)

const - constant definitions

ES6 says const introduces the constant in a block scope. Currently in Firefox it introduces the constant in function scope (like var) Bug 611388

Thank you!

Questions?

• These slides: j.mp/blokowy (CC-BY-SA)
• ecmascript.org
• ES6: block expressions
• kangax: non-standard ES compat table