ECMAScript 6: Feature Overview & Comparison

Related tags

ES6 es6-features
Overview

es6-features.org

ECMAScript 6: Feature Overview & Comparison

Copyright (c) 2015-2017 Ralf S. Engelschall <[email protected]> <@engelschall>
Partially based on code snippets by Luke Hoban.
Licensed under MIT license.

This is the source of the website es6-features.org, a small overview of current ECMAScript 6 language features and a comparison to their old ECMAScript 5 equivalents.

Frequently Asked Questions? (FAQ)

  • Why was it setup? Is the ECMAScript 6 specification not enough?

    It was setup by computer scientist and software architect Ralf S. Engelschall in March 2015 in order to promote ECMAScript 6 in the software engineering projects around him and to have bookmarkable URLs at hand for referencing certain ECMAScript 6 features. Additionally, creating this website was a good approach for Ralf S. Engelschall to learn the new ECMAScript 6 features himself.

  • Where can I find the current browser support status quo for ECMASCript 6?

    Have a look at the regularily updated ECMAScript compatibility table by kangax. There, especially notice the column "Babel + core-js" as this is what can be achieved today with transpiling (and that's fully sufficient for practice).

  • Where can I find the latest ECMAScript 6 standard?

    The final ECMAScript 6 standard (ECMA-262) was published in June 2015. You can find the standard on ecmascript.org.

  • How can I use ECMAScript 6 if my JavaScript runtime still does not support it?

    Use the awesome Babel transpiler. For Node.js/io.js environments just use its tricky require hook. For browser environments use Babel in conjunction with Browserify and its Babelify plugin. For other tools see Using Babel. If you want to see pre-integrated scenarios, check out our sibling project es6-support for various code examples!

  • Why does the website default use the "reduced" syntactic sugar style (without semicolons) for ECMAScript 6 and the "traditional" syntactic sugar style (with semicolons) for ECMAScript 5?

    ECMAScript since its earliest days supported automatic semicolon inference/insertion, of course. But people coding ECMAScript 5 started it in an era where lots of tools (especially source code compressors) had problems when semicolons where left out from the source code. As a consequence, most ECMAScript 5 coders maintained the traditional coding style with semicolons as the syntactic sugar, although in most of the cases they are not necessary. But this era is gone today. Both ECMAScript 6 and all tools (including compressors) perfectly support automatic semicolon inference/insertion nowadays. As a consequence, ECMAScript 6 coders nowadays can get rid of nearly all semicolons and remove clutter from their source code. Ralf S. Engelschall is a strong promoter of reducing source code to its bare minimum. Hence, in his personal opinion ECMAScript 6 should be coded with as less syntactic sugar as possible and hence without semicolons. But if you disagree, just switch the shown style on the website. If you even need to enforce a particular style for both ES6 and ES5 code snippets in your bookmarks, just use one of the following URLs: ES6-Features (reduced style) or ES6-Features (traditional style)

  • I still don't understand: why should I use ECMAScript 6? ECMAScript 5 looks sufficient.

    ECMAScript 5 is a nice and decent programming language, of course. But because of its history, it has some nasty aspects which ECMAScript 6 finally resolves. As programming never is just about getting the necessary functionality done, it is advised to also use the best language, too. ECMAScript 6's language design is cleaner than ECMAScript 5, its syntax increases the expressiveness of your code, it decreases the necessary boilerplate code (e.g. function vs. arrow syntax) and it especially let you get rid of some very nasty but required hacks and workarounds from the ECMAScript 5 era (e.g. var self = this). So, ECMAScript 5 might be sufficient, but ECMAScript 6 nevertheless is an important improvement.

  • I've found a mistake, how can I contribute?

    The source is the file features.txt, everything else on es6-features.org is just generated out of it. Fork this project on Github, edit the file features.txt and then please send a pull request.

  • Do you know more such ECMAScript 6 feature lists?

Comments
  • Lambda example improvement

    Lambda example improvement

    In the lexical this the ES6 and ES5 (1st variant) examples doesn't really show any difference. The this in lambda depends on the context where the lambda was created. Here both are assumed to be global. Had the ES6 example kept such that the lambda was created inside another function/context where the this object is something other than the global this, then it would make more sense!

    opened by fhalde 8
  • Constants aren't immutable

    Constants aren't immutable

    The const keyword simply means variables can't be reassigned or rebound to new objects.

    Example:

    const name = "Jamon"
    name = "Not Jamon"
    name
    // "Jamon"
    

    However, the objects they are bound to can be mutated.

    const mut = {}
    mut.name = "I mutated"
    mut
    // Object {name: "I mutated"}
    
    opened by jamonholmgren 6
  • support status

    support status

    Hey Ralf, great work on es6-features.org Would be nice to have each feature classified with their support status, and also I couldn't find list comprehensions, are they there and I can't find them or is it missing? Keep it up!

    opened by techfort 5
  • Modernized style

    Modernized style

    I see that in the source code viewers there's a modernized vs traditional mode, the modernized not containing any semicolons. What makes this any modern than the semicoloned version? I personally think it's a bad practice. Worse yet, the modernized is the default for ES6, suggesting that no semicolons should be used for ES6 code.

    opened by mondalaci 4
  • more suscinct handling defaults pre ES6

    more suscinct handling defaults pre ES6

    Not that it really matters... but ya this way looks way better and doesn't have any drawbacks as far as I can tell it's the exact same as the example.

    opened by derek-adair 3
  • Function-Scoped Functions aren't an ES6 feature

    Function-Scoped Functions aren't an ES6 feature

    Placing a function declaration inside another function declaration has been valid JavaScript since Netscape 2.0, and moreover has never been disallowed by strict mode.

    opened by webbedspace 3
  • Meta-Programming Proxing trap function as property 'get'?

    Meta-Programming Proxing trap function as property 'get'?

    In http://es6-features.org/#Proxing:

    Instead of:

    let proxy = new Proxy(target, {
        get (receiver, name) {
            return `Hello, ${name}!!`
        }
    })
    

    Shouldn't it be:

    let proxy = new Proxy(target, {
        get: function (receiver, name) {
            return `Hello, ${name}!!`
        }
    })
    

    ?

    opened by eloone 3
  • Modernized vs. Traditional mismatch

    Modernized vs. Traditional mismatch

    Currently the examples default to ES6 using the Modernized style (no semicolons) and ES5 using the Traditional style (with semicolons). This introduces a misleading and orthogonal extra diff when comparing the various examples. Please consider making Modernized/Traditional a single setting that modifies both the ES6 and ES5 example code at the same time. And please consider defaulting it to traditional. As it stands, I hesitate to forward a link to this site to my coworkers who are just getting started with ES6 since it adds unnecessary confusion and will trigger a knee-jerk reaction against ES6 due to "ES6 is anti-semicolons!" :wink:

    opened by orand 3
  • Missing semicolons

    Missing semicolons

    It seems like semicolons doesn't appear on ES6 examples on the pages. If you look at features.txt:605 you see semicolons even though they're not visible on the site.

    opened by and3k5 2
  • An alternative to default parameters added

    An alternative to default parameters added

    Hello! I thought it might be interesting to introduce another way of using default parameters ECMA5

    From:

    function f (x, y, z) {
        if (y === undefined)
            y = 7;
        if (z === undefined)
            z = 42;
        return x + y + z;
    };
    f(1) === 50;
    

    To (using OR):

    function f (x, y, z) {
        if (y === undefined)
            y = 7;
        z = z || 42;
        return x + y + z;
    };
    f(1) === 50;
    
    opened by UlisesGascon 2
  • The result of Array Matching is wrong

    The result of Array Matching is wrong

    The result from ES6 Array Matching is not what it is expected to be with syntactic sugar which is the default.

    var list = [ 1, 2, 3 ]
    var [ a, , b ] = list
    [ b, a ] = [ a, b ]
    

    The result is supposed to be a is 3 and b is 1, but due to the syntactic sugar, a and b are all undefined. That is because the code will be like

    var [ a, , b ] = list[ b, a ] = [ a, b ]
    

    Therefore, I just put square brackets for the last sentence.

    opened by jasonkim7288 0
  • Non-working example of Typed Arrays

    Non-working example of Typed Arrays

    There is a problem in the following example:

    https://github.com/rse/es6-features/blob/75bf0b4ea1b1922f80d759977c138f14ecf24d91/features.txt#L1340-L1362

    Manipulating username on line 1361/1353 cannot work. The username is UI8 array and the setter just manipulates the first byte only.

    opened by oldium 0
  • Misleading test of value presence in WeakSet/WeakMap

    Misleading test of value presence in WeakSet/WeakMap

    After this assignment:

    https://github.com/rse/es6-features/blob/75bf0b4ea1b1922f80d759977c138f14ecf24d91/features.txt#L1322

    See the following lines:

    https://github.com/rse/es6-features/blob/75bf0b4ea1b1922f80d759977c138f14ecf24d91/features.txt#L1323-L1324

    Those basically test if value null is in the map/set, not if foo is still in the map/set. There exists no way to check whether the value is in the map/set when the last reference is lost, so those tests actually do not test what they are trying to show.

    opened by oldium 0
  • content view: modified scrollbar to auto, add a right-margin of 8px

    content view: modified scrollbar to auto, add a right-margin of 8px

    To improve user's experience and site's visual appeal I've modified overflow behavior (on content and sidebar) so that it's visible or hidden as per requirement.

    Also, I've improved spacing around texts in the sidebar to make it feel less cluttered and a bit easier on eyes + visually appealing.

    opened by apjyotirmay 0
  • ES6 keywords behaves as variable

    ES6 keywords behaves as variable

    I have a code that i was expecting will return 'undefined' or any error but it gives output as mentioned.

    let i = (x, c) => { c(x); }; i(20, (undefined) => { let j = undefined; console.log(j); // output 20 });

    function y(undefined) { let a = undefined; console.log(a); //output 90 } y(90); // same result with let,promise,map,filter How keywords works and change behavior if used as function arguments?

    opened by shaheerkhan12605 0
Owner
Dr. Ralf S. Engelschall
48-year old computer scientist, senior project manager, solution engineer and software artist from Munich, Germany. Director of msg Research, msg systems ag.
Dr. Ralf S. Engelschall
ECMAScript 5/6/7 compatibility tables

ECMAScript compatibility tables Editing the tests Edit the data-es5.js, data-es6.js, data-esnext.js, or data-non-standard.js files to adjust the tests

Juriy Zaytsev 4.2k Sep 24, 2022
Overview of ECMAScript 6 features

ECMAScript 6 git.io/es6features Introduction ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a s

Luke Hoban 29k Sep 23, 2022
The smallest, simplest and fastest JavaScript pixel-level image comparison library

pixelmatch The smallest, simplest and fastest JavaScript pixel-level image comparison library, originally created to compare screenshots in tests. Fea

Mapbox 4.9k Sep 19, 2022
Node.js object hash library with properties/arrays sorting to provide constant hashes. It also provides a method that returns sorted object strings that can be used for object comparison without hashes.

node-object-hash Tiny and fast node.js object hash library with properties/arrays sorting to provide constant hashes. It also provides a method that r

Alexander 72 Sep 12, 2022
Strcmp-node - A cli string comparison tool, because apparently one doesn't exist.

strcmp-node I couldn't find a string comparison command, so i made my own. its probably the ugliest thing since godzilla with makeup on, but it works.

Gingka/Ginger Pepper 1 Jan 1, 2022
Jquery-anyimagecomparisonslider-plugin - The any Image Comparison Slider is an extremely versatile yet slim slider for comparing images. You have a lot of options to configure the slider and it works just about everywhere.

any Image Comparison Slider (jquery-anyimagecomparisonslider-plugin ) Description The any Image Comparison Slider is an extremely versatile yet slim s

Niklas 6 Sep 12, 2022
📬 A quick comparison of private and / or secure email providers

?? Email Comparison A comparison table of private and / or secure email providers Live App The app can be accessed at: lissy93.github.io/email-compari

Alicia Sykes 40 Sep 19, 2022
Bun vs Node performance comparison - part 2

Performance Combo Results Platform Req/S Latency (ms) Remix + Express 3291 14 Remix + App Server 3378 15 Remix + Bun 6417 8 Astro + Node 3765 14 Astro

Jack Herrington 10 Sep 16, 2022
ECMAScript parsing infrastructure for multipurpose analysis

Esprima (esprima.org, BSD license) is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScri

Ariya Hidayat 395 Sep 24, 2022
ECMAScript 5/6/7 compatibility tables

ECMAScript compatibility tables Editing the tests Edit the data-es5.js, data-es6.js, data-esnext.js, or data-non-standard.js files to adjust the tests

Juriy Zaytsev 4.2k Sep 24, 2022
ECMAScript code beautifier/formatter

esformatter ECMAScript code beautifier/formatter. Important This tool is still missing support for many important features. Please report any bugs you

Miller Medeiros 965 Sep 13, 2022
Curso de ECMAScript 6+ en Platzi

Curso de ECMAScript 6+ JavaScript es el lenguaje más utilizado para desarrollo de aplicaciones web, principalmente en el frontend. Cada año, ECMA Inte

Edward Brito Diaz 3 Feb 12, 2022
🎩 Coverage for EcmaScript Modules

?? ESCover Coverage for EcmaScript Modules based on ?? Putout and loaders. Why another coverage tool? When you want to use ESM in Node.js without tran

coderaiser 4 Jun 10, 2022
ESLint plugin about ECMAScript syntactic features.

eslint-plugin-es-x ESLint plugin which disallows each ECMAScript syntax. Forked from eslint-plugin-es. As the original repository seems no longer main

Yosuke Ota 64 Sep 1, 2022
An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

Snyk Labs 21 Sep 20, 2022
A Gatsby starter using the latest Shopify plugin showcasing a store with product overview, individual product pages, and a cart

Gatsby Starter Shopify Kick off your next Shopify project with this boilerplate. This starter creates a store with a custom landing page, individual f

Brent Jackson 12 May 12, 2021
project overview tool, used to analyze the amount of code, the number of files, code statistics and so on.

pot z-pot is a project overview tool, used to analyze the amount of code, the number of files, code statistics and so on. 项目概述工具,用于分析代码量、文件数、代码统计等。 快速

zhangchi 18 Aug 10, 2022
Tunes overview UI of the gnome 40 a bit

Gnome 40 Overview UI Tune Simple gnome-shell (v40.0) extension that tunes overview UI to make it more usable. Changes Search textbox is hidden by defa

Alexey Manukhin 63 Sep 4, 2022
A visual overview of Kubernetes architecture and Prometheus metrics

A visual overview of Kubernetes architecture and Prometheus metrics. Structure Navigate through the structures page to easily see your control planes

OSLabs Beta 208 Sep 19, 2022
tauOS 17 Jul 10, 2022