8 ms·

Top ES6 features by example

147 points by foob 9y ago

haffla 9y ago
What? The mentioned Array methods (map, reduce, filter, etc..) are not new ES6 features
- deleted 9y ago
  [deleted]
- bertolo1988 9y ago
  They are not indeed: http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.21 http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.2...
- paradite 9y ago
  Yup, I've been using them since forever ago. > Standard ECMA-262 5.1 Edition / June 2011
- curveship 9y ago
  .find() and .findIndex() are new in es6, but the others are all es5.
- ricemast 9y ago
  Nowhere does it say "new" features.
  - haffla 9y ago
    "New cool helper functions appeared..."
masklinn 9y ago
The article is not very good, with both factual mistakes and missing important sub-properties > 2. Array helper functions `map`, `filter`, `reduce`, `some` and `every` were actually added in ES5.1. Only `find` and the unlisted `findIndex` come from ES6. Meanwhile Array.from which was added in ES6 goes unlisted. > 3. Arrow functions While the reduction in definition boilerplate is great, missing is the very important (and convenient!) fact that arrow functions resolve `this` lexically (as a normal variable rather than a special case). > 4. Classes Would have benefited from mentioning the most convenient feature of classes by far: the `super` proxy to calling a method of the superclass on `this` (most useful with constructors): the ES5 <Superclass>.prototype.aMethod.call(this) becomes: super.aMethod() which also helps a lot when moving methods around. > 6. Template strings Missing: you can "tag" template strings to invoke user-defined functions on the contents and do intermediate processing and interpolation yourself e.g. sql`foo ${bar}` will invoke `sql(['foo ', ''], <value of bar>)`. > 7. Default function arguments Missing note: unlike e.g. Python, default arguments are dynamic and sequential (similar to let<star>[0]) so you can define a `function foo(a, b=a)`. > 8. Rest and spread operators Actually the opposite for once, mentions that rest and spread operators can be used with object content, sadly that's currently a stage3 proposal, definitely not part of ES6. > 9. Destructing Missing notes: * the destructuring is recursive (you're not limited to a single level) * you don't have to "[assign values] to variables of the same name as properties" when destructuring objects: let {name: a} = a_call(); will bind the value of the property "name" to the "a" local variable. * you can provide default values to the destructuring pattern e.g. let [a, b=3] = [1] this can be combined with renaming for object destructuring [0] http://docs.racket-lang.org/reference/let.html#%28form._%28%28lib._racket%2Fprivate%2Fletstx-scheme..rkt%29._let%2A%29%29 http://docs.racket-lang.org/reference/let.html#%28form._%28%... can't use an actual star there because HN comment formatting remains a complete trash fire and thus decides to emphasize half my comment and swallow the mark of the first list item. And still does not print let∗.
- cbaleanu 9y ago
  Bad article, the author should have indeed put some more time into understanding what he is writing about. var firstTeenager = people.find(teenager) Stuff like this, when you write about ES6 features but use var makes my eyes hurt :(
  - baron816 9y ago
    I agree that the article needs some work, but there really is nothing wrong with still using var. I'm in the Kyle Simpson camp and just use var for everything except if I'm actually creating a constant or block scoping comes into play or I need to prevent the hoisting of a variable. That way, it's clear what I'm doing and what my intentions are.
    - masklinn 9y ago
      > That way, it's clear what I'm doing and what my intentions are. It's the exact opposite since you're defaulting to the most permissive binding style. Defaulting to `const` would actually make it clear what your intent is: you use `let` if you need mutable bindings and you use `var` if you need hoisting. If you default to `var` your intent is apparently to make use of mutable bindings and hoisting everywhere, at which point I can only expect that you put your variable declarations at the bottom of your function blocks after the `return` statement.
      - baron816 9y ago
        Defaulting to const does nothing. If you or someone else decides later that it should be reassignable, then they'll change it and not think about it. If const is rare in your code, people will be aware of what const means in that context. If you're putting your variable declarations after your return statement, then you probably have other problems. I also don't know why you would ever expect someone to do that.
        masklinn 9y ago
gruez 9y ago
This website is shit on mobile with its fixed top bar taking up 20% of the screen space.
- tazard 9y ago
  Ironically, without JavaScript, it works fine for me on mobile.
- slig 9y ago
  That's Medium for you.
- GroSacASacs 9y ago
  because A/B testing showed that using 40% of you screen increases the likelyhood to login/register by 20%
VMG 9y ago
Is there a good description somewhere of how to use new methods like Object.freeze, Object.defineProperty etc?
- Axnyff 9y ago
  These are not new ES6 features. I think you can get a really good explanation from the you don't know js serie. https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch3.md https://github.com/getify/You-Dont-Know-JS/blob/master/this%... The whole serie of book is worth it and free to read on github
  - VeejayRampay 9y ago
    Object.defineProperty is actually quite ancient yeah.
tejohnso 9y ago
"Who doesn’t like explicit inheritance, like in Java language, instead of writing magic code for prototypal inheritance?" There's nothing magical about prototypal inheritance code, and I'd suggest the class keyword is more magical since it's "primarily syntactical sugar over JavaScript's existing prototype-based inheritance" [1]. Furthermore, encouraging classical inheritance constructs without mentioning the classic pitfalls is somewhat harmful [2]. [1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... [2] https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e https://medium.com/javascript-scene/javascript-factory-funct...
- Raphmedia 9y ago
  I never understood the whole confusion about prototypal inheritance. It's not harder to grok than classical inheritance. "Which Java developer doesn’t miss classes when switching to a JS project?" ... That's the biggest problem here. Java != JavaScript. You shouldn't blindly carry concepts from one language to the other. Adding syntactic sugar with the only goal of pleasing developers coming from other language goes against my view of what features should be added to a language. That's code bloat.
  - dahart 9y ago
    > I never understood the whole confusion about prototypal inheritance. It's not harder to grok than classical inheritance. I'd guess, mostly based on my fuzzy memory of my first exposure to prototypal inheritance, that this confusion stems almost completely from the fact that prototypal inheritance is simply different from classical inheritance. Having come from a C++ world, I didn't realize there was another kind of inheritance, until I met JavaScript.
  - masklinn 9y ago
    > I never understood the whole confusion about prototypal inheritance. It's not harder to grok than classical inheritance. In theory no, but Javascript has such bad support for it that it's syntactically inconvenient and you have to understanding significantly more details of the implementation to manage it than just "you add the other class after the extends".
lozzo 9y ago
Many comments are saying that the article is not good as it is not accurate. (e.g. @masklinn) I agree. The author could have spent a bit of time reasarching this since bullet-point-articles are probably the easiest to write down. However, it's interesting (yet sad) how its catchy title "Top ES6 features by example" is making darn popular.
- sotojuan 9y ago
  The current "GitHub/your blog is your resume!!" movement has led to people who have little business writing didactic resources (not because of programming skill, but lack of research, teaching experience, and writing abilities) to do so in hordes. It's hard to complain without sounding like a jerk because these are free to read, but they can waste people's time or confuse them.
bernadus_edwin 9y ago
This is very helpfull. I never know that js has linq. Very similliar. Also using lambda. Just rename select keyword to map keyword
fortythirteen 9y ago
With such lagging browser support forcing you to compile ES6, it generally makes more sense to jump to TypeScript. You get all the E56 plus things like interfaces and enums and, of course, strict typing.
- shados 9y ago
  The typing is nice, but shit like enums are a plague in TS. Non-standard crap that will probably never be standard, and in some cases actually are present (in a compiled form) in the output. No, just no. And then you have all of the fun stuff like their original non-standard module system, which is now super confusing in type definitions since it lives side by side with the "real" thing. I'm sure we're gonna have lots of fun having 2 ways of defining private members too. Woo. I assume decorators are gonna be entertaining too since they were based on the older version of the spec (I assume. I did not verify this claim). I love using TS in my side projects because I avoid "the bad parts" (same as with vanilla JS when you think about it), but when we introduce it at work, Im half considering making a lint rule that blocks all the non-standard features that are not related to type checking. Will save some pain in the future.
- coldtea 9y ago
  >With such lagging browser support forcing you to compile ES6 What lagging browser support? Most of those things have been there for years...
  - deleted 9y ago
    [deleted]
  - abritinthebay 9y ago
    A couple of years in some cases. Many large sites still have to support IE10 and up. Android support was incredibly bad until recently for example, so anyone with a large mobile audience will have issues as well (I still see 100,000s of Android 4.4 requests for example) Not everyone can just support Edge/FF/Chrome evergreen versions.
- cloakandswagger 9y ago
3minus1 9y ago
Quite a bit of negativity in the comments here. I liked the article. Typically I rely on code samples in articles like this, but I found the paragraph descriptions very readable.
pascalxus 9y ago
Excellent post. Just the right amount of information to get the point across.

147 points by foob 9y ago

haffla 9y ago

What? The mentioned Array methods (map, reduce, filter, etc..) are not new ES6 features

deleted 9y ago
[deleted]
bertolo1988 9y ago
They are not indeed: http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.21 http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.2...
paradite 9y ago
Yup, I've been using them since forever ago. > Standard ECMA-262 5.1 Edition / June 2011
curveship 9y ago
.find() and .findIndex() are new in es6, but the others are all es5.
ricemast 9y ago
Nowhere does it say "new" features.
- haffla 9y ago
  "New cool helper functions appeared..."

masklinn 9y ago

The article is not very good, with both factual mistakes and missing important sub-properties > 2. Array helper functions `map`, `filter`, `reduce`, `some` and `every` were actually added in ES5.1. Only `find` and the unlisted `findIndex` come from ES6. Meanwhile Array.from which was added in ES6 goes unlisted. > 3. Arrow functions While the reduction in definition boilerplate is great, missing is the very important (and convenient!) fact that arrow functions resolve `this` lexically (as a normal variable rather than a special case). > 4. Classes Would have benefited from mentioning the most convenient feature of classes by far: the `super` proxy to calling a method of the superclass on `this` (most useful with constructors): the ES5 <Superclass>.prototype.aMethod.call(this) becomes: super.aMethod() which also helps a lot when moving methods around. > 6. Template strings Missing: you can "tag" template strings to invoke user-defined functions on the contents and do intermediate processing and interpolation yourself e.g. sql`foo ${bar}` will invoke `sql(['foo ', ''], <value of bar>)`. > 7. Default function arguments Missing note: unlike e.g. Python, default arguments are dynamic and sequential (similar to let<star>[0]) so you can define a `function foo(a, b=a)`. > 8. Rest and spread operators Actually the opposite for once, mentions that rest and spread operators can be used with object content, sadly that's currently a stage3 proposal, definitely not part of ES6. > 9. Destructing Missing notes: * the destructuring is recursive (you're not limited to a single level) * you don't have to "[assign values] to variables of the same name as properties" when destructuring objects: let {name: a} = a_call(); will bind the value of the property "name" to the "a" local variable. * you can provide default values to the destructuring pattern e.g. let [a, b=3] = [1] this can be combined with renaming for object destructuring [0] http://docs.racket-lang.org/reference/let.html#%28form._%28%28lib._racket%2Fprivate%2Fletstx-scheme..rkt%29._let%2A%29%29 http://docs.racket-lang.org/reference/let.html#%28form._%28%... can't use an actual star there because HN comment formatting remains a complete trash fire and thus decides to emphasize half my comment and swallow the mark of the first list item. And still does not print let∗.

cbaleanu 9y ago
Bad article, the author should have indeed put some more time into understanding what he is writing about. var firstTeenager = people.find(teenager) Stuff like this, when you write about ES6 features but use var makes my eyes hurt :(
- baron816 9y ago
  I agree that the article needs some work, but there really is nothing wrong with still using var. I'm in the Kyle Simpson camp and just use var for everything except if I'm actually creating a constant or block scoping comes into play or I need to prevent the hoisting of a variable. That way, it's clear what I'm doing and what my intentions are.
  - masklinn 9y ago
    > That way, it's clear what I'm doing and what my intentions are. It's the exact opposite since you're defaulting to the most permissive binding style. Defaulting to `const` would actually make it clear what your intent is: you use `let` if you need mutable bindings and you use `var` if you need hoisting. If you default to `var` your intent is apparently to make use of mutable bindings and hoisting everywhere, at which point I can only expect that you put your variable declarations at the bottom of your function blocks after the `return` statement.
    - baron816 9y ago
      Defaulting to const does nothing. If you or someone else decides later that it should be reassignable, then they'll change it and not think about it. If const is rare in your code, people will be aware of what const means in that context. If you're putting your variable declarations after your return statement, then you probably have other problems. I also don't know why you would ever expect someone to do that.
      - masklinn 9y ago

gruez 9y ago

This website is shit on mobile with its fixed top bar taking up 20% of the screen space.

tazard 9y ago
Ironically, without JavaScript, it works fine for me on mobile.
slig 9y ago
That's Medium for you.
GroSacASacs 9y ago
because A/B testing showed that using 40% of you screen increases the likelyhood to login/register by 20%

VMG 9y ago

Is there a good description somewhere of how to use new methods like Object.freeze, Object.defineProperty etc?

Axnyff 9y ago
These are not new ES6 features. I think you can get a really good explanation from the you don't know js serie. https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch3.md https://github.com/getify/You-Dont-Know-JS/blob/master/this%... The whole serie of book is worth it and free to read on github
- VeejayRampay 9y ago
  Object.defineProperty is actually quite ancient yeah.

tejohnso 9y ago

"Who doesn’t like explicit inheritance, like in Java language, instead of writing magic code for prototypal inheritance?" There's nothing magical about prototypal inheritance code, and I'd suggest the class keyword is more magical since it's "primarily syntactical sugar over JavaScript's existing prototype-based inheritance" [1]. Furthermore, encouraging classical inheritance constructs without mentioning the classic pitfalls is somewhat harmful [2]. [1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... [2] https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e https://medium.com/javascript-scene/javascript-factory-funct...

Raphmedia 9y ago
I never understood the whole confusion about prototypal inheritance. It's not harder to grok than classical inheritance. "Which Java developer doesn’t miss classes when switching to a JS project?" ... That's the biggest problem here. Java != JavaScript. You shouldn't blindly carry concepts from one language to the other. Adding syntactic sugar with the only goal of pleasing developers coming from other language goes against my view of what features should be added to a language. That's code bloat.
- dahart 9y ago
  > I never understood the whole confusion about prototypal inheritance. It's not harder to grok than classical inheritance. I'd guess, mostly based on my fuzzy memory of my first exposure to prototypal inheritance, that this confusion stems almost completely from the fact that prototypal inheritance is simply different from classical inheritance. Having come from a C++ world, I didn't realize there was another kind of inheritance, until I met JavaScript.
- masklinn 9y ago
  > I never understood the whole confusion about prototypal inheritance. It's not harder to grok than classical inheritance. In theory no, but Javascript has such bad support for it that it's syntactically inconvenient and you have to understanding significantly more details of the implementation to manage it than just "you add the other class after the extends".

lozzo 9y ago

Many comments are saying that the article is not good as it is not accurate. (e.g. @masklinn) I agree. The author could have spent a bit of time reasarching this since bullet-point-articles are probably the easiest to write down. However, it's interesting (yet sad) how its catchy title "Top ES6 features by example" is making darn popular.

sotojuan 9y ago
The current "GitHub/your blog is your resume!!" movement has led to people who have little business writing didactic resources (not because of programming skill, but lack of research, teaching experience, and writing abilities) to do so in hordes. It's hard to complain without sounding like a jerk because these are free to read, but they can waste people's time or confuse them.

bernadus_edwin 9y ago

This is very helpfull. I never know that js has linq. Very similliar. Also using lambda. Just rename select keyword to map keyword

fortythirteen 9y ago

With such lagging browser support forcing you to compile ES6, it generally makes more sense to jump to TypeScript. You get all the E56 plus things like interfaces and enums and, of course, strict typing.

shados 9y ago
The typing is nice, but shit like enums are a plague in TS. Non-standard crap that will probably never be standard, and in some cases actually are present (in a compiled form) in the output. No, just no. And then you have all of the fun stuff like their original non-standard module system, which is now super confusing in type definitions since it lives side by side with the "real" thing. I'm sure we're gonna have lots of fun having 2 ways of defining private members too. Woo. I assume decorators are gonna be entertaining too since they were based on the older version of the spec (I assume. I did not verify this claim). I love using TS in my side projects because I avoid "the bad parts" (same as with vanilla JS when you think about it), but when we introduce it at work, Im half considering making a lint rule that blocks all the non-standard features that are not related to type checking. Will save some pain in the future.
coldtea 9y ago
>With such lagging browser support forcing you to compile ES6 What lagging browser support? Most of those things have been there for years...
- deleted 9y ago
  [deleted]
- abritinthebay 9y ago
  A couple of years in some cases. Many large sites still have to support IE10 and up. Android support was incredibly bad until recently for example, so anyone with a large mobile audience will have issues as well (I still see 100,000s of Android 4.4 requests for example) Not everyone can just support Edge/FF/Chrome evergreen versions.
cloakandswagger 9y ago

3minus1 9y ago

Quite a bit of negativity in the comments here. I liked the article. Typically I rely on code samples in articles like this, but I found the paragraph descriptions very readable.

pascalxus 9y ago

Excellent post. Just the right amount of information to get the point across.