Zasięg blokowy w ES6

I kto to mówi?

• Marek Stępień - @marcoos
• modne wyrażenie: „I wear many hats”
  • sr. web developer w Interia.pl
  • uczestnik projektu Mozilla (Firefox PL, tech-evang, stowarzyszenia Moz-Eu i Aviary.pl)
  • tech bloger - blog.marcoos.com
• W której z tych ról jestem tutaj? Sam nie wiem :)

Poglądy wyrażone w prezentacji są wyłącznie moje – w szczególności nie przedstawiają opinii mojego pracodawcy.

ECMAScript 5

• JSON.parse(str), JSON.stringify(obj)
• Object.create(), defineProperty(), seal(), freeze() itd.
• Function.prototype.bind() - funkcje dowiązane
• funkcje wyższego rzędu dla tablic (reduce, map, filter itd.)
• tryb ścisły (strict mode)
• pełne wsparcie w Firefoksie 4+; pozostałe - tabelka

Uwaga!

Ponieważ mówimy o rzeczach, które dopiero są rozpatrywane przez komitet TC-39, wszystko, co dziś przedstawiam, szanse zostać wywrócone do góry nogami w ostatecznej wersji ES6! :-)

ECMAScript 6 „Harmony”

• zasięg blokowy zmiennych dzięki let
• stałe: const answerToEverything = 42;
• przypisanie destrukturyzujące: [a, b] = [5, 10];
• krótka notacja lambda: [1,2,3].map((x) -> x*x)
• obiekty Proxy i metaprogramowanie
• iteratory i generatory
• WeakMap
• argumenty domyślne: function f(someArg = 5) {}
• rest i spread dla wywołań funkcji
• moduły
• klasy (najpewniej jako syntactic sugar)
• i inne...

Co z ES6 jest już w Firefoksie?

• zasięg blokowy zmiennych dzięki let (JS1.7, Fx2)
• stałe: const answerToEverything = 42; (JS 1.5, nawet Netscape 6)
• przypisanie destrukturyzujące: [a, b] = [5, 10]; (JS 1.8, Fx3)
• krótka notacja lambda: [1,2,3].map(function(x) x*x) (JS 1.8, Fx3)
• obiekty Proxy i metaprogramowanie (JS2, Fx4)
• iteratory i generatory, yield x (JS 1.7, Fx2)
• WeakMap (Fx6)

~ = duże prawdopodobieństwo różnic z docelową wersją ES6

Opt-in dla nowej składni ES6 w Fx

Jako że Harmony opiera się w dużej mierze na nowej składni, kod musi być specjalnie oznaczony, żeby można było z niej korzystać. W Firefoksie obecnie wystarczy:

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

NIE JEST to zgodne obecnie z żadnym standardem.

Rzeczy z ES6 opierające się na starej składni (Proxy i WeakMap) powinny działać bez tego type.

Zasięg w JS (ES3) - przypomnienie

Co wypisze c0nsole.write? Dlaczego?
Nie wyrywajcie się do odpowiedzi - dajcie chwilę pomyśleć pozostałym! :)

Zasięg w JS (ES3) - przypomnienie

• var zmienna - tworzy zmienną widoczną w bieżącej funkcji
• ...niezależnie, gdzie pojawiło się var (tzw. „hoisting”)

  Kod z poprzedniego przykładu jest interpretowany tak, jak poniższy:

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

Zasięg w JS (ES3) - przypomnienie

• w funkcjach wewnętrznych widoczne są zmienne zadeklarowane w otaczających je funkcjach
• ...które nie zostały przesłonięte przez zmienne lokalne o tej samej nazwie

Zasięg w JS (ES3) - przypomnienie

• zmienne globalne są jednocześnie własnościami obiektu globalnego (w przegl.: windows)
• dostęp do zmiennej niezadeklarowanej przez var = dostęp do globalnej zmiennej o tej nazwie

Problem z var

Stare rozwiązanie: domknięcie

ES5: funkcja dowiązana

ES3: wariacki trik z throw

ZŁO! Nie używać NIGDY!

ES6: let the sunshine in :)

Trzy formy let

• definicja let (ang. let-definition)
• polecenie let (ang. let-statement)
• wyrażenie let (ang. let-expression)

Definicja let

• definiuje zmienną, której zasięg jest ograniczony do bloku, w którym ta definicja jest zawarta
• składnia – identyczna jak var:
  let zmienna;
let zmienna = wyrażenie;
let zm1 = wyr1, zm2 = wyr2, …, zmN = wyrN
• jeden działający przykład już widzieliście :)

Polecenie let

• let (inicjalizacje_zmiennych) { blok_kodu }

Wyrażenie let

• let (inicjalizacje_zmiennych) wyrażenie
• zmienne są lokalne dla wyrażenia, staje się ono implicite blokiem:

Wyrażenie let

• można użyć wszędzie tam, gdzie może pojawić się inne wyrażenie:

Gdzie można wypróbować let?

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

const - definicje stałych

ES6: zasięg blokowy (jak let), obecnie w Fx: funkcyjny (jak var). Bug 611388

Dziękuję za uwagę!

Pytania?

• Te slajdy: j.mp/blokowy (na warunkach CC-BY-SA)
• ecmascript.org
• ES6: block expressions
• kangax: non-standard ES compat table (zawiera rzeczy rozważane dla Harmony)