ES6 Overview in Bullet Points

[gramakri]

Great writeup. I welcome most of the additions, but I somehow cannot get behind things like:

var {foo} = pony is equivalent to var foo = pony.foo var {foo: baz} = pony is equivalent to var baz = pony.foo

I am not sure why, but most languages get into a state where they seem to encourage non-readable code. What was wrong with 'var baz = pony.foo' to start with?

[aggronn]

the core use case is

  var { foo } = pony

I agree this is kind of silly in isolation, but more often than not, its used like this:

  var { foo, bar, baz } = pony

which is honestly not that hard to read, and is much better than

  var foo = pony.foo;
  var bar = pony.bar;
  var baz = pony.baz;

which is very useful when you're referencing properties of pony a lot. Since you're going to see destructuring used like

  var { foo, bar, baz } = pony

typically, I think its a very nice idea to always do your variable assignments like that even when its a little obtuse. I'd rather not see multiple styles for variable assignment.

  var { foo: f } = pony

is just there as an escape hatch in case foo already exists in the namespace. It is not something you would typically do.

[nostrademons]

It's pretty handy when unpacking a JSON blob so you can manipulate individual fields:

  let { b64_img, height, width, filename } = JSON.parse(text)

[bryanlarsen]

I find it most useful for import statements:

import {Button, Text} from 'react-native';

and in function declarations:

function f({foo, bar})

[Sir_Cmpwn]

    var { email, full_name } = get_user();
    send_email(email, `Hi ${full_name}!`);

[z3t4]

It's the new with.

[wmitty]

Another crazy excellent (and free) ES6 reference is http://exploringjs.com/es6/ by Dr. Axel Rauschmayer - one of the ES6 committee members.

JS is a very complicated language - and the language spec in written in a way - that while I am sure is excellent for implementors and compatibility - is pretty much unreadable by language users.

Axel's book is quite authoritative and very readable. You may still go to the spec for finer points - but it sure is 10,000 times easier if you mostly understand the mechanism (and motivations) first.

[hardwaresofton]

For those looking for something more in-depth:

ES6 in Depth series @ Mozilla Hacks: https://hacks.mozilla.org/category/es6-in-depth/page/2/?utm_...

The first article in the above series (where you should probably start): https://hacks.mozilla.org/2015/04/es6-in-depth-an-introducti...

Another brief guide to ES6 features, with more code blocks and less bullet points:

https://github.com/lukehoban/es6features

[bevacqua]

Sweet! FWIW there's also an in-depth guide on ponyfoo.com as well.

Starts here: https://ponyfoo.com/articles/a-brief-history-of-es6-tooling.

All articles: https://ponyfoo.com/articles/tagged/es6-in-depth

[draw_down]

This is awesome, but can I just say foo/bar/baz drives me nuts. How about `{outerProperty: {innerProperty: 'innerValue'}}` ? That just seems so much easier to follow to me, especially in these deep-nested destructuring examples.

But anyway, seriously, this is awesome. The author is responsible for a large part of my ES6 knowledge.

[sixothree]

Foo and bar drive me nuts. They feel antiquated and uninspired.

If we never see them again it will be too soon.

[freditup]

If you're interested in using ES6 features, TypeScript provides a great way to get most of these features (and of course optional typing as well). Babel might be slightly more feature-complete when it comes to ES6 features, but TypeScript provides such a fantastic front-end dev experience that I definitely recommend it. (Biggest pain point is incorporating typings for libraries which are pure JS and not TS.)

[peeters]

> Temporal Dead Zone - Attempts to access or assign to foo within the TDZ (before the let foo statement is reached) result in an error

Can anybody explain why "let" variables are hoisted to the start of block given this Temporal Dead Zone exists? Is it an artifact of modern JS runtimes?

And given the TDZ what practical benefit does knowing that the variable is technically hoisted provide?

[ajanuary]

I've never liked the phrase 'variable hoisting'. It implies the compiler actively moves the variable declaration.

What's actually happening is lexical scoping - a variable declaration is associated with a lexical scope. For var declarations, the lexical scope is the function, for let declarations, it's the block. When a variable is referenced, it first looks for the variable associated with the lexical scope of the variable reference, then walks up the chain of lexical scopes until it either finds a variable or hits the top scope and the variable doesn't exist.

Lexical scoping is easy to reason about and fairly easy to calculate. The majority of languages used today use lexical scope (the only exception in popular languages I can think of is perl which lets you use either lexical or dynamic scope, though I'm sure there are others).

A consequence of this design is that you can't have multiple variables with the same name in the same lexical scope. Most languages will raise an error if you redeclare a variable - javascript is unusual in that it doesn't.

Javascript is also unusual in that you can reference variables before they're both declared and definitely assigned. It's these design choices, interacting with lexical scope, that gives javascript such weird and notable behaviour that people have decided it needs a name - 'hoisting'.

So why are let variables 'hoisted' to the start of the block? Because that's how every other language does it. Because it's cheap and dead simple to reason about.

If it didn't, that would mean you could have multiple variables with the same name in the same block. That would be more difficult to keep track of, both for the compiler/runtime and for the programmer. It would also be largely pointless, because once execution gets to the code past the second variable declaration, you can't reference the variable created by the first declaration (unless you capture it with a closure).

    function example() {
        let a = false;
        console.log(a);
        let a = 10; // Past this point, I can't get to the first a anymore
        console.log(a);
    }

The TDZ addresses the design decision of being able to reference a variable before it's declared.

    function example() {
        console.log(a); // Without a TDZ, this will print undefined. With TDZ, this will be an error.
        let a = 10;
    }

If you google around for examples of 'hoisting' gone bad and run through what would have happened if vars had TDZ, you'll see that all of them would be avoided.

Why is it useful to know both about block scoping and TDZ?

Block scoping lets you know that:

    function example(b) {
        let a =10;
        if (b) {
            let a = 20;
            console.log(a); // This will print 20, because it refers to the variable in the if block
        }
        console.log(a); // While this will print 10, because it refers to the variable in the function block
    }

While TDZ lets you know that:

    function example() {
        console.log(a); // This will raise an error
        let a = 10;
    }

[rattray]

As someone who's been using ES6 for several months now, I was surprised to learn a few new things here! A huge wall of bullets, but a pretty useful one. Thanks!

[ponyous]

Looking good and informative, but to be honest I am really interested in use cases. I think I understand how to use generators but I have no idea where I could use them in real-world scenarios. Same goes for WeakMaps, Proxies... Anyone care to give some examples?

[chowes]

Check out http://jlongster.com/A-Study-on-Solving-Callbacks-with-JavaS... and the follow up post. It's easy enough to start using generators alongside your existing async solution (callbacks or promises).

Proxies can be used for data-binding, similar to Object.observe.

I've also yet to find a case where I need WeakMaps instead of an Object or Map. All the benefits seem to be a bit too theoretical, but I likely haven't dug into it hard enough.

[heifer2822]

checkout Koa to see a great use case of generators. By yielding to asychronous code (instead of callbacks) you can write JS that looks like it's synchronous.

[_greim_]

Too many use cases to list, but generally a nice way to for...of anything, for example a recursive binary tree traversal:

    [Symbol.iterator]() {
      if (this.left) {
        yield* this.left[Symbol.iterator]();
      }
      yield this.value;
      if (this.right) {
        yield* this.rightSymbol.iterator]();
      }
    }
    ...
    for (const value of myTree) { ... }

[slasaus]

I'm currently using Proxy to transparently version data that is saved in an IndexedDB.

[chrisseaton]

Does anyone have any idea why WeakMap and WeakSet aren't iterable?

[tolmasky]

If they were iterable, then they couldn't be weak, because you've effectively given an API to reach references unconditionally, thus meaning they are always reachable, thus meaning none of them can ever be GC'ed.

for (x of myWeakSet) <-- no object in myWeakSet is ever safe to GC

Now, if you were to say "well, make them weak and make iteration only happen on the items that have no External references", you've now created a really tricky situation where iteration essentially forces a GC pass because it needs to know whats reachable and what isn't at iteration time.