index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <!--
            es6-features ~~ ECMAScript 6 Feature Overview & Comparison
            Copyright (c) 2015-2017 Ralf S. Engelschall <rse@engelschall.com>

            Permission is hereby granted, free of charge, to any person obtaining
            a copy of this software and associated documentation files (the
            "Software"), to deal in the Software without restriction, including
            without limitation the rights to use, copy, modify, merge, publish,
            distribute, sublicense, and/or sell copies of the Software, and to
            permit persons to whom the Software is furnished to do so, subject to
            the following conditions:

            The above copyright notice and this permission notice shall be included
            in all copies or substantial portions of the Software.

            THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
            EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
            MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
            IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
            CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
            TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
            SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
        -->
        <title>ECMAScript 6: New Features: Overview and Comparison</title>
        <script src="lib/jquery/jquery.js" type="text/javascript"></script>
        <script src="lib/director/director.js" type="text/javascript"></script>
        <script src="lib/mousetrap/mousetrap.js" type="text/javascript"></script>
        <script src="index.js" type="text/javascript"></script>
        <link href="index.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <a href="https://github.com/rse/es6-features">
            <img style="position: fixed; top: 0; right: 0; border: 0; z-index: 2000;"
                 src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67"
                 alt="Fork me on GitHub"
                 data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"/>
        </a>
        <iframe id="starbutton" src="https://ghbtns.com/github-btn.html?user=rse&repo=es6-features&type=star&count=true"
            frameborder="0" scrolling="0" width="170px" height="20px">
        </iframe>
        <a class="twitter-share-button" href="https://twitter.com/share"
            data-url="http://es6-features.org"
            data-text="See how cleaner and more concise JavaScript can look and start coding in ECMAScript 6 now! @engelschall's"
            data-hashtags="ES6"
            data-related="engelschall"
        >Tweet</a>
        <script>
            !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>0
        </script>
        <div class="bg">ES6</div>
        <div class="head">
            <span class="bold">ECMAScript 6</span> &mdash; New Features: Overview &amp; Comparison
        </div>
        <div class="slogan">
            See how cleaner and more concise<br/>
            your JavaScript code can look and<br/>
            <a href="https://github.com/rse/es6-support">start coding</a> in <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ES6</a> <a href="https://github.com/rse/es6-support">now</a> !!
        </div>
        <div class="statement">
            "A good programming language is a<br/>
            conceptual universe for thinking<br/>
            about programming." &mdash; Alan J. Perlis
        </div>
        <div class="nav">
            <!-- ATTENTION: BEGIN OF GENERATED CODE. DO NOT EDIT MANUALLY -->
            <ul>
<li class="title">Constants
    <ul>
<li class="subtitle subtitle_Constants">
    <a href="#Constants">Constants</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Scoping
    <ul>
<li class="subtitle subtitle_BlockScopedVariables">
    <a href="#BlockScopedVariables">Block-Scoped Variables</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_BlockScopedFunctions">
    <a href="#BlockScopedFunctions">Block-Scoped Functions</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Arrow Functions
    <ul>
<li class="subtitle subtitle_ExpressionBodies">
    <a href="#ExpressionBodies">Expression Bodies</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_StatementBodies">
    <a href="#StatementBodies">Statement Bodies</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_Lexicalthis">
    <a href="#Lexicalthis">Lexical <code>this</code></a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Extended Parameter Handling
    <ul>
<li class="subtitle subtitle_DefaultParameterValues">
    <a href="#DefaultParameterValues">Default Parameter Values</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_RestParameter">
    <a href="#RestParameter">Rest Parameter</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_SpreadOperator">
    <a href="#SpreadOperator">Spread Operator</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Template Literals
    <ul>
<li class="subtitle subtitle_StringInterpolation">
    <a href="#StringInterpolation">String Interpolation</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_CustomInterpolation">
    <a href="#CustomInterpolation">Custom Interpolation</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_RawStringAccess">
    <a href="#RawStringAccess">Raw String Access</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Extended Literals
    <ul>
<li class="subtitle subtitle_BinaryOctalLiteral">
    <a href="#BinaryOctalLiteral">Binary & Octal Literal</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_UnicodeStringRegExpLiteral">
    <a href="#UnicodeStringRegExpLiteral">Unicode String & RegExp Literal</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Enhanced Regular Expression
    <ul>
<li class="subtitle subtitle_RegularExpressionStickyMatching">
    <a href="#RegularExpressionStickyMatching">Regular Expression Sticky Matching</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Enhanced Object Properties
    <ul>
<li class="subtitle subtitle_PropertyShorthand">
    <a href="#PropertyShorthand">Property Shorthand</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_ComputedPropertyNames">
    <a href="#ComputedPropertyNames">Computed Property Names</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_MethodProperties">
    <a href="#MethodProperties">Method Properties</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Destructuring Assignment
    <ul>
<li class="subtitle subtitle_ArrayMatching">
    <a href="#ArrayMatching">Array Matching</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_ObjectMatchingShorthandNotation">
    <a href="#ObjectMatchingShorthandNotation">Object Matching, Shorthand Notation</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_ObjectMatchingDeepMatching">
    <a href="#ObjectMatchingDeepMatching">Object Matching, Deep Matching</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_ObjectAndArrayMatchingDefaultValues">
    <a href="#ObjectAndArrayMatchingDefaultValues">Object And Array Matching, Default Values</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_ParameterContextMatching">
    <a href="#ParameterContextMatching">Parameter Context Matching</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_FailSoftDestructuring">
    <a href="#FailSoftDestructuring">Fail-Soft Destructuring</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Modules
    <ul>
<li class="subtitle subtitle_ValueExportImport">
    <a href="#ValueExportImport">Value Export/Import</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_DefaultWildcard">
    <a href="#DefaultWildcard">Default & Wildcard</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Classes
    <ul>
<li class="subtitle subtitle_ClassDefinition">
    <a href="#ClassDefinition">Class Definition</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_ClassInheritance">
    <a href="#ClassInheritance">Class Inheritance</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_ClassInheritanceFromExpressions">
    <a href="#ClassInheritanceFromExpressions">Class Inheritance, From Expressions</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_BaseClassAccess">
    <a href="#BaseClassAccess">Base Class Access</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_StaticMembers">
    <a href="#StaticMembers">Static Members</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_GetterSetter">
    <a href="#GetterSetter">Getter/Setter</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Symbol Type
    <ul>
<li class="subtitle subtitle_SymbolType">
    <a href="#SymbolType">Symbol Type</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_GlobalSymbols">
    <a href="#GlobalSymbols">Global Symbols</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Iterators
    <ul>
<li class="subtitle subtitle_IteratorForOfOperator">
    <a href="#IteratorForOfOperator">Iterator & For-Of Operator</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Generators
    <ul>
<li class="subtitle subtitle_GeneratorFunctionIteratorProtocol">
    <a href="#GeneratorFunctionIteratorProtocol">Generator Function, Iterator Protocol</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_GeneratorFunctionDirectUse">
    <a href="#GeneratorFunctionDirectUse">Generator Function, Direct Use</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_GeneratorMatching">
    <a href="#GeneratorMatching">Generator Matching</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_GeneratorControlFlow">
    <a href="#GeneratorControlFlow">Generator Control-Flow</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_GeneratorMethods">
    <a href="#GeneratorMethods">Generator Methods</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Map/Set & WeakMap/WeakSet
    <ul>
<li class="subtitle subtitle_SetDataStructure">
    <a href="#SetDataStructure">Set Data-Structure</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_MapDataStructure">
    <a href="#MapDataStructure">Map Data-Structure</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_WeakLinkDataStructures">
    <a href="#WeakLinkDataStructures">Weak-Link Data-Structures</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Typed Arrays
    <ul>
<li class="subtitle subtitle_TypedArrays">
    <a href="#TypedArrays">Typed Arrays</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">New Built-In Methods
    <ul>
<li class="subtitle subtitle_ObjectPropertyAssignment">
    <a href="#ObjectPropertyAssignment">Object Property Assignment</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_ArrayElementFinding">
    <a href="#ArrayElementFinding">Array Element Finding</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_StringRepeating">
    <a href="#StringRepeating">String Repeating</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_StringSearching">
    <a href="#StringSearching">String Searching</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_NumberTypeChecking">
    <a href="#NumberTypeChecking">Number Type Checking</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_NumberSafetyChecking">
    <a href="#NumberSafetyChecking">Number Safety Checking</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_NumberComparison">
    <a href="#NumberComparison">Number Comparison</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_NumberTruncation">
    <a href="#NumberTruncation">Number Truncation</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_NumberSignDetermination">
    <a href="#NumberSignDetermination">Number Sign Determination</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Promises
    <ul>
<li class="subtitle subtitle_PromiseUsage">
    <a href="#PromiseUsage">Promise Usage</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_PromiseCombination">
    <a href="#PromiseCombination">Promise Combination</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Meta-Programming
    <ul>
<li class="subtitle subtitle_Proxying">
    <a href="#Proxying">Proxying</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_Reflection">
    <a href="#Reflection">Reflection</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
<li class="title">Internationalization & Localization
    <ul>
<li class="subtitle subtitle_Collation">
    <a href="#Collation">Collation</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_NumberFormatting">
    <a href="#NumberFormatting">Number Formatting</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_CurrencyFormatting">
    <a href="#CurrencyFormatting">Currency Formatting</a> <i class="fa fa-arrow-circle-right"></i></li>
<li class="subtitle subtitle_DateTimeFormatting">
    <a href="#DateTimeFormatting">Date/Time Formatting</a> <i class="fa fa-arrow-circle-right"></i></li>
    </ul>
</li>
</ul>

            <!-- ATTENTION: END OF GENERATED CODE. DO NOT EDIT MANUALLY -->
        </div>
        <div class="content">
            <!-- ATTENTION: BEGIN OF GENERATED CODE. DO NOT EDIT MANUALLY -->
            <div id="Constants" class="showcase showcase_Constants">    <div class="title">Constants</div>
    <div class="subtitle">Constants</div>
    <div class="desc">Support for constants (also known as "immutable variables"), i.e.,
variables which cannot be re-assigned new content. Notice: this only
makes the variable itself immutable, not its assigned content (for
instance, in case the content is an object, this means the object itself
can still be altered).</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="mark"><span class="keyword">const</span> PI</span><span class="punctuation"> = </span><span class="literal">3</span><span class="punctuation">.</span><span class="literal">141593</span><span class="semi">;</span>
PI <span class="punctuation">&gt;</span> <span class="literal">3</span><span class="punctuation">.</span><span class="literal">0</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  only <span class="keyword">in</span> ES<span class="literal">5</span> through the help <span class="keyword">of</span> object properties</span><span class="comment">
//  and only <span class="keyword">in</span> global context and not <span class="keyword">in</span> a block scope</span>
Object<span class="punctuation">.</span><span class="mark">defineProperty</span><span class="punctuation">(</span>typeof global <span class="punctuation">===</span> <span class="literal">"object"</span> ? global : window<span class="punctuation">,</span> <span class="literal">"<span class="mark">PI</span>"</span><span class="punctuation">,</span> <span class="punctuation">{</span>
    value:        <span class="literal">3</span><span class="punctuation">.</span><span class="literal">141593</span><span class="punctuation">,</span>
    enumerable:   true<span class="punctuation">,</span>
    <span class="mark">writable:     false</span><span class="punctuation">,</span>
    <span class="mark">configurable: false</span>
<span class="punctuation">}</span><span class="punctuation">)</span>
PI <span class="punctuation">&gt;</span> <span class="literal">3</span><span class="punctuation">.</span><span class="literal">0</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="BlockScopedVariables" class="showcase showcase_BlockScopedVariables">    <div class="title">Scoping</div>
    <div class="subtitle">Block-Scoped Variables</div>
    <div class="desc">Block-scoped variables (and constants) without hoisting.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">for</span> <span class="punctuation">(</span><span class="mark"><span class="keyword">let</span> i</span><span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">;</span> i <span class="punctuation">&lt;</span> a<span class="punctuation">.</span>length<span class="punctuation">;</span> i<span class="punctuation">+</span><span class="punctuation">+</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark"><span class="keyword">let</span> x</span><span class="punctuation"> = </span>a<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="semi">;</span>
    <span class="ellipsis">&hellip;</span>
<span class="punctuation">}</span>
<span class="keyword">for</span> <span class="punctuation">(</span><span class="mark"><span class="keyword">let</span> i</span><span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">;</span> i <span class="punctuation">&lt;</span> b<span class="punctuation">.</span>length<span class="punctuation">;</span> i<span class="punctuation">+</span><span class="punctuation">+</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark"><span class="keyword">let</span> y</span><span class="punctuation"> = </span>b<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="semi">;</span>
    <span class="ellipsis">&hellip;</span>
<span class="punctuation">}</span>

<span class="keyword">let</span> callbacks<span class="punctuation"> = </span><span class="punctuation">[</span><span class="punctuation">]</span><span class="semi">;</span>
<span class="keyword">for</span> <span class="punctuation">(</span><span class="mark"><span class="keyword">let</span></span> i<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">;</span> i <span class="punctuation">&lt;</span>= <span class="literal">2</span><span class="punctuation">;</span> i<span class="punctuation">+</span><span class="punctuation">+</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    callbacks<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span> i <span class="punctuation">*</span> <span class="literal">2</span><span class="semi">;</span> <span class="punctuation">}</span><span class="semi">;</span>
<span class="punctuation">}</span>
callbacks<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">0</span><span class="semi">;</span>
callbacks<span class="punctuation">[</span><span class="literal">1</span><span class="punctuation">]</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">2</span><span class="semi">;</span>
callbacks<span class="punctuation">[</span><span class="literal">2</span><span class="punctuation">]</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">4</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="mark"><span class="keyword">var</span> i<span class="punctuation">,</span> x<span class="punctuation">,</span> y</span><span class="semi">;</span>
<span class="keyword">for</span> <span class="punctuation">(</span>i<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">;</span> i <span class="punctuation">&lt;</span> a<span class="punctuation">.</span>length<span class="punctuation">;</span> i<span class="punctuation">+</span><span class="punctuation">+</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    x<span class="punctuation"> = </span>a<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="semi">;</span>
    <span class="ellipsis">&hellip;</span>
<span class="punctuation">}</span>
<span class="keyword">for</span> <span class="punctuation">(</span>i<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">;</span> i <span class="punctuation">&lt;</span> b<span class="punctuation">.</span>length<span class="punctuation">;</span> i<span class="punctuation">+</span><span class="punctuation">+</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    y<span class="punctuation"> = </span>b<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="semi">;</span>
    <span class="ellipsis">&hellip;</span>
<span class="punctuation">}</span>

<span class="keyword">var</span> callbacks<span class="punctuation"> = </span><span class="punctuation">[</span><span class="punctuation">]</span><span class="semi">;</span>
<span class="keyword">for</span> <span class="punctuation">(</span><span class="mark"><span class="keyword">var</span></span> i<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">;</span> i <span class="punctuation">&lt;</span>= <span class="literal">2</span><span class="punctuation">;</span> i<span class="punctuation">+</span><span class="punctuation">+</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark"><span class="punctuation">(</span><span class="keyword">function</span> <span class="punctuation">(</span>i<span class="punctuation">)</span> <span class="punctuation">{</span></span>
        callbacks<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="punctuation"> = </span><span class="keyword">function</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span> i <span class="punctuation">*</span> <span class="literal">2</span><span class="semi">;</span> <span class="punctuation">}</span><span class="semi">;</span>
    <span class="mark"><span class="punctuation">}</span><span class="punctuation">)</span><span class="punctuation">(</span>i<span class="punctuation">)</span><span class="punctuation">;</span></span>
<span class="punctuation">}</span>
callbacks<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">0</span><span class="semi">;</span>
callbacks<span class="punctuation">[</span><span class="literal">1</span><span class="punctuation">]</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">2</span><span class="semi">;</span>
callbacks<span class="punctuation">[</span><span class="literal">2</span><span class="punctuation">]</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">4</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="BlockScopedFunctions" class="showcase showcase_BlockScopedFunctions">    <div class="title">Scoping</div>
    <div class="subtitle">Block-Scoped Functions</div>
    <div class="desc">Block-scoped function definitions.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="punctuation">{</span>
    <span class="keyword">function</span> foo <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span> <span class="literal">1</span><span class="semi">;</span> <span class="punctuation">}</span>
    foo<span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">1</span><span class="semi">;</span>
    <span class="punctuation">{</span>
        <span class="keyword">function</span> <span class="mark">foo</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span> <span class="mark"><span class="literal">2</span></span><span class="semi">;</span> <span class="punctuation">}</span>
        <span class="mark">foo</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="literal">2</span></span><span class="semi">;</span>
    <span class="punctuation">}</span>
    foo<span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">1</span><span class="semi">;</span>
<span class="punctuation">}</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  only <span class="keyword">in</span> ES<span class="literal">5</span> with the help <span class="keyword">of</span> block<span class="punctuation">-</span>scope emulating</span><span class="comment">
//  <span class="keyword">function</span> scopes and <span class="keyword">function</span> expressions</span>
<span class="punctuation">(</span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">var</span> foo<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span> <span class="literal">1</span><span class="semi">;</span> <span class="punctuation">}</span>
    foo<span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">1</span><span class="semi">;</span>
    <span class="mark"><span class="punctuation">(</span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span></span>
        <span class="keyword">var</span> <span class="mark">foo</span><span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span> <span class="mark"><span class="literal">2</span></span><span class="semi">;</span> <span class="punctuation">}</span>
        <span class="mark">foo</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="literal">2</span></span><span class="semi">;</span>
    <span class="mark"><span class="punctuation">}</span><span class="punctuation">)</span><span class="punctuation">(</span><span class="punctuation">)</span><span class="punctuation">;</span></span>
    foo<span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">1</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="punctuation">)</span><span class="punctuation">(</span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ExpressionBodies" class="showcase showcase_ExpressionBodies">    <div class="title">Arrow Functions</div>
    <div class="subtitle">Expression Bodies</div>
    <div class="desc">More expressive closure syntax.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">odds <span class="punctuation"> = </span>evens<span class="punctuation">.</span>map<span class="punctuation">(</span><span class="mark">v <span class="punctuation">=&gt;</span></span> v <span class="punctuation">+</span> <span class="literal">1</span><span class="punctuation">)</span><span class="semi">;</span>
pairs<span class="punctuation"> = </span>evens<span class="punctuation">.</span>map<span class="punctuation">(</span><span class="mark">v <span class="punctuation">=&gt;</span> <span class="punctuation">(</span></span><span class="punctuation">{</span> even: v<span class="punctuation">,</span> odd: v <span class="punctuation">+</span> <span class="literal">1</span> <span class="punctuation">}</span><span class="mark"><span class="punctuation">)</span></span><span class="punctuation">)</span><span class="semi">;</span>
nums <span class="punctuation"> = </span>evens<span class="punctuation">.</span>map<span class="punctuation">(</span><span class="mark"><span class="punctuation">(</span>v<span class="punctuation">,</span> i<span class="punctuation">)</span> <span class="punctuation">=&gt;</span></span> v <span class="punctuation">+</span> i<span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">odds <span class="punctuation"> = </span>evens<span class="punctuation">.</span>map<span class="punctuation">(</span><span class="mark"><span class="keyword">function</span> <span class="punctuation">(</span>v<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span></span> v <span class="punctuation">+</span> <span class="literal">1</span><span class="semi">;</span> <span class="mark"><span class="punctuation">}</span></span><span class="punctuation">)</span><span class="semi">;</span>
pairs<span class="punctuation"> = </span>evens<span class="punctuation">.</span>map<span class="punctuation">(</span><span class="mark"><span class="keyword">function</span> <span class="punctuation">(</span>v<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span></span> <span class="punctuation">{</span> even: v<span class="punctuation">,</span> odd: v <span class="punctuation">+</span> <span class="literal">1</span> <span class="punctuation">}</span><span class="semi">;</span> <span class="mark"><span class="punctuation">}</span></span><span class="punctuation">)</span><span class="semi">;</span>
nums <span class="punctuation"> = </span>evens<span class="punctuation">.</span>map<span class="punctuation">(</span><span class="mark"><span class="keyword">function</span> <span class="punctuation">(</span>v<span class="punctuation">,</span> i<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span></span> v <span class="punctuation">+</span> i<span class="semi">;</span> <span class="mark"><span class="punctuation">}</span></span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="StatementBodies" class="showcase showcase_StatementBodies">    <div class="title">Arrow Functions</div>
    <div class="subtitle">Statement Bodies</div>
    <div class="desc">More expressive closure syntax.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">nums<span class="punctuation">.</span>forEach<span class="punctuation">(</span><span class="mark">v <span class="punctuation">=&gt;</span> <span class="punctuation">{</span></span>
   <span class="keyword">if</span> <span class="punctuation">(</span>v <span class="punctuation">%</span> <span class="literal">5</span> <span class="punctuation">===</span> <span class="literal">0</span><span class="punctuation">)</span>
       fives<span class="punctuation">.</span>push<span class="punctuation">(</span>v<span class="punctuation">)</span><span class="semi">;</span>
<span class="mark"><span class="punctuation">}</span></span><span class="punctuation">)</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">nums<span class="punctuation">.</span>forEach<span class="punctuation">(</span><span class="mark"><span class="keyword">function</span> <span class="punctuation">(</span>v<span class="punctuation">)</span> <span class="punctuation">{</span></span>
   <span class="keyword">if</span> <span class="punctuation">(</span>v <span class="punctuation">%</span> <span class="literal">5</span> <span class="punctuation">===</span> <span class="literal">0</span><span class="punctuation">)</span>
       fives<span class="punctuation">.</span>push<span class="punctuation">(</span>v<span class="punctuation">)</span><span class="semi">;</span>
<span class="mark"><span class="punctuation">}</span></span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="Lexicalthis" class="showcase showcase_Lexicalthis">    <div class="title">Arrow Functions</div>
    <div class="subtitle">Lexical <code>this</code></div>
    <div class="desc">More intuitive handling of current object context.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="mark"><span class="keyword">this</span></span><span class="punctuation">.</span>nums<span class="punctuation">.</span>forEach<span class="punctuation">(</span><span class="mark"><span class="punctuation">(</span>v<span class="punctuation">)</span> <span class="punctuation">=&gt;</span></span> <span class="punctuation">{</span>
    <span class="keyword">if</span> <span class="punctuation">(</span>v <span class="punctuation">%</span> <span class="literal">5</span> <span class="punctuation">===</span> <span class="literal">0</span><span class="punctuation">)</span>
        <span class="mark"><span class="keyword">this</span></span><span class="punctuation">.</span>fives<span class="punctuation">.</span>push<span class="punctuation">(</span>v<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  variant <span class="literal">1</span></span>
<span class="keyword">var</span> <span class="mark">self</span><span class="punctuation"> = </span><span class="mark"><span class="keyword">this</span></span><span class="semi">;</span>
<span class="mark"><span class="keyword">this</span></span><span class="punctuation">.</span>nums<span class="punctuation">.</span>forEach<span class="punctuation">(</span><span class="mark"><span class="keyword">function</span> <span class="punctuation">(</span>v<span class="punctuation">)</span></span> <span class="punctuation">{</span>
    <span class="keyword">if</span> <span class="punctuation">(</span>v <span class="punctuation">%</span> <span class="literal">5</span> <span class="punctuation">===</span> <span class="literal">0</span><span class="punctuation">)</span>
        <span class="mark">self</span><span class="punctuation">.</span>fives<span class="punctuation">.</span>push<span class="punctuation">(</span>v<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="comment">
//  variant <span class="literal">2</span></span>
<span class="mark"><span class="keyword">this</span></span><span class="punctuation">.</span>nums<span class="punctuation">.</span>forEach<span class="punctuation">(</span><span class="mark"><span class="keyword">function</span> <span class="punctuation">(</span>v<span class="punctuation">)</span></span> <span class="punctuation">{</span>
    <span class="keyword">if</span> <span class="punctuation">(</span>v <span class="punctuation">%</span> <span class="literal">5</span> <span class="punctuation">===</span> <span class="literal">0</span><span class="punctuation">)</span>
        <span class="mark"><span class="keyword">this</span></span><span class="punctuation">.</span>fives<span class="punctuation">.</span>push<span class="punctuation">(</span>v<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="punctuation">,</span> <span class="mark"><span class="keyword">this</span></span><span class="punctuation">)</span><span class="semi">;</span>
<span class="comment">
//  variant <span class="literal">3</span> <span class="punctuation">(</span>since ECMAScript <span class="literal">5</span><span class="punctuation">.</span><span class="literal">1</span> only<span class="punctuation">)</span></span>
<span class="mark"><span class="keyword">this</span></span><span class="punctuation">.</span>nums<span class="punctuation">.</span>forEach<span class="punctuation">(</span><span class="mark"><span class="keyword">function</span> <span class="punctuation">(</span>v<span class="punctuation">)</span></span> <span class="punctuation">{</span>
    <span class="keyword">if</span> <span class="punctuation">(</span>v <span class="punctuation">%</span> <span class="literal">5</span> <span class="punctuation">===</span> <span class="literal">0</span><span class="punctuation">)</span>
        <span class="mark"><span class="keyword">this</span></span><span class="punctuation">.</span>fives<span class="punctuation">.</span>push<span class="punctuation">(</span>v<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="mark"><span class="punctuation">.</span>bind<span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">)</span></span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="DefaultParameterValues" class="showcase showcase_DefaultParameterValues">    <div class="title">Extended Parameter Handling</div>
    <div class="subtitle">Default Parameter Values</div>
    <div class="desc">Simple and intuitive default values for function parameters.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> f <span class="punctuation">(</span>x<span class="punctuation">,</span> y <span class="mark">= <span class="literal">7</span></span><span class="punctuation">,</span> z <span class="mark">= <span class="literal">42</span></span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> x <span class="punctuation">+</span> y <span class="punctuation">+</span> z<span class="semi">;</span>
<span class="punctuation">}</span>
f<span class="punctuation">(</span><span class="literal">1</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">50</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> f <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">,</span> z<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark"><span class="keyword">if</span> <span class="punctuation">(</span>y <span class="punctuation">===</span> undefined<span class="punctuation">)</span></span>
        <span class="mark">y<span class="punctuation"> = </span><span class="literal">7</span></span><span class="semi">;</span>
    <span class="mark"><span class="keyword">if</span> <span class="punctuation">(</span>z <span class="punctuation">===</span> undefined<span class="punctuation">)</span></span>
        <span class="mark">z<span class="punctuation"> = </span><span class="literal">42</span></span><span class="semi">;</span>
    <span class="keyword">return</span> x <span class="punctuation">+</span> y <span class="punctuation">+</span> z<span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
f<span class="punctuation">(</span><span class="literal">1</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">50</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="RestParameter" class="showcase showcase_RestParameter">    <div class="title">Extended Parameter Handling</div>
    <div class="subtitle">Rest Parameter</div>
    <div class="desc">Aggregation of remaining arguments into single parameter of variadic functions.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> f <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">,</span> <span class="mark"><span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>a</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="punctuation">(</span>x <span class="punctuation">+</span> y<span class="punctuation">)</span> <span class="punctuation">*</span> a<span class="punctuation">.</span>length<span class="semi">;</span>
<span class="punctuation">}</span>
f<span class="punctuation">(</span><span class="literal">1</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">,</span> <span class="mark"><span class="literal">"hello"</span><span class="punctuation">,</span> true<span class="punctuation">,</span> <span class="literal">7</span></span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">9</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> f <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark"><span class="keyword">var</span> a<span class="punctuation"> = </span>Array<span class="punctuation">.</span>prototype<span class="punctuation">.</span>slice<span class="punctuation">.</span>call<span class="punctuation">(</span>arguments<span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">)</span></span><span class="semi">;</span>
    <span class="keyword">return</span> <span class="punctuation">(</span>x <span class="punctuation">+</span> y<span class="punctuation">)</span> <span class="punctuation">*</span> a<span class="punctuation">.</span>length<span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
f<span class="punctuation">(</span><span class="literal">1</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">,</span> <span class="mark"><span class="literal">"hello"</span><span class="punctuation">,</span> true<span class="punctuation">,</span> <span class="literal">7</span></span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">9</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="SpreadOperator" class="showcase showcase_SpreadOperator">    <div class="title">Extended Parameter Handling</div>
    <div class="subtitle">Spread Operator</div>
    <div class="desc">Spreading of elements of an iterable collection (like an array or even
a string) into both literal elements and individual function parameters.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> params<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="literal">"hello"</span><span class="punctuation">,</span> true<span class="punctuation">,</span> <span class="literal">7</span> <span class="punctuation">]</span><span class="semi">;</span>
<span class="keyword">var</span> other<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="literal">1</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">,</span> <span class="mark"><span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>params</span> <span class="punctuation">]</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span> <span class="literal">1</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">,</span> <span class="literal">"hello"</span><span class="punctuation">,</span> true<span class="punctuation">,</span> <span class="literal">7</span> <span class="punctuation">]</span></span>

<span class="keyword">function</span> f <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">,</span> <span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>a<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="punctuation">(</span>x <span class="punctuation">+</span> y<span class="punctuation">)</span> <span class="punctuation">*</span> a<span class="punctuation">.</span>length<span class="semi">;</span>
<span class="punctuation">}</span>
f<span class="punctuation">(</span><span class="literal">1</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">,</span> <span class="mark"><span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>params</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">9</span><span class="semi">;</span>

<span class="keyword">var</span> str<span class="punctuation"> = </span><span class="literal">"foo"</span><span class="semi">;</span>
<span class="keyword">var</span> chars<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="mark"><span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>str</span> <span class="punctuation">]</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span> <span class="literal">"f"</span><span class="punctuation">,</span> <span class="literal">"o"</span><span class="punctuation">,</span> <span class="literal">"o"</span> <span class="punctuation">]</span></span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> params<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="literal">"hello"</span><span class="punctuation">,</span> true<span class="punctuation">,</span> <span class="literal">7</span> <span class="punctuation">]</span><span class="semi">;</span>
<span class="keyword">var</span> other<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="literal">1</span><span class="punctuation">,</span> <span class="literal">2</span> <span class="punctuation">]</span><span class="punctuation">.</span><span class="mark">concat<span class="punctuation">(</span>params<span class="punctuation">)</span></span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span> <span class="literal">1</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">,</span> <span class="literal">"hello"</span><span class="punctuation">,</span> true<span class="punctuation">,</span> <span class="literal">7</span> <span class="punctuation">]</span></span>

<span class="keyword">function</span> f <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">var</span> a<span class="punctuation"> = </span>Array<span class="punctuation">.</span>prototype<span class="punctuation">.</span>slice<span class="punctuation">.</span>call<span class="punctuation">(</span>arguments<span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">)</span><span class="semi">;</span>
    <span class="keyword">return</span> <span class="punctuation">(</span>x <span class="punctuation">+</span> y<span class="punctuation">)</span> <span class="punctuation">*</span> a<span class="punctuation">.</span>length<span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
f<span class="mark"><span class="punctuation">.</span>apply</span><span class="punctuation">(</span><span class="mark">undefined<span class="punctuation">,</span> <span class="punctuation">[</span></span> <span class="literal">1</span><span class="punctuation">,</span> <span class="literal">2</span> <span class="mark"><span class="punctuation">]</span><span class="punctuation">.</span>concat<span class="punctuation">(</span>params<span class="punctuation">)</span></span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">9</span><span class="semi">;</span>

<span class="keyword">var</span> str<span class="punctuation"> = </span><span class="literal">"foo"</span><span class="semi">;</span>
<span class="keyword">var</span> chars<span class="punctuation"> = </span>str<span class="punctuation">.</span>split<span class="punctuation">(</span><span class="literal">""</span><span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span> <span class="literal">"f"</span><span class="punctuation">,</span> <span class="literal">"o"</span><span class="punctuation">,</span> <span class="literal">"o"</span> <span class="punctuation">]</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="StringInterpolation" class="showcase showcase_StringInterpolation">    <div class="title">Template Literals</div>
    <div class="subtitle">String Interpolation</div>
    <div class="desc">Intuitive expression interpolation for single-line and multi-line strings.
(Notice: don't be confused, Template Literals were originally named
"Template Strings" in the drafts of the ECMAScript 6 language specification)</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> customer<span class="punctuation"> = </span><span class="punctuation">{</span> name: <span class="literal">"Foo"</span> <span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> card<span class="punctuation"> = </span><span class="punctuation">{</span> amount: <span class="literal">7</span><span class="punctuation">,</span> product: <span class="literal">"Bar"</span><span class="punctuation">,</span> unitprice: <span class="literal">42</span> <span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> message<span class="punctuation"> = </span><span class="mark"><span class="literal">`</span>Hello <span class="mark">$<span class="punctuation">{</span>customer<span class="punctuation">.</span>name<span class="punctuation">}</span></span><span class="punctuation">,</span>
want to buy <span class="mark">$<span class="punctuation">{</span>card<span class="punctuation">.</span>amount<span class="punctuation">}</span> $<span class="punctuation">{</span>card<span class="punctuation">.</span>product<span class="punctuation">}</span></span> <span class="keyword">for</span>
a total <span class="keyword">of</span> <span class="mark">$<span class="punctuation">{</span>card<span class="punctuation">.</span>amount <span class="punctuation">*</span> card<span class="punctuation">.</span>unitprice<span class="punctuation">}</span></span> bucks?<span class="mark">`</span></span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> customer<span class="punctuation"> = </span><span class="punctuation">{</span> name: <span class="literal">"Foo"</span> <span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> card<span class="punctuation"> = </span><span class="punctuation">{</span> amount: <span class="literal">7</span><span class="punctuation">,</span> product: <span class="literal">"Bar"</span><span class="punctuation">,</span> unitprice: <span class="literal">42</span> <span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> message<span class="punctuation"> = </span><span class="mark"><span class="literal">"</span>Hello "</span><span class="mark"> <span class="punctuation">+</span> customer<span class="punctuation">.</span>name <span class="punctuation">+</span> </span><span class="literal">"<span class="punctuation">,</span>\n"</span> <span class="punctuation">+</span>
<span class="literal">"want to buy "</span><span class="mark"> <span class="punctuation">+</span> card<span class="punctuation">.</span>amount <span class="punctuation">+</span> </span><span class="literal">" "</span><span class="mark"> <span class="punctuation">+</span> card<span class="punctuation">.</span>product <span class="punctuation">+</span> </span><span class="literal">" <span class="keyword">for</span>\n"</span> <span class="punctuation">+</span>
<span class="literal">"a total <span class="keyword">of</span> "</span><span class="mark"> <span class="punctuation">+</span> <span class="punctuation">(</span>card<span class="punctuation">.</span>amount <span class="punctuation">*</span> card<span class="punctuation">.</span>unitprice<span class="punctuation">)</span> <span class="punctuation">+</span> </span><span class="literal">" bucks?<span class="mark">"</span></span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="CustomInterpolation" class="showcase showcase_CustomInterpolation">    <div class="title">Template Literals</div>
    <div class="subtitle">Custom Interpolation</div>
    <div class="desc">Flexible expression interpolation for arbitrary methods.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">get<span class="mark"><span class="literal">`</span>http://example<span class="punctuation">.</span>com/foo?bar=<span class="mark">$<span class="punctuation">{</span></span>bar <span class="punctuation">+</span> baz<span class="mark"><span class="punctuation">}</span></span><span class="punctuation"><span class="punctuation">&amp;</span></span>quux=<span class="mark">$<span class="punctuation">{</span></span>quux<span class="mark"><span class="punctuation">}</span>`</span></span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">get<span class="mark"><span class="punctuation">(</span><span class="punctuation">[</span> </span><span class="literal">"http://example<span class="punctuation">.</span>com/foo?bar="</span><span class="mark"><span class="punctuation">,</span></span> <span class="literal">"<span class="punctuation"><span class="punctuation">&amp;</span></span>quux="</span><span class="mark"><span class="punctuation">,</span></span> <span class="literal">""</span><span class="mark"> <span class="punctuation">]</span><span class="punctuation">,</span></span>bar <span class="punctuation">+</span> baz<span class="mark"><span class="punctuation">,</span></span> quux<span class="mark"><span class="punctuation">)</span></span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="RawStringAccess" class="showcase showcase_RawStringAccess">    <div class="title">Template Literals</div>
    <div class="subtitle">Raw String Access</div>
    <div class="desc">Access the raw template string content (backslashes are not interpreted).</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> quux <span class="punctuation">(</span>strings<span class="punctuation">,</span> <span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>values<span class="punctuation">)</span> <span class="punctuation">{</span>
    strings<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span> <span class="punctuation">===</span> <span class="literal">"<span class="mark">foo\n</span>"</span><span class="semi">;</span>
    strings<span class="punctuation">[</span><span class="literal">1</span><span class="punctuation">]</span> <span class="punctuation">===</span> <span class="literal">"bar"</span><span class="semi">;</span>
    strings<span class="mark"><span class="punctuation">.</span>raw</span><span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span> <span class="punctuation">===</span> <span class="literal">"<span class="mark">foo\\n</span>"</span><span class="semi">;</span>
    strings<span class="punctuation">.</span>raw<span class="punctuation">[</span><span class="literal">1</span><span class="punctuation">]</span> <span class="punctuation">===</span> <span class="literal">"bar"</span><span class="semi">;</span>
    values<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span> <span class="punctuation">===</span> <span class="literal">42</span><span class="semi">;</span>
<span class="punctuation">}</span>
quux<span class="mark"><span class="literal">`</span>foo<span class="mark">\n</span>$<span class="punctuation">{</span> 42 <span class="punctuation">}</span>bar<span class="mark">`</span></span>

String<span class="punctuation">.</span>raw<span class="mark"><span class="literal">`</span>foo<span class="mark">\n</span>$<span class="punctuation">{</span> 42 <span class="punctuation">}</span>bar<span class="mark">`</span></span> <span class="punctuation">===</span> <span class="literal">"foo<span class="mark">\\n</span>42bar"</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="BinaryOctalLiteral" class="showcase showcase_BinaryOctalLiteral">    <div class="title">Extended Literals</div>
    <div class="subtitle">Binary & Octal Literal</div>
    <div class="desc">Direct support for safe binary and octal literals.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="mark"><span class="literal">0</span>b</span><span class="literal">111110111</span> <span class="punctuation">===</span> <span class="literal">503</span><span class="semi">;</span>
<span class="mark"><span class="literal">0</span>o</span><span class="literal">767</span> <span class="punctuation">===</span> <span class="literal">503</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="mark">parseInt<span class="punctuation">(</span></span><span class="literal">"111110111"</span><span class="mark"><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">)</span></span> <span class="punctuation">===</span> <span class="literal">503</span><span class="semi">;</span>
<span class="mark">parseInt<span class="punctuation">(</span></span><span class="literal">"767"</span><span class="mark"><span class="punctuation">,</span> <span class="literal">8</span><span class="punctuation">)</span></span> <span class="punctuation">===</span> <span class="literal">503</span><span class="semi">;</span>
<span class="mark"><span class="literal">0</span></span><span class="literal">767</span> <span class="punctuation">===</span> <span class="literal">503</span><span class="semi">;</span><span class="comment"> // only <span class="keyword">in</span> non<span class="punctuation">-</span>strict<span class="punctuation">,</span> backward compatibility mode</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="UnicodeStringRegExpLiteral" class="showcase showcase_UnicodeStringRegExpLiteral">    <div class="title">Extended Literals</div>
    <div class="subtitle">Unicode String & RegExp Literal</div>
    <div class="desc">Extended support using Unicode within strings and regular expressions.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="literal">"𠮷"</span><span class="punctuation">.</span>length <span class="punctuation">===</span> <span class="literal">2</span><span class="semi">;</span>
<span class="literal">"𠮷"</span><span class="punctuation">.</span>match<span class="punctuation">(</span>/<span class="punctuation">.</span>/<span class="mark">u</span><span class="punctuation">)</span><span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="punctuation">.</span>length <span class="punctuation">===</span> <span class="literal">2</span><span class="semi">;</span>
<span class="literal">"𠮷"</span> <span class="punctuation">===</span> <span class="literal">"\uD842\uDFB7"</span><span class="semi">;</span>
<span class="literal">"𠮷"</span> <span class="punctuation">===</span> <span class="literal">"<span class="mark">\u<span class="punctuation">{</span>20BB7<span class="punctuation">}</span></span>"</span><span class="semi">;</span>
<span class="literal">"𠮷"</span><span class="punctuation">.</span><span class="mark">codePointAt</span><span class="punctuation">(</span><span class="literal">0</span><span class="punctuation">)</span> == <span class="literal">0</span>x<span class="literal">20</span>BB<span class="literal">7</span><span class="semi">;</span>
<span class="keyword">for</span> <span class="punctuation">(</span><span class="keyword">let</span> codepoint <span class="mark"><span class="keyword">of</span></span> <span class="literal">"𠮷"</span><span class="punctuation">)</span> console<span class="punctuation">.</span>log<span class="punctuation">(</span>codepoint<span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="literal">"𠮷"</span><span class="punctuation">.</span>length <span class="punctuation">===</span> <span class="literal">2</span><span class="semi">;</span>
<span class="literal">"𠮷"</span><span class="punctuation">.</span>match<span class="punctuation">(</span>/<span class="punctuation">(</span>?:<span class="punctuation">[</span>\<span class="literal">0</span><span class="punctuation">-</span>\t\x<span class="literal">0</span>B\f\x<span class="literal">0</span>E<span class="punctuation">-</span>\u<span class="literal">2027</span>\u<span class="literal">202</span>A<span class="punctuation">-</span>\uD<span class="literal">7</span>FF\uE<span class="literal">000</span><span class="punctuation">-</span>\uFFFF<span class="punctuation">]</span><span class="mark"><span class="punctuation">[</span>\uD<span class="literal">800</span><span class="punctuation">-</span>\uDBFF<span class="punctuation">]</span><span class="punctuation">[</span>\uDC<span class="literal">00</span><span class="punctuation">-</span>\uDFFF<span class="punctuation">]</span></span><span class="punctuation">[</span>\uD<span class="literal">800</span><span class="punctuation">-</span>\uDBFF<span class="punctuation">]</span><span class="punctuation">(</span>?!<span class="punctuation">[</span>\uDC<span class="literal">00</span><span class="punctuation">-</span>\uDFFF<span class="punctuation">]</span><span class="punctuation">)</span><span class="mark"><span class="punctuation">(</span>?:<span class="punctuation">[</span>^\uD<span class="literal">800</span><span class="punctuation">-</span>\uDBFF<span class="punctuation">]</span></span>^<span class="punctuation">)</span><span class="punctuation">[</span>\uDC<span class="literal">00</span><span class="punctuation">-</span>\uDFFF<span class="punctuation">]</span><span class="punctuation">)</span>/<span class="punctuation">)</span><span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="punctuation">.</span>length <span class="punctuation">===</span> <span class="literal">2</span><span class="semi">;</span>
<span class="literal">"𠮷"</span> <span class="punctuation">===</span> <span class="literal">"\uD842\uDFB7"</span><span class="semi">;</span><span class="comment">
//  no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span><span class="comment">
//  no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span><span class="comment">
//  no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="RegularExpressionStickyMatching" class="showcase showcase_RegularExpressionStickyMatching">    <div class="title">Enhanced Regular Expression</div>
    <div class="subtitle">Regular Expression Sticky Matching</div>
    <div class="desc">Keep the matching position sticky between matches and
this way support efficient parsing of arbitrary long input strings,
even with an arbitrary number of distinct regular expressions.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">let</span> parser<span class="punctuation"> = </span><span class="punctuation">(</span>input<span class="punctuation">,</span> match<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
    <span class="keyword">for</span> <span class="punctuation">(</span><span class="keyword">let</span> pos<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">,</span> lastPos<span class="punctuation"> = </span>input<span class="punctuation">.</span>length<span class="punctuation">;</span> <span class="mark">pos <span class="punctuation">&lt;</span> lastPos</span><span class="punctuation">;</span> <span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">for</span> <span class="punctuation">(</span><span class="keyword">let</span> i<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">;</span> i <span class="punctuation">&lt;</span> match<span class="punctuation">.</span>length<span class="punctuation">;</span> i<span class="punctuation">+</span><span class="punctuation">+</span><span class="punctuation">)</span> <span class="punctuation">{</span>
            <span class="mark">match<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="punctuation">.</span>pattern<span class="punctuation">.</span>lastIndex<span class="punctuation"> = </span>pos</span><span class="semi">;</span>
            <span class="keyword">let</span> found<span class="semi">;</span>
            <span class="keyword">if</span> <span class="punctuation">(</span><span class="punctuation">(</span>found<span class="punctuation"> = </span>match<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="punctuation">.</span>pattern<span class="punctuation">.</span>exec<span class="punctuation">(</span>input<span class="punctuation">)</span><span class="punctuation">)</span> !== null<span class="punctuation">)</span> <span class="punctuation">{</span>
                match<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="punctuation">.</span>action<span class="punctuation">(</span>found<span class="punctuation">)</span><span class="semi">;</span>
                <span class="mark">pos<span class="punctuation"> = </span>match<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="punctuation">.</span>pattern<span class="punctuation">.</span>lastIndex</span><span class="semi">;</span>
                break<span class="semi">;</span>
            <span class="punctuation">}</span>
        <span class="punctuation">}</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>

<span class="keyword">let</span> report<span class="punctuation"> = </span><span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>JSON<span class="punctuation">.</span>stringify<span class="punctuation">(</span>match<span class="punctuation">)</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
parser<span class="punctuation">(</span><span class="literal">"Foo 1 Bar 7 Baz 42"</span><span class="punctuation">,</span> <span class="punctuation">[</span>
    <span class="punctuation">{</span> pattern: /Foo\s<span class="punctuation">+</span><span class="punctuation">(</span>\d<span class="punctuation">+</span><span class="punctuation">)</span>/<span class="mark">y</span><span class="punctuation">,</span> action: <span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> report<span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    <span class="punctuation">{</span> pattern: /Bar\s<span class="punctuation">+</span><span class="punctuation">(</span>\d<span class="punctuation">+</span><span class="punctuation">)</span>/<span class="mark">y</span><span class="punctuation">,</span> action: <span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> report<span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    <span class="punctuation">{</span> pattern: /Baz\s<span class="punctuation">+</span><span class="punctuation">(</span>\d<span class="punctuation">+</span><span class="punctuation">)</span>/<span class="mark">y</span><span class="punctuation">,</span> action: <span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> report<span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    <span class="punctuation">{</span> pattern: /\s<span class="punctuation">*</span>/<span class="mark">y</span><span class="punctuation">,</span>         action: <span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span><span class="punctuation">}</span>            <span class="punctuation">}</span>
<span class="punctuation">]</span><span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> parser<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>input<span class="punctuation">,</span> match<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">for</span> <span class="punctuation">(</span><span class="keyword">var</span> i<span class="punctuation">,</span> found<span class="punctuation">,</span> <span class="mark">inputTmp<span class="punctuation"> = </span>input</span><span class="punctuation">;</span> <span class="mark">inputTmp !== <span class="literal">""</span></span><span class="punctuation">;</span> <span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">for</span> <span class="punctuation">(</span>i<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">;</span> i <span class="punctuation">&lt;</span> match<span class="punctuation">.</span>length<span class="punctuation">;</span> i<span class="punctuation">+</span><span class="punctuation">+</span><span class="punctuation">)</span> <span class="punctuation">{</span>
            <span class="keyword">if</span> <span class="punctuation">(</span><span class="punctuation">(</span>found<span class="punctuation"> = </span>match<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="punctuation">.</span>pattern<span class="punctuation">.</span>exec<span class="punctuation">(</span>inputTmp<span class="punctuation">)</span><span class="punctuation">)</span> !== null<span class="punctuation">)</span> <span class="punctuation">{</span>
                match<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="punctuation">.</span>action<span class="punctuation">(</span>found<span class="punctuation">)</span><span class="semi">;</span>
                <span class="mark">inputTmp<span class="punctuation"> = </span>inputTmp<span class="punctuation">.</span>substr<span class="punctuation">(</span>found<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="punctuation">.</span>length<span class="punctuation">)</span></span><span class="semi">;</span>
                break<span class="semi">;</span>
            <span class="punctuation">}</span>
        <span class="punctuation">}</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>

<span class="keyword">var</span> report<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">{</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>JSON<span class="punctuation">.</span>stringify<span class="punctuation">(</span>match<span class="punctuation">)</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
parser<span class="punctuation">(</span><span class="literal">"Foo 1 Bar 7 Baz 42"</span><span class="punctuation">,</span> <span class="punctuation">[</span>
    <span class="punctuation">{</span> pattern: /^Foo\s<span class="punctuation">+</span><span class="punctuation">(</span>\d<span class="punctuation">+</span><span class="punctuation">)</span>/<span class="punctuation">,</span> action: <span class="keyword">function</span> <span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">{</span> report<span class="punctuation">(</span>match<span class="punctuation">)</span><span class="semi">;</span> <span class="punctuation">}</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    <span class="punctuation">{</span> pattern: /^Bar\s<span class="punctuation">+</span><span class="punctuation">(</span>\d<span class="punctuation">+</span><span class="punctuation">)</span>/<span class="punctuation">,</span> action: <span class="keyword">function</span> <span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">{</span> report<span class="punctuation">(</span>match<span class="punctuation">)</span><span class="semi">;</span> <span class="punctuation">}</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    <span class="punctuation">{</span> pattern: /^Baz\s<span class="punctuation">+</span><span class="punctuation">(</span>\d<span class="punctuation">+</span><span class="punctuation">)</span>/<span class="punctuation">,</span> action: <span class="keyword">function</span> <span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">{</span> report<span class="punctuation">(</span>match<span class="punctuation">)</span><span class="semi">;</span> <span class="punctuation">}</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    <span class="punctuation">{</span> pattern: /^\s<span class="punctuation">*</span>/<span class="punctuation">,</span>         action: <span class="keyword">function</span> <span class="punctuation">(</span>match<span class="punctuation">)</span> <span class="punctuation">{</span><span class="punctuation">}</span>                 <span class="punctuation">}</span>
<span class="punctuation">]</span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="PropertyShorthand" class="showcase showcase_PropertyShorthand">    <div class="title">Enhanced Object Properties</div>
    <div class="subtitle">Property Shorthand</div>
    <div class="desc">Shorter syntax for common object property definition idiom.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> x<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">,</span> y<span class="punctuation"> = </span><span class="literal">0</span><span class="semi">;</span>
obj<span class="punctuation"> = </span><span class="punctuation">{</span> <span class="mark">x</span><span class="punctuation">,</span> <span class="mark">y</span> <span class="punctuation">}</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> x<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">,</span> y<span class="punctuation"> = </span><span class="literal">0</span><span class="semi">;</span>
obj<span class="punctuation"> = </span><span class="punctuation">{</span> <span class="mark">x: x</span><span class="punctuation">,</span> <span class="mark">y: y</span> <span class="punctuation">}</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ComputedPropertyNames" class="showcase showcase_ComputedPropertyNames">    <div class="title">Enhanced Object Properties</div>
    <div class="subtitle">Computed Property Names</div>
    <div class="desc">Support for computed names in object property definitions.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">let</span> obj<span class="punctuation"> = </span><span class="punctuation">{</span>
    foo: <span class="literal">"bar"</span><span class="punctuation">,</span>
    <span class="mark"><span class="punctuation">[</span></span> <span class="literal">"baz"</span> <span class="punctuation">+</span> quux<span class="punctuation">(</span><span class="punctuation">)</span> <span class="mark"><span class="punctuation">]</span>:</span> <span class="literal">42</span>
<span class="punctuation">}</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> obj<span class="punctuation"> = </span><span class="punctuation">{</span>
    foo: <span class="literal">"bar"</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="mark">obj<span class="punctuation">[</span></span> <span class="literal">"baz"</span> <span class="punctuation">+</span> quux<span class="punctuation">(</span><span class="punctuation">)</span> <span class="mark"><span class="punctuation">]</span> =</span> <span class="literal">42</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="MethodProperties" class="showcase showcase_MethodProperties">    <div class="title">Enhanced Object Properties</div>
    <div class="subtitle">Method Properties</div>
    <div class="desc">Support for method notation in object property definitions,
for both regular functions and generator functions.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">obj<span class="punctuation"> = </span><span class="punctuation">{</span>
    <span class="mark">foo <span class="punctuation">(</span>a<span class="punctuation">,</span> b<span class="punctuation">)</span></span> <span class="punctuation">{</span>
        <span class="ellipsis">&hellip;</span>
    <span class="punctuation">}</span><span class="punctuation">,</span>
    <span class="mark">bar <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span></span> <span class="punctuation">{</span>
        <span class="ellipsis">&hellip;</span>
    <span class="punctuation">}</span><span class="punctuation">,</span>
    <span class="mark"><span class="punctuation">*</span>quux <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span></span> <span class="punctuation">{</span>
        <span class="ellipsis">&hellip;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">obj<span class="punctuation"> = </span><span class="punctuation">{</span>
    foo<span class="mark">: <span class="keyword">function</span></span> <span class="punctuation">(</span>a<span class="punctuation">,</span> b<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="ellipsis">&hellip;</span>
    <span class="punctuation">}</span><span class="punctuation">,</span>
    bar<span class="mark">: <span class="keyword">function</span></span> <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="ellipsis">&hellip;</span>
    <span class="punctuation">}</span><span class="punctuation">,</span>
   <span class="comment"> //  quux: no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span>
    <span class="ellipsis">&hellip;</span>
<span class="punctuation">}</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ArrayMatching" class="showcase showcase_ArrayMatching">    <div class="title">Destructuring Assignment</div>
    <div class="subtitle">Array Matching</div>
    <div class="desc">Intuitive and flexible destructuring of Arrays into individual variables during assignment.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> list<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="literal">1</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">,</span> <span class="literal">3</span> <span class="punctuation">]</span><span class="semi">;</span>
<span class="keyword">var</span> <span class="mark"><span class="punctuation">[</span> a<span class="punctuation">,</span> <span class="punctuation">,</span> b <span class="punctuation">]</span><span class="punctuation"> = </span>list</span><span class="semi">;</span>
<span class="punctuation">[</span> <span class="mark">b<span class="punctuation">,</span> a</span> <span class="punctuation">]</span><span class="punctuation"> = </span><span class="punctuation">[</span> <span class="mark">a<span class="punctuation">,</span> b</span> <span class="punctuation">]</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> list<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="literal">1</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">,</span> <span class="literal">3</span> <span class="punctuation">]</span><span class="semi">;</span>
<span class="keyword">var</span> <span class="mark">a<span class="punctuation"> = </span>list<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span></span><span class="punctuation">,</span> <span class="mark">b<span class="punctuation"> = </span>list<span class="punctuation">[</span><span class="literal">2</span><span class="punctuation">]</span></span><span class="semi">;</span>
<span class="keyword">var</span> <span class="mark">tmp<span class="punctuation"> = </span>a</span><span class="punctuation">;</span> <span class="mark">a<span class="punctuation"> = </span>b</span><span class="punctuation">;</span> <span class="mark">b<span class="punctuation"> = </span>tmp</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ObjectMatchingShorthandNotation" class="showcase showcase_ObjectMatchingShorthandNotation">    <div class="title">Destructuring Assignment</div>
    <div class="subtitle">Object Matching, Shorthand Notation</div>
    <div class="desc">Intuitive and flexible destructuring of Objects into individual variables during assignment.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> <span class="mark"><span class="punctuation">{</span> op<span class="punctuation">,</span> lhs<span class="punctuation">,</span> rhs <span class="punctuation">}</span></span><span class="punctuation"> = </span>getASTNode<span class="punctuation">(</span><span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> <span class="mark">tmp</span><span class="punctuation"> = </span>getASTNode<span class="punctuation">(</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="keyword">var</span> <span class="mark">op <span class="punctuation"> = </span>tmp<span class="punctuation">.</span>op</span><span class="semi">;</span>
<span class="keyword">var</span> <span class="mark">lhs<span class="punctuation"> = </span>tmp<span class="punctuation">.</span>lhs</span><span class="semi">;</span>
<span class="keyword">var</span> <span class="mark">rhs<span class="punctuation"> = </span>tmp<span class="punctuation">.</span>rhs</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ObjectMatchingDeepMatching" class="showcase showcase_ObjectMatchingDeepMatching">    <div class="title">Destructuring Assignment</div>
    <div class="subtitle">Object Matching, Deep Matching</div>
    <div class="desc">Intuitive and flexible destructuring of Objects into individual variables during assignment.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> <span class="punctuation">{</span> op: a<span class="punctuation">,</span> <span class="mark">lhs: <span class="punctuation">{</span> op: b <span class="punctuation">}</span></span><span class="punctuation">,</span> rhs: c <span class="punctuation">}</span><span class="punctuation"> = </span>getASTNode<span class="punctuation">(</span><span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> tmp<span class="punctuation"> = </span>getASTNode<span class="punctuation">(</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="keyword">var</span> a<span class="punctuation"> = </span>tmp<span class="punctuation">.</span>op<span class="semi">;</span>
<span class="keyword">var</span> <span class="mark">b<span class="punctuation"> = </span>tmp<span class="punctuation">.</span>lhs<span class="punctuation">.</span>op</span><span class="semi">;</span>
<span class="keyword">var</span> c<span class="punctuation"> = </span>tmp<span class="punctuation">.</span>rhs<span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ObjectAndArrayMatchingDefaultValues" class="showcase showcase_ObjectAndArrayMatchingDefaultValues">    <div class="title">Destructuring Assignment</div>
    <div class="subtitle">Object And Array Matching, Default Values</div>
    <div class="desc">Simple and intuitive default values for destructuring of Objects and Arrays.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> obj<span class="punctuation"> = </span><span class="punctuation">{</span> a: <span class="literal">1</span> <span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> list<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="literal">1</span> <span class="punctuation">]</span><span class="semi">;</span>
<span class="keyword">var</span> <span class="punctuation">{</span> a<span class="punctuation">,</span> <span class="mark">b<span class="punctuation"> = </span><span class="literal">2</span></span> <span class="punctuation">}</span><span class="punctuation"> = </span>obj<span class="semi">;</span>
<span class="keyword">var</span> <span class="punctuation">[</span> x<span class="punctuation">,</span> <span class="mark">y<span class="punctuation"> = </span><span class="literal">2</span></span> <span class="punctuation">]</span><span class="punctuation"> = </span>list<span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> obj<span class="punctuation"> = </span><span class="punctuation">{</span> a: <span class="literal">1</span> <span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> list<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="literal">1</span> <span class="punctuation">]</span><span class="semi">;</span>
<span class="keyword">var</span> a<span class="punctuation"> = </span>obj<span class="punctuation">.</span>a<span class="semi">;</span>
<span class="keyword">var</span> <span class="mark">b<span class="punctuation"> = </span>obj<span class="punctuation">.</span>b <span class="punctuation">===</span> undefined ? <span class="literal">2</span> : obj<span class="punctuation">.</span>b</span><span class="semi">;</span>
<span class="keyword">var</span> x<span class="punctuation"> = </span>list<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="semi">;</span>
<span class="keyword">var</span> <span class="mark">y<span class="punctuation"> = </span>list<span class="punctuation">[</span><span class="literal">1</span><span class="punctuation">]</span> <span class="punctuation">===</span> undefined ? <span class="literal">2</span> : list<span class="punctuation">[</span><span class="literal">1</span><span class="punctuation">]</span></span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ParameterContextMatching" class="showcase showcase_ParameterContextMatching">    <div class="title">Destructuring Assignment</div>
    <div class="subtitle">Parameter Context Matching</div>
    <div class="desc">Intuitive and flexible destructuring of Arrays and Objects into individual parameters during function calls.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> f <span class="punctuation">(</span><span class="mark"><span class="punctuation">[</span> name<span class="punctuation">,</span> val <span class="punctuation">]</span></span><span class="punctuation">)</span> <span class="punctuation">{</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>name<span class="punctuation">,</span> val<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span>
<span class="keyword">function</span> g <span class="punctuation">(</span><span class="mark"><span class="punctuation">{</span> name: n<span class="punctuation">,</span> val: v <span class="punctuation">}</span></span><span class="punctuation">)</span> <span class="punctuation">{</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>n<span class="punctuation">,</span> v<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span>
<span class="keyword">function</span> h <span class="punctuation">(</span><span class="mark"><span class="punctuation">{</span> name<span class="punctuation">,</span> val <span class="punctuation">}</span></span><span class="punctuation">)</span> <span class="punctuation">{</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>name<span class="punctuation">,</span> val<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span>
f<span class="punctuation">(</span><span class="punctuation">[</span> <span class="literal">"bar"</span><span class="punctuation">,</span> <span class="literal">42</span> <span class="punctuation">]</span><span class="punctuation">)</span><span class="semi">;</span>
g<span class="punctuation">(</span><span class="punctuation">{</span> name: <span class="literal">"foo"</span><span class="punctuation">,</span> val:  <span class="literal">7</span> <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
h<span class="punctuation">(</span><span class="punctuation">{</span> name: <span class="literal">"bar"</span><span class="punctuation">,</span> val: <span class="literal">42</span> <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> f <span class="punctuation">(</span><span class="mark">arg</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark"><span class="keyword">var</span> name<span class="punctuation"> = </span>arg<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span></span><span class="semi">;</span>
    <span class="mark"><span class="keyword">var</span> val <span class="punctuation"> = </span>arg<span class="punctuation">[</span><span class="literal">1</span><span class="punctuation">]</span></span><span class="semi">;</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>name<span class="punctuation">,</span> val<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">function</span> g <span class="punctuation">(</span><span class="mark">arg</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark"><span class="keyword">var</span> n<span class="punctuation"> = </span>arg<span class="punctuation">.</span>name</span><span class="semi">;</span>
    <span class="mark"><span class="keyword">var</span> v<span class="punctuation"> = </span>arg<span class="punctuation">.</span>val</span><span class="semi">;</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>n<span class="punctuation">,</span> v<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">function</span> h <span class="punctuation">(</span><span class="mark">arg</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark"><span class="keyword">var</span> name<span class="punctuation"> = </span>arg<span class="punctuation">.</span>name</span><span class="semi">;</span>
    <span class="mark"><span class="keyword">var</span> val <span class="punctuation"> = </span>arg<span class="punctuation">.</span>val</span><span class="semi">;</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>name<span class="punctuation">,</span> val<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
f<span class="punctuation">(</span><span class="punctuation">[</span> <span class="literal">"bar"</span><span class="punctuation">,</span> <span class="literal">42</span> <span class="punctuation">]</span><span class="punctuation">)</span><span class="semi">;</span>
g<span class="punctuation">(</span><span class="punctuation">{</span> name: <span class="literal">"foo"</span><span class="punctuation">,</span> val:  <span class="literal">7</span> <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
h<span class="punctuation">(</span><span class="punctuation">{</span> name: <span class="literal">"bar"</span><span class="punctuation">,</span> val: <span class="literal">42</span> <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="FailSoftDestructuring" class="showcase showcase_FailSoftDestructuring">    <div class="title">Destructuring Assignment</div>
    <div class="subtitle">Fail-Soft Destructuring</div>
    <div class="desc">Fail-soft destructuring, optionally with defaults.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> list<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="literal">7</span><span class="punctuation">,</span> <span class="literal">42</span> <span class="punctuation">]</span><span class="semi">;</span>
<span class="keyword">var</span> <span class="punctuation">[</span> a<span class="punctuation"> = </span><span class="literal">1</span><span class="punctuation">,</span> b<span class="punctuation"> = </span><span class="literal">2</span><span class="punctuation">,</span> <span class="mark">c<span class="punctuation"> = </span><span class="literal">3</span></span><span class="punctuation">,</span> <span class="mark">d</span> <span class="punctuation">]</span><span class="punctuation"> = </span>list<span class="semi">;</span>
a <span class="punctuation">===</span> <span class="literal">7</span><span class="semi">;</span>
b <span class="punctuation">===</span> <span class="literal">42</span><span class="semi">;</span>
c <span class="punctuation">===</span> <span class="mark"><span class="literal">3</span></span><span class="semi">;</span>
d <span class="punctuation">===</span> <span class="mark">undefined</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> list<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="literal">7</span><span class="punctuation">,</span> <span class="literal">42</span> <span class="punctuation">]</span><span class="semi">;</span>
<span class="keyword">var</span> a<span class="punctuation"> = </span>typeof list<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span> !== <span class="literal">"undefined"</span> ? list<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span> : <span class="literal">1</span><span class="semi">;</span>
<span class="keyword">var</span> b<span class="punctuation"> = </span>typeof list<span class="punctuation">[</span><span class="literal">1</span><span class="punctuation">]</span> !== <span class="literal">"undefined"</span> ? list<span class="punctuation">[</span><span class="literal">1</span><span class="punctuation">]</span> : <span class="literal">2</span><span class="semi">;</span>
<span class="keyword">var</span> c<span class="punctuation"> = </span>typeof list<span class="punctuation">[</span><span class="literal">2</span><span class="punctuation">]</span> !== <span class="literal">"undefined"</span> ? list<span class="punctuation">[</span><span class="literal">2</span><span class="punctuation">]</span> : <span class="mark"><span class="literal">3</span></span><span class="semi">;</span>
<span class="keyword">var</span> d<span class="punctuation"> = </span>typeof list<span class="punctuation">[</span><span class="literal">3</span><span class="punctuation">]</span> !== <span class="literal">"undefined"</span> ? list<span class="punctuation">[</span><span class="literal">3</span><span class="punctuation">]</span> : <span class="mark">undefined</span><span class="semi">;</span>
a <span class="punctuation">===</span> <span class="literal">7</span><span class="semi">;</span>
b <span class="punctuation">===</span> <span class="literal">42</span><span class="semi">;</span>
c <span class="punctuation">===</span> <span class="mark"><span class="literal">3</span></span><span class="semi">;</span>
d <span class="punctuation">===</span> <span class="mark">undefined</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ValueExportImport" class="showcase showcase_ValueExportImport">    <div class="title">Modules</div>
    <div class="subtitle">Value Export/Import</div>
    <div class="desc">Support for exporting/importing values from/to modules without global namespace pollution.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  lib/math<span class="punctuation">.</span>js</span>
<span class="mark"><span class="keyword">export</span></span> <span class="keyword">function</span> <span class="mark">sum</span> <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span> x <span class="punctuation">+</span> y <span class="punctuation">}</span><span class="semi">;</span>
<span class="mark"><span class="keyword">export</span></span> <span class="keyword">var</span> <span class="mark">pi</span><span class="punctuation"> = </span><span class="literal">3</span><span class="punctuation">.</span><span class="literal">141593</span><span class="semi">;</span>
<span class="comment">
//  someApp<span class="punctuation">.</span>js</span>
<span class="mark"><span class="keyword">import</span> <span class="punctuation">*</span> as math</span> from <span class="literal">"lib/math"</span><span class="semi">;</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">"2π<span class="punctuation"> = </span>"</span> <span class="punctuation">+</span> math<span class="punctuation">.</span>sum<span class="punctuation">(</span>math<span class="punctuation">.</span>pi<span class="punctuation">,</span> math<span class="punctuation">.</span>pi<span class="punctuation">)</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="comment">
//  otherApp<span class="punctuation">.</span>js</span>
<span class="mark"><span class="keyword">import</span> <span class="punctuation">{</span> sum<span class="punctuation">,</span> pi <span class="punctuation">}</span></span> from <span class="literal">"lib/math"</span><span class="semi">;</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">"2π<span class="punctuation"> = </span>"</span> <span class="punctuation">+</span> sum<span class="punctuation">(</span>pi<span class="punctuation">,</span> pi<span class="punctuation">)</span><span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  lib/math<span class="punctuation">.</span>js</span>
<span class="mark">LibMath<span class="punctuation"> = </span><span class="punctuation">{</span><span class="punctuation">}</span></span><span class="semi">;</span>
<span class="mark">LibMath<span class="punctuation">.</span>sum</span><span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span> x <span class="punctuation">+</span> y <span class="punctuation">}</span><span class="semi">;</span>
<span class="mark">LibMath<span class="punctuation">.</span>pi</span><span class="punctuation"> = </span><span class="literal">3</span><span class="punctuation">.</span><span class="literal">141593</span><span class="semi">;</span>
<span class="comment">
//  someApp<span class="punctuation">.</span>js</span>
<span class="keyword">var</span> <span class="mark">math<span class="punctuation"> = </span>LibMath</span><span class="semi">;</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">"2π<span class="punctuation"> = </span>"</span> <span class="punctuation">+</span> math<span class="punctuation">.</span>sum<span class="punctuation">(</span>math<span class="punctuation">.</span>pi<span class="punctuation">,</span> math<span class="punctuation">.</span>pi<span class="punctuation">)</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="comment">
//  otherApp<span class="punctuation">.</span>js</span>
<span class="keyword">var</span> <span class="mark">sum<span class="punctuation"> = </span>LibMath<span class="punctuation">.</span>sum</span><span class="punctuation">,</span> <span class="mark">pi<span class="punctuation"> = </span>LibMath<span class="punctuation">.</span>pi</span><span class="semi">;</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">"2π<span class="punctuation"> = </span>"</span> <span class="punctuation">+</span> sum<span class="punctuation">(</span>pi<span class="punctuation">,</span> pi<span class="punctuation">)</span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="DefaultWildcard" class="showcase showcase_DefaultWildcard">    <div class="title">Modules</div>
    <div class="subtitle">Default & Wildcard</div>
    <div class="desc">Marking a value as the default exported value and mass-mixin of values.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  lib/mathplusplus<span class="punctuation">.</span>js</span>
<span class="mark"><span class="keyword">export</span> <span class="punctuation">*</span></span> from <span class="literal">"lib/math"</span><span class="semi">;</span>
<span class="keyword">export</span> <span class="keyword">var</span> e<span class="punctuation"> = </span><span class="literal">2</span><span class="punctuation">.</span><span class="literal">71828182846</span><span class="semi">;</span>
<span class="mark"><span class="keyword">export</span> default</span> <span class="punctuation">(</span>x<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> Math<span class="punctuation">.</span>exp<span class="punctuation">(</span>x<span class="punctuation">)</span><span class="semi">;</span>
<span class="comment">
//  someApp<span class="punctuation">.</span>js</span>
<span class="mark"><span class="keyword">import</span> exp<span class="punctuation">,</span> <span class="punctuation">{</span> pi<span class="punctuation">,</span> e <span class="punctuation">}</span></span> from <span class="literal">"lib/mathplusplus"</span><span class="semi">;</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">"e^<span class="punctuation">{</span>π<span class="punctuation">}</span><span class="punctuation"> = </span>"</span> <span class="punctuation">+</span> exp<span class="punctuation">(</span>pi<span class="punctuation">)</span><span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  lib/mathplusplus<span class="punctuation">.</span>js</span>
<span class="mark">LibMathPP<span class="punctuation"> = </span><span class="punctuation">{</span><span class="punctuation">}</span></span><span class="semi">;</span>
<span class="mark"><span class="keyword">for</span> <span class="punctuation">(</span>symbol <span class="keyword">in</span> LibMath<span class="punctuation">)</span></span>
    <span class="mark"><span class="keyword">if</span> <span class="punctuation">(</span>LibMath<span class="punctuation">.</span>hasOwnProperty<span class="punctuation">(</span>symbol<span class="punctuation">)</span><span class="punctuation">)</span></span>
        <span class="mark">LibMathPP<span class="punctuation">[</span>symbol<span class="punctuation">]</span><span class="punctuation"> = </span>LibMath<span class="punctuation">[</span>symbol<span class="punctuation">]</span></span><span class="semi">;</span>
<span class="mark">LibMathPP<span class="punctuation">.</span>e</span><span class="punctuation"> = </span><span class="literal">2</span><span class="punctuation">.</span><span class="literal">71828182846</span><span class="semi">;</span>
<span class="mark">LibMathPP<span class="punctuation">.</span>exp</span><span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>x<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span> Math<span class="punctuation">.</span>exp<span class="punctuation">(</span>x<span class="punctuation">)</span> <span class="punctuation">}</span><span class="semi">;</span>
<span class="comment">
//  someApp<span class="punctuation">.</span>js</span>
<span class="keyword">var</span> <span class="mark">exp<span class="punctuation"> = </span>LibMathPP<span class="punctuation">.</span>exp</span><span class="punctuation">,</span> <span class="mark">pi<span class="punctuation"> = </span>LibMathPP<span class="punctuation">.</span>pi</span><span class="punctuation">,</span> <span class="mark">e<span class="punctuation"> = </span>LibMathPP<span class="punctuation">.</span>e</span><span class="semi">;</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">"e^<span class="punctuation">{</span>π<span class="punctuation">}</span><span class="punctuation"> = </span>"</span> <span class="punctuation">+</span> exp<span class="punctuation">(</span>pi<span class="punctuation">)</span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ClassDefinition" class="showcase showcase_ClassDefinition">    <div class="title">Classes</div>
    <div class="subtitle">Class Definition</div>
    <div class="desc">More intuitive, OOP-style and boilerplate-free classes.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="mark"><span class="keyword">class</span></span> Shape <span class="punctuation">{</span>
    <span class="mark">constructor</span> <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">this</span><span class="punctuation">.</span>id<span class="punctuation"> = </span>id<span class="semi">;</span>
        <span class="keyword">this</span><span class="punctuation">.</span>move<span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span>
    <span class="mark">move</span> <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">this</span><span class="punctuation">.</span>x<span class="punctuation"> = </span>x<span class="semi">;</span>
        <span class="keyword">this</span><span class="punctuation">.</span>y<span class="punctuation"> = </span>y<span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> Shape<span class="punctuation"> = </span><span class="mark"><span class="keyword">function</span></span> <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">this</span><span class="punctuation">.</span>id<span class="punctuation"> = </span>id<span class="semi">;</span>
    <span class="keyword">this</span><span class="punctuation">.</span>move<span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
Shape<span class="punctuation">.</span><span class="mark">prototype<span class="punctuation">.</span>move</span><span class="punctuation"> = </span><span class="mark"><span class="keyword">function</span></span> <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">this</span><span class="punctuation">.</span>x<span class="punctuation"> = </span>x<span class="semi">;</span>
    <span class="keyword">this</span><span class="punctuation">.</span>y<span class="punctuation"> = </span>y<span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ClassInheritance" class="showcase showcase_ClassInheritance">    <div class="title">Classes</div>
    <div class="subtitle">Class Inheritance</div>
    <div class="desc">More intuitive, OOP-style and boilerplate-free inheritance.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="mark"><span class="keyword">class</span></span> Rectangle <span class="mark"><span class="keyword">extends</span></span> Shape <span class="punctuation">{</span>
    constructor <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">,</span> width<span class="punctuation">,</span> height<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="mark">super</span><span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">)</span><span class="semi">;</span>
        <span class="keyword">this</span><span class="punctuation">.</span>width <span class="punctuation"> = </span>width<span class="semi">;</span>
        <span class="keyword">this</span><span class="punctuation">.</span>height<span class="punctuation"> = </span>height<span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>
<span class="mark"><span class="keyword">class</span></span> Circle <span class="mark"><span class="keyword">extends</span></span> Shape <span class="punctuation">{</span>
    constructor <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">,</span> radius<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="mark">super</span><span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">)</span><span class="semi">;</span>
        <span class="keyword">this</span><span class="punctuation">.</span>radius<span class="punctuation"> = </span>radius<span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> Rectangle<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">,</span> width<span class="punctuation">,</span> height<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark">Shape<span class="punctuation">.</span>call</span><span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">,</span> id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">)</span><span class="semi">;</span>
    <span class="keyword">this</span><span class="punctuation">.</span>width <span class="punctuation"> = </span>width<span class="semi">;</span>
    <span class="keyword">this</span><span class="punctuation">.</span>height<span class="punctuation"> = </span>height<span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="mark">Rectangle<span class="punctuation">.</span>prototype<span class="punctuation"> = </span>Object<span class="punctuation">.</span>create<span class="punctuation">(</span>Shape<span class="punctuation">.</span>prototype<span class="punctuation">)</span></span><span class="semi">;</span>
<span class="mark">Rectangle<span class="punctuation">.</span>prototype<span class="punctuation">.</span>constructor<span class="punctuation"> = </span>Rectangle</span><span class="semi">;</span>
<span class="keyword">var</span> Circle<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">,</span> radius<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark">Shape<span class="punctuation">.</span>call</span><span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">,</span> id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">)</span><span class="semi">;</span>
    <span class="keyword">this</span><span class="punctuation">.</span>radius<span class="punctuation"> = </span>radius<span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="mark">Circle<span class="punctuation">.</span>prototype<span class="punctuation"> = </span>Object<span class="punctuation">.</span>create<span class="punctuation">(</span>Shape<span class="punctuation">.</span>prototype<span class="punctuation">)</span></span><span class="semi">;</span>
<span class="mark">Circle<span class="punctuation">.</span>prototype<span class="punctuation">.</span>constructor<span class="punctuation"> = </span>Circle</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ClassInheritanceFromExpressions" class="showcase showcase_ClassInheritanceFromExpressions">    <div class="title">Classes</div>
    <div class="subtitle">Class Inheritance, From Expressions</div>
    <div class="desc">Support for mixin-style inheritance by extending from expressions yielding
function objects. [Notice: the generic <code>aggregation</code> function is usually provided
by a library like <a href="https://github.com/rse/aggregation">this one</a>, of course]</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> <span class="mark">aggregation</span><span class="punctuation"> = </span><span class="punctuation">(</span>baseClass<span class="punctuation">,</span> <span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>mixins<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
    <span class="keyword">let</span> base<span class="punctuation"> = </span><span class="keyword">class</span> _Combined <span class="keyword">extends</span> baseClass <span class="punctuation">{</span>
        constructor <span class="punctuation">(</span><span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>args<span class="punctuation">)</span> <span class="punctuation">{</span>
            <span class="mark">super</span><span class="punctuation">(</span><span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>args<span class="punctuation">)</span><span class="semi">;</span>
            mixins<span class="punctuation">.</span>forEach<span class="punctuation">(</span><span class="punctuation">(</span>mixin<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
                mixin<span class="punctuation">.</span>prototype<span class="punctuation">.</span><span class="mark">initializer</span><span class="punctuation">.</span>call<span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">)</span><span class="semi">;</span>
            <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
        <span class="punctuation">}</span>
    <span class="punctuation">}</span><span class="semi">;</span>
    <span class="keyword">let</span> copyProps<span class="punctuation"> = </span><span class="punctuation">(</span>target<span class="punctuation">,</span> source<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
        Object<span class="punctuation">.</span>getOwnPropertyNames<span class="punctuation">(</span>source<span class="punctuation">)</span>
            <span class="punctuation">.</span>concat<span class="punctuation">(</span>Object<span class="punctuation">.</span>getOwnPropertySymbols<span class="punctuation">(</span>source<span class="punctuation">)</span><span class="punctuation">)</span>
            <span class="punctuation">.</span>forEach<span class="punctuation">(</span><span class="punctuation">(</span>prop<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
            <span class="keyword">if</span> <span class="punctuation">(</span>prop<span class="punctuation">.</span>match<span class="punctuation">(</span>/^<span class="punctuation">(</span>?:constructor|prototype|arguments|caller|name|bind|call|apply|toString|length<span class="punctuation">)</span>$/<span class="punctuation">)</span><span class="punctuation">)</span>
                <span class="keyword">return</span>
            Object<span class="punctuation">.</span>defineProperty<span class="punctuation">(</span>target<span class="punctuation">,</span> prop<span class="punctuation">,</span> Object<span class="punctuation">.</span>getOwnPropertyDescriptor<span class="punctuation">(</span>source<span class="punctuation">,</span> prop<span class="punctuation">)</span><span class="punctuation">)</span>
        <span class="punctuation">}</span><span class="punctuation">)</span>
    <span class="punctuation">}</span>
    mixins<span class="punctuation">.</span>forEach<span class="punctuation">(</span><span class="punctuation">(</span>mixin<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
        copyProps<span class="punctuation">(</span>base<span class="punctuation">.</span>prototype<span class="punctuation">,</span> mixin<span class="punctuation">.</span>prototype<span class="punctuation">)</span><span class="semi">;</span>
        copyProps<span class="punctuation">(</span>base<span class="punctuation">,</span> mixin<span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
    <span class="keyword">return</span> base<span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>

<span class="keyword">class</span> <span class="mark">Colored</span> <span class="punctuation">{</span>
    <span class="mark">initializer</span> <span class="punctuation">(</span><span class="punctuation">)</span>     <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_color<span class="punctuation"> = </span><span class="literal">"white"</span><span class="semi">;</span> <span class="punctuation">}</span>
    get color <span class="punctuation">(</span><span class="punctuation">)</span>       <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_color<span class="semi">;</span> <span class="punctuation">}</span>
    set color <span class="punctuation">(</span>v<span class="punctuation">)</span>      <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_color<span class="punctuation"> = </span>v<span class="semi">;</span> <span class="punctuation">}</span>
<span class="punctuation">}</span>

<span class="keyword">class</span> <span class="mark">ZCoord</span> <span class="punctuation">{</span>
    <span class="mark">initializer</span> <span class="punctuation">(</span><span class="punctuation">)</span>     <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_z<span class="punctuation"> = </span><span class="literal">0</span><span class="semi">;</span> <span class="punctuation">}</span>
    get z <span class="punctuation">(</span><span class="punctuation">)</span>           <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_z<span class="semi">;</span> <span class="punctuation">}</span>
    set z <span class="punctuation">(</span>v<span class="punctuation">)</span>          <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_z<span class="punctuation"> = </span>v<span class="semi">;</span> <span class="punctuation">}</span>
<span class="punctuation">}</span>

<span class="keyword">class</span> <span class="mark">Shape</span> <span class="punctuation">{</span>
    <span class="mark">constructor</span> <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_x<span class="punctuation"> = </span>x<span class="punctuation">;</span> <span class="keyword">this</span><span class="punctuation">.</span>_y<span class="punctuation"> = </span>y<span class="semi">;</span> <span class="punctuation">}</span>
    get x <span class="punctuation">(</span><span class="punctuation">)</span>           <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_x<span class="semi">;</span> <span class="punctuation">}</span>
    set x <span class="punctuation">(</span>v<span class="punctuation">)</span>          <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_x<span class="punctuation"> = </span>v<span class="semi">;</span> <span class="punctuation">}</span>
    get y <span class="punctuation">(</span><span class="punctuation">)</span>           <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_y<span class="semi">;</span> <span class="punctuation">}</span>
    set y <span class="punctuation">(</span>v<span class="punctuation">)</span>          <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_y<span class="punctuation"> = </span>v<span class="semi">;</span> <span class="punctuation">}</span>
<span class="punctuation">}</span>

<span class="keyword">class</span> Rectangle <span class="keyword">extends</span> <span class="mark">aggregation<span class="punctuation">(</span>Shape<span class="punctuation">,</span> Colored<span class="punctuation">,</span> ZCoord<span class="punctuation">)</span></span> <span class="punctuation">{</span><span class="punctuation">}</span>

<span class="keyword">var</span> rect<span class="punctuation"> = </span><span class="keyword">new</span> Rectangle<span class="punctuation">(</span><span class="literal">7</span><span class="punctuation">,</span> <span class="literal">42</span><span class="punctuation">)</span><span class="semi">;</span>
rect<span class="punctuation">.</span><span class="mark">z</span>    <span class="punctuation"> = </span><span class="literal">1000</span><span class="semi">;</span>
rect<span class="punctuation">.</span><span class="mark">color</span><span class="punctuation"> = </span><span class="literal">"red"</span><span class="semi">;</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>rect<span class="punctuation">.</span>x<span class="punctuation">,</span> rect<span class="punctuation">.</span>y<span class="punctuation">,</span> rect<span class="punctuation">.</span>z<span class="punctuation">,</span> rect<span class="punctuation">.</span>color<span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> <span class="mark">aggregation</span><span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>baseClass<span class="punctuation">,</span> mixins<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">var</span> base<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="mark">baseClass<span class="punctuation">.</span>apply</span><span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">,</span> arguments<span class="punctuation">)</span><span class="semi">;</span>
        mixins<span class="punctuation">.</span>forEach<span class="punctuation">(</span><span class="keyword">function</span> <span class="punctuation">(</span>mixin<span class="punctuation">)</span> <span class="punctuation">{</span>
            mixin<span class="punctuation">.</span>prototype<span class="punctuation">.</span><span class="mark">initializer</span><span class="punctuation">.</span>call<span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">)</span><span class="semi">;</span>
        <span class="punctuation">}</span><span class="punctuation">.</span>bind<span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">)</span><span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span><span class="semi">;</span>
    base<span class="punctuation">.</span>prototype<span class="punctuation"> = </span>Object<span class="punctuation">.</span>create<span class="punctuation">(</span>baseClass<span class="punctuation">.</span>prototype<span class="punctuation">)</span><span class="semi">;</span>
    base<span class="punctuation">.</span>prototype<span class="punctuation">.</span>constructor<span class="punctuation"> = </span>base<span class="semi">;</span>
    <span class="keyword">var</span> copyProps<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>target<span class="punctuation">,</span> source<span class="punctuation">)</span> <span class="punctuation">{</span>
        Object<span class="punctuation">.</span>getOwnPropertyNames<span class="punctuation">(</span>source<span class="punctuation">)</span><span class="punctuation">.</span>forEach<span class="punctuation">(</span><span class="keyword">function</span> <span class="punctuation">(</span>prop<span class="punctuation">)</span> <span class="punctuation">{</span>
            <span class="keyword">if</span> <span class="punctuation">(</span>prop<span class="punctuation">.</span>match<span class="punctuation">(</span>/^<span class="punctuation">(</span>?:constructor|prototype|arguments|caller|name|bind|call|apply|toString|length<span class="punctuation">)</span>$/<span class="punctuation">)</span><span class="punctuation">)</span>
                <span class="keyword">return</span>
            Object<span class="punctuation">.</span>defineProperty<span class="punctuation">(</span>target<span class="punctuation">,</span> prop<span class="punctuation">,</span> Object<span class="punctuation">.</span>getOwnPropertyDescriptor<span class="punctuation">(</span>source<span class="punctuation">,</span> prop<span class="punctuation">)</span><span class="punctuation">)</span>
        <span class="punctuation">}</span><span class="punctuation">)</span>
    <span class="punctuation">}</span>
    mixins<span class="punctuation">.</span>forEach<span class="punctuation">(</span><span class="keyword">function</span> <span class="punctuation">(</span>mixin<span class="punctuation">)</span> <span class="punctuation">{</span>
        copyProps<span class="punctuation">(</span>base<span class="punctuation">.</span>prototype<span class="punctuation">,</span> mixin<span class="punctuation">.</span>prototype<span class="punctuation">)</span><span class="semi">;</span>
        copyProps<span class="punctuation">(</span>base<span class="punctuation">,</span> mixin<span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
    <span class="keyword">return</span> base<span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>

<span class="keyword">var</span> Colored<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span><span class="punctuation">}</span><span class="semi">;</span>
Colored<span class="punctuation">.</span>prototype<span class="punctuation"> = </span><span class="punctuation">{</span>
    <span class="mark">initializer</span>: <span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span>  <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_color<span class="punctuation"> = </span><span class="literal">"white"</span><span class="semi">;</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    getColor:    <span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span>  <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_color<span class="semi">;</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    setColor:    <span class="keyword">function</span> <span class="punctuation">(</span>v<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_color<span class="punctuation"> = </span>v<span class="semi">;</span> <span class="punctuation">}</span>
<span class="punctuation">}</span><span class="semi">;</span>

<span class="keyword">var</span> ZCoord<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span><span class="punctuation">}</span><span class="semi">;</span>
ZCoord<span class="punctuation">.</span>prototype<span class="punctuation"> = </span><span class="punctuation">{</span>
    <span class="mark">initializer</span>: <span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span>  <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_z<span class="punctuation"> = </span><span class="literal">0</span><span class="semi">;</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    getZ:        <span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span>  <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_z<span class="semi">;</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    setZ:        <span class="keyword">function</span> <span class="punctuation">(</span>v<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_z<span class="punctuation"> = </span>v<span class="semi">;</span> <span class="punctuation">}</span>
<span class="punctuation">}</span><span class="semi">;</span>

<span class="keyword">var</span> Shape<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">this</span><span class="punctuation">.</span>_x<span class="punctuation"> = </span>x<span class="punctuation">;</span> <span class="keyword">this</span><span class="punctuation">.</span>_y<span class="punctuation"> = </span>y<span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
Shape<span class="punctuation">.</span>prototype<span class="punctuation"> = </span><span class="punctuation">{</span>
    getX: <span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span>  <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_x<span class="semi">;</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    setX: <span class="keyword">function</span> <span class="punctuation">(</span>v<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_x<span class="punctuation"> = </span>v<span class="semi">;</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    getY: <span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span>  <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_y<span class="semi">;</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    setY: <span class="keyword">function</span> <span class="punctuation">(</span>v<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_y<span class="punctuation"> = </span>v<span class="semi">;</span> <span class="punctuation">}</span>
<span class="punctuation">}</span>

<span class="keyword">var</span> _Combined<span class="punctuation"> = </span><span class="mark">aggregation<span class="punctuation">(</span>Shape<span class="punctuation">,</span> <span class="punctuation">[</span> Colored<span class="punctuation">,</span> ZCoord <span class="punctuation">]</span><span class="punctuation">)</span></span><span class="semi">;</span>
<span class="keyword">var</span> Rectangle<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span>
    _Combined<span class="punctuation">.</span>call<span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
Rectangle<span class="punctuation">.</span>prototype<span class="punctuation"> = </span>Object<span class="punctuation">.</span>create<span class="punctuation">(</span>_Combined<span class="punctuation">.</span>prototype<span class="punctuation">)</span><span class="semi">;</span>
Rectangle<span class="punctuation">.</span>prototype<span class="punctuation">.</span>constructor<span class="punctuation"> = </span>Rectangle<span class="semi">;</span>

<span class="keyword">var</span> rect<span class="punctuation"> = </span><span class="keyword">new</span> Rectangle<span class="punctuation">(</span><span class="literal">7</span><span class="punctuation">,</span> <span class="literal">42</span><span class="punctuation">)</span><span class="semi">;</span>
rect<span class="punctuation">.</span><span class="mark">setZ</span><span class="punctuation">(</span><span class="literal">1000</span><span class="punctuation">)</span><span class="semi">;</span>
rect<span class="punctuation">.</span><span class="mark">setColor</span><span class="punctuation">(</span><span class="literal">"red"</span><span class="punctuation">)</span><span class="semi">;</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>rect<span class="punctuation">.</span>getX<span class="punctuation">(</span><span class="punctuation">)</span><span class="punctuation">,</span> rect<span class="punctuation">.</span>getY<span class="punctuation">(</span><span class="punctuation">)</span><span class="punctuation">,</span> rect<span class="punctuation">.</span>getZ<span class="punctuation">(</span><span class="punctuation">)</span><span class="punctuation">,</span> rect<span class="punctuation">.</span>getColor<span class="punctuation">(</span><span class="punctuation">)</span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="BaseClassAccess" class="showcase showcase_BaseClassAccess">    <div class="title">Classes</div>
    <div class="subtitle">Base Class Access</div>
    <div class="desc">Intuitive access to base class constructor and methods.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">class</span> Shape <span class="punctuation">{</span>
    <span class="ellipsis">&hellip;</span>
    <span class="mark">toString</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">return</span> <span class="literal">`Shape<span class="punctuation">(</span>$<span class="punctuation">{</span><span class="keyword">this</span><span class="punctuation">.</span>id<span class="punctuation">}</span><span class="punctuation">)</span>`</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>
<span class="keyword">class</span> Rectangle <span class="keyword">extends</span> Shape <span class="punctuation">{</span>
    constructor <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">,</span> width<span class="punctuation">,</span> height<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="mark">super</span><span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">)</span><span class="semi">;</span>
        <span class="ellipsis">&hellip;</span>
    <span class="punctuation">}</span>
    <span class="mark">toString</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">return</span> <span class="literal">"Rectangle <span class="punctuation">&gt;</span> "</span> <span class="punctuation">+</span> <span class="mark">super<span class="punctuation">.</span>toString<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>
<span class="keyword">class</span> Circle <span class="keyword">extends</span> Shape <span class="punctuation">{</span>
    constructor <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">,</span> radius<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="mark">super</span><span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">)</span><span class="semi">;</span>
        <span class="ellipsis">&hellip;</span>
    <span class="punctuation">}</span>
    <span class="mark">toString</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">return</span> <span class="literal">"Circle <span class="punctuation">&gt;</span> "</span> <span class="punctuation">+</span> <span class="mark">super<span class="punctuation">.</span>toString<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> Shape<span class="punctuation"> = </span><span class="mark"><span class="keyword">function</span></span> <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="ellipsis">&hellip;</span>
<span class="punctuation">}</span><span class="semi">;</span>
Shape<span class="punctuation">.</span><span class="mark">prototype<span class="punctuation">.</span>toString</span><span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>x<span class="punctuation">,</span> y<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="literal">"Shape<span class="punctuation">(</span>"</span> <span class="punctuation">+</span> <span class="keyword">this</span><span class="punctuation">.</span>id <span class="punctuation">+</span> <span class="literal">"<span class="punctuation">)</span>"</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> Rectangle<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">,</span> width<span class="punctuation">,</span> height<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark">Shape<span class="punctuation">.</span>call</span><span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">,</span> id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">)</span><span class="semi">;</span>
    <span class="ellipsis">&hellip;</span>
<span class="punctuation">}</span><span class="semi">;</span>
Rectangle<span class="mark"><span class="punctuation">.</span>prototype<span class="punctuation">.</span>toString</span><span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="literal">"Rectangle <span class="punctuation">&gt;</span> "</span> <span class="punctuation">+</span> <span class="mark">Shape<span class="punctuation">.</span>prototype<span class="punctuation">.</span>toString<span class="punctuation">.</span>call<span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">)</span></span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> Circle<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">,</span> radius<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark">Shape<span class="punctuation">.</span>call</span><span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">,</span> id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">)</span><span class="semi">;</span>
    <span class="ellipsis">&hellip;</span>
<span class="punctuation">}</span><span class="semi">;</span>
Circle<span class="mark"><span class="punctuation">.</span>prototype<span class="punctuation">.</span>toString</span><span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="literal">"Circle <span class="punctuation">&gt;</span> "</span> <span class="punctuation">+</span> <span class="mark">Shape<span class="punctuation">.</span>prototype<span class="punctuation">.</span>toString<span class="punctuation">.</span>call<span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">)</span></span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="StaticMembers" class="showcase showcase_StaticMembers">    <div class="title">Classes</div>
    <div class="subtitle">Static Members</div>
    <div class="desc">Simple support for static class members.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">class</span> Rectangle <span class="keyword">extends</span> Shape <span class="punctuation">{</span>
    <span class="ellipsis">&hellip;</span>
    <span class="mark">static defaultRectangle</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">return</span> <span class="keyword">new</span> Rectangle<span class="punctuation">(</span><span class="literal">"default"</span><span class="punctuation">,</span> <span class="literal">0</span><span class="punctuation">,</span> <span class="literal">0</span><span class="punctuation">,</span> <span class="literal">100</span><span class="punctuation">,</span> <span class="literal">100</span><span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>
<span class="keyword">class</span> Circle <span class="keyword">extends</span> Shape <span class="punctuation">{</span>
    <span class="ellipsis">&hellip;</span>
    <span class="mark">static defaultCircle</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">return</span> <span class="keyword">new</span> Circle<span class="punctuation">(</span><span class="literal">"default"</span><span class="punctuation">,</span> <span class="literal">0</span><span class="punctuation">,</span> <span class="literal">0</span><span class="punctuation">,</span> <span class="literal">100</span><span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>
<span class="keyword">var</span> defRectangle<span class="punctuation"> = </span><span class="mark">Rectangle<span class="punctuation">.</span>defaultRectangle<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="semi">;</span>
<span class="keyword">var</span> defCircle   <span class="punctuation"> = </span><span class="mark">Circle<span class="punctuation">.</span>defaultCircle<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> Rectangle<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">,</span> width<span class="punctuation">,</span> height<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="ellipsis">&hellip;</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="mark">Rectangle<span class="punctuation">.</span>defaultRectangle</span><span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="keyword">new</span> Rectangle<span class="punctuation">(</span><span class="literal">"default"</span><span class="punctuation">,</span> <span class="literal">0</span><span class="punctuation">,</span> <span class="literal">0</span><span class="punctuation">,</span> <span class="literal">100</span><span class="punctuation">,</span> <span class="literal">100</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> Circle<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>id<span class="punctuation">,</span> x<span class="punctuation">,</span> y<span class="punctuation">,</span> width<span class="punctuation">,</span> height<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="ellipsis">&hellip;</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="mark">Circle<span class="punctuation">.</span>defaultCircle</span><span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="keyword">new</span> Circle<span class="punctuation">(</span><span class="literal">"default"</span><span class="punctuation">,</span> <span class="literal">0</span><span class="punctuation">,</span> <span class="literal">0</span><span class="punctuation">,</span> <span class="literal">100</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> defRectangle<span class="punctuation"> = </span><span class="mark">Rectangle<span class="punctuation">.</span>defaultRectangle<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="semi">;</span>
<span class="keyword">var</span> defCircle   <span class="punctuation"> = </span><span class="mark">Circle<span class="punctuation">.</span>defaultCircle<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="GetterSetter" class="showcase showcase_GetterSetter">    <div class="title">Classes</div>
    <div class="subtitle">Getter/Setter</div>
    <div class="desc">Getter/Setter also directly within classes (and not just within object
initializers, as it is possible since ECMAScript 5.1).</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">class</span> Rectangle <span class="punctuation">{</span>
    constructor <span class="punctuation">(</span>width<span class="punctuation">,</span> height<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">this</span><span class="punctuation">.</span>_width <span class="punctuation"> = </span>width<span class="semi">;</span>
        <span class="keyword">this</span><span class="punctuation">.</span>_height<span class="punctuation"> = </span>height<span class="semi">;</span>
    <span class="punctuation">}</span>
    <span class="mark">set</span> width  <span class="punctuation">(</span>width<span class="punctuation">)</span>  <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_width<span class="punctuation"> = </span>width<span class="semi">;</span>               <span class="punctuation">}</span>
    <span class="mark">get</span> width  <span class="punctuation">(</span><span class="punctuation">)</span>       <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_width<span class="semi">;</span>                <span class="punctuation">}</span>
    <span class="mark">set</span> height <span class="punctuation">(</span>height<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_height<span class="punctuation"> = </span>height<span class="semi">;</span>             <span class="punctuation">}</span>
    <span class="mark">get</span> height <span class="punctuation">(</span><span class="punctuation">)</span>       <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_height<span class="semi">;</span>               <span class="punctuation">}</span>
    <span class="mark">get</span> area   <span class="punctuation">(</span><span class="punctuation">)</span>       <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_width <span class="punctuation">*</span> <span class="keyword">this</span><span class="punctuation">.</span>_height<span class="semi">;</span> <span class="punctuation">}</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> r<span class="punctuation"> = </span><span class="keyword">new</span> Rectangle<span class="punctuation">(</span><span class="literal">50</span><span class="punctuation">,</span> <span class="literal">20</span><span class="punctuation">)</span><span class="semi">;</span>
r<span class="punctuation">.</span>area <span class="punctuation">===</span> <span class="literal">1000</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> Rectangle<span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>width<span class="punctuation">,</span> height<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">this</span><span class="punctuation">.</span>_width <span class="punctuation"> = </span>width<span class="semi">;</span>
    <span class="keyword">this</span><span class="punctuation">.</span>_height<span class="punctuation"> = </span>height<span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
Rectangle<span class="mark"><span class="punctuation">.</span>prototype</span><span class="punctuation"> = </span><span class="punctuation">{</span>
    <span class="mark">set</span> width  <span class="punctuation">(</span>width<span class="punctuation">)</span>  <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_width<span class="punctuation"> = </span>width<span class="semi">;</span>               <span class="punctuation">}</span><span class="mark"><span class="punctuation">,</span></span>
    <span class="mark">get</span> width  <span class="punctuation">(</span><span class="punctuation">)</span>       <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_width<span class="semi">;</span>                <span class="punctuation">}</span><span class="mark"><span class="punctuation">,</span></span>
    <span class="mark">set</span> height <span class="punctuation">(</span>height<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_height<span class="punctuation"> = </span>height<span class="semi">;</span>             <span class="punctuation">}</span><span class="mark"><span class="punctuation">,</span></span>
    <span class="mark">get</span> height <span class="punctuation">(</span><span class="punctuation">)</span>       <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_height<span class="semi">;</span>               <span class="punctuation">}</span><span class="mark"><span class="punctuation">,</span></span>
    <span class="mark">get</span> area   <span class="punctuation">(</span><span class="punctuation">)</span>       <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_width <span class="punctuation">*</span> <span class="keyword">this</span><span class="punctuation">.</span>_height<span class="semi">;</span> <span class="punctuation">}</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> r<span class="punctuation"> = </span><span class="keyword">new</span> Rectangle<span class="punctuation">(</span><span class="literal">50</span><span class="punctuation">,</span> <span class="literal">20</span><span class="punctuation">)</span><span class="semi">;</span>
r<span class="punctuation">.</span>area <span class="punctuation">===</span> <span class="literal">1000</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="SymbolType" class="showcase showcase_SymbolType">    <div class="title">Symbol Type</div>
    <div class="subtitle">Symbol Type</div>
    <div class="desc">Unique and immutable data type to be used as an identifier for object properties.
Symbol can have an optional description, but for debugging purposes only.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">Symbol<span class="punctuation">(</span><span class="literal">"foo"</span><span class="punctuation">)</span> <span class="mark">!==</span> Symbol<span class="punctuation">(</span><span class="literal">"foo"</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="keyword">const</span> foo<span class="punctuation"> = </span>Symbol<span class="punctuation">(</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="keyword">const</span> bar<span class="punctuation"> = </span>Symbol<span class="punctuation">(</span><span class="punctuation">)</span><span class="semi">;</span>
typeof foo <span class="punctuation">===</span> <span class="mark"><span class="literal">"symbol"</span></span><span class="semi">;</span>
typeof bar <span class="punctuation">===</span> <span class="mark"><span class="literal">"symbol"</span></span><span class="semi">;</span>
<span class="keyword">let</span> obj<span class="punctuation"> = </span><span class="punctuation">{</span><span class="punctuation">}</span><span class="semi">;</span>
obj<span class="punctuation">[</span>foo<span class="punctuation">]</span><span class="punctuation"> = </span><span class="literal">"foo"</span><span class="semi">;</span>
obj<span class="punctuation">[</span>bar<span class="punctuation">]</span><span class="punctuation"> = </span><span class="literal">"bar"</span><span class="semi">;</span>
JSON<span class="punctuation">.</span>stringify<span class="punctuation">(</span>obj<span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">{</span><span class="punctuation">}</span></span>
Object<span class="punctuation">.</span>keys<span class="punctuation">(</span>obj<span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span><span class="punctuation">]</span></span>
Object<span class="punctuation">.</span>getOwnPropertyNames<span class="punctuation">(</span>obj<span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span><span class="punctuation">]</span></span>
Object<span class="punctuation">.</span><span class="mark">getOwnPropertySymbols</span><span class="punctuation">(</span>obj<span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span> foo<span class="punctuation">,</span> bar <span class="punctuation">]</span></span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="GlobalSymbols" class="showcase showcase_GlobalSymbols">    <div class="title">Symbol Type</div>
    <div class="subtitle">Global Symbols</div>
    <div class="desc">Global symbols, indexed through unique keys.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">Symbol<span class="punctuation">.</span><span class="keyword">for</span><span class="punctuation">(</span><span class="literal">"app<span class="punctuation">.</span>foo"</span><span class="punctuation">)</span> <span class="mark"><span class="punctuation">===</span></span> Symbol<span class="punctuation">.</span><span class="keyword">for</span><span class="punctuation">(</span><span class="literal">"app<span class="punctuation">.</span>foo"</span><span class="punctuation">)</span>
<span class="keyword">const</span> foo<span class="punctuation"> = </span>Symbol<span class="punctuation">.</span><span class="keyword">for</span><span class="punctuation">(</span><span class="literal">"app<span class="punctuation">.</span>foo"</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="keyword">const</span> bar<span class="punctuation"> = </span>Symbol<span class="punctuation">.</span><span class="keyword">for</span><span class="punctuation">(</span><span class="literal">"app<span class="punctuation">.</span>bar"</span><span class="punctuation">)</span><span class="semi">;</span>
Symbol<span class="punctuation">.</span>keyFor<span class="punctuation">(</span>foo<span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">"app<span class="punctuation">.</span>foo"</span><span class="semi">;</span>
Symbol<span class="punctuation">.</span>keyFor<span class="punctuation">(</span>bar<span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">"app<span class="punctuation">.</span>bar"</span><span class="semi">;</span>
typeof foo <span class="punctuation">===</span> <span class="mark"><span class="literal">"symbol"</span></span><span class="semi">;</span>
typeof bar <span class="punctuation">===</span> <span class="mark"><span class="literal">"symbol"</span></span><span class="semi">;</span>
<span class="keyword">let</span> obj<span class="punctuation"> = </span><span class="punctuation">{</span><span class="punctuation">}</span><span class="semi">;</span>
obj<span class="punctuation">[</span>foo<span class="punctuation">]</span><span class="punctuation"> = </span><span class="literal">"foo"</span><span class="semi">;</span>
obj<span class="punctuation">[</span>bar<span class="punctuation">]</span><span class="punctuation"> = </span><span class="literal">"bar"</span><span class="semi">;</span>
JSON<span class="punctuation">.</span>stringify<span class="punctuation">(</span>obj<span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">{</span><span class="punctuation">}</span></span>
Object<span class="punctuation">.</span>keys<span class="punctuation">(</span>obj<span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span><span class="punctuation">]</span></span>
Object<span class="punctuation">.</span>getOwnPropertyNames<span class="punctuation">(</span>obj<span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span><span class="punctuation">]</span></span>
Object<span class="punctuation">.</span><span class="mark">getOwnPropertySymbols</span><span class="punctuation">(</span>obj<span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span> foo<span class="punctuation">,</span> bar <span class="punctuation">]</span></span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="IteratorForOfOperator" class="showcase showcase_IteratorForOfOperator">    <div class="title">Iterators</div>
    <div class="subtitle">Iterator & For-Of Operator</div>
    <div class="desc">Support "iterable" protocol to allow objects to customize their
iteration behaviour. Additionally, support "iterator" protocol to produce
sequence of values (either finite or infinite). Finally, provide
convenient <code>of</code> operator to iterate over all values of an iterable object.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">let</span> fibonacci<span class="punctuation"> = </span><span class="punctuation">{</span>
    <span class="mark"><span class="punctuation">[</span>Symbol<span class="punctuation">.</span>iterator<span class="punctuation">]</span><span class="punctuation">(</span><span class="punctuation">)</span></span> <span class="punctuation">{</span>
        <span class="keyword">let</span> pre<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">,</span> cur<span class="punctuation"> = </span><span class="literal">1</span><span class="semi">;</span>
        <span class="keyword">return</span> <span class="punctuation">{</span>
           <span class="mark">next <span class="punctuation">(</span><span class="punctuation">)</span></span> <span class="punctuation">{</span>
               <span class="punctuation">[</span> pre<span class="punctuation">,</span> cur <span class="punctuation">]</span><span class="punctuation"> = </span><span class="punctuation">[</span> cur<span class="punctuation">,</span> pre <span class="punctuation">+</span> cur <span class="punctuation">]</span><span class="semi">;</span>
               <span class="keyword">return</span> <span class="mark"><span class="punctuation">{</span> done: false<span class="punctuation">,</span> value: cur <span class="punctuation">}</span></span><span class="semi">;</span>
           <span class="punctuation">}</span>
        <span class="punctuation">}</span><span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>

<span class="keyword">for</span> <span class="punctuation">(</span><span class="keyword">let</span> n <span class="mark"><span class="keyword">of</span></span> fibonacci<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">if</span> <span class="punctuation">(</span>n <span class="punctuation">&gt;</span> <span class="literal">1000</span><span class="punctuation">)</span>
        break<span class="semi">;</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>n<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> fibonacci<span class="punctuation"> = </span><span class="punctuation">{</span>
    <span class="mark">next:</span> <span class="punctuation">(</span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">var</span> pre<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">,</span> cur<span class="punctuation"> = </span><span class="literal">1</span><span class="semi">;</span>
        <span class="keyword">return</span> <span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
            tmp<span class="punctuation"> = </span>pre<span class="semi">;</span>
            pre<span class="punctuation"> = </span>cur<span class="semi">;</span>
            cur <span class="punctuation">+</span>= tmp<span class="semi">;</span>
            <span class="keyword">return</span> cur<span class="semi">;</span>
        <span class="punctuation">}</span><span class="semi">;</span>
    <span class="punctuation">}</span><span class="punctuation">)</span><span class="punctuation">(</span><span class="punctuation">)</span>
<span class="punctuation">}</span><span class="semi">;</span>

<span class="keyword">var</span> n<span class="semi">;</span>
<span class="keyword">for</span> <span class="punctuation">(</span><span class="punctuation">;</span><span class="punctuation">;</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    n<span class="punctuation"> = </span>fibonacci<span class="mark"><span class="punctuation">.</span>next<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="semi">;</span>
    <span class="keyword">if</span> <span class="punctuation">(</span>n <span class="punctuation">&gt;</span> <span class="literal">1000</span><span class="punctuation">)</span>
        break<span class="semi">;</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>n<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="GeneratorFunctionIteratorProtocol" class="showcase showcase_GeneratorFunctionIteratorProtocol">    <div class="title">Generators</div>
    <div class="subtitle">Generator Function, Iterator Protocol</div>
    <div class="desc">Support for generators, a special case of Iterators containing a
generator function, where the control flow can be paused and resumed, in
order to produce sequence of values (either finite or infinite).</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">let</span> fibonacci<span class="punctuation"> = </span><span class="punctuation">{</span>
    <span class="mark"><span class="punctuation">*</span><span class="punctuation">[</span>Symbol<span class="punctuation">.</span>iterator<span class="punctuation">]</span><span class="punctuation">(</span><span class="punctuation">)</span></span> <span class="punctuation">{</span>
        <span class="keyword">let</span> pre<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">,</span> cur<span class="punctuation"> = </span><span class="literal">1</span><span class="semi">;</span>
        <span class="mark"><span class="keyword">for</span> <span class="punctuation">(</span><span class="punctuation">;</span><span class="punctuation">;</span><span class="punctuation">)</span></span> <span class="punctuation">{</span>
            <span class="punctuation">[</span> pre<span class="punctuation">,</span> cur <span class="punctuation">]</span><span class="punctuation"> = </span><span class="punctuation">[</span> cur<span class="punctuation">,</span> pre <span class="punctuation">+</span> cur <span class="punctuation">]</span><span class="semi">;</span>
            <span class="mark">yield cur</span><span class="semi">;</span>
        <span class="punctuation">}</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>

<span class="keyword">for</span> <span class="punctuation">(</span><span class="mark"><span class="keyword">let</span> n <span class="keyword">of</span> fibonacci</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">if</span> <span class="punctuation">(</span>n <span class="punctuation">&gt;</span> <span class="literal">1000</span><span class="punctuation">)</span>
        break<span class="semi">;</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>n<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> fibonacci<span class="punctuation"> = </span><span class="punctuation">{</span>
    next: <span class="punctuation">(</span><span class="mark"><span class="keyword">function</span></span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">var</span> pre<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">,</span> cur<span class="punctuation"> = </span><span class="literal">1</span><span class="semi">;</span>
        <span class="keyword">return</span> <span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
            tmp<span class="punctuation"> = </span>pre<span class="semi">;</span>
            pre<span class="punctuation"> = </span>cur<span class="semi">;</span>
            cur <span class="punctuation">+</span>= tmp<span class="semi">;</span>
            <span class="keyword">return</span> cur<span class="semi">;</span>
        <span class="punctuation">}</span><span class="semi">;</span>
    <span class="punctuation">}</span><span class="punctuation">)</span><span class="punctuation">(</span><span class="punctuation">)</span>
<span class="punctuation">}</span><span class="semi">;</span>

<span class="keyword">var</span> n<span class="semi">;</span>
<span class="keyword">for</span> <span class="punctuation">(</span><span class="punctuation">;</span><span class="punctuation">;</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    n<span class="punctuation"> = </span>fibonacci<span class="mark"><span class="punctuation">.</span>next<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="semi">;</span>
    <span class="keyword">if</span> <span class="punctuation">(</span>n <span class="punctuation">&gt;</span> <span class="literal">1000</span><span class="punctuation">)</span>
        break<span class="semi">;</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>n<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="GeneratorFunctionDirectUse" class="showcase showcase_GeneratorFunctionDirectUse">    <div class="title">Generators</div>
    <div class="subtitle">Generator Function, Direct Use</div>
    <div class="desc">Support for generator functions, a special variant of functions where
the control flow can be paused and resumed, in order to produce sequence
of values (either finite or infinite).</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="mark"><span class="keyword">function</span><span class="punctuation">*</span></span> range <span class="punctuation">(</span>start<span class="punctuation">,</span> end<span class="punctuation">,</span> step<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">while</span> <span class="punctuation">(</span>start <span class="punctuation">&lt;</span> end<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="mark">yield</span> start<span class="semi">;</span>
        start <span class="punctuation">+</span>= step<span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>

<span class="keyword">for</span> <span class="punctuation">(</span><span class="keyword">let</span> i <span class="mark"><span class="keyword">of</span></span> range<span class="punctuation">(</span><span class="literal">0</span><span class="punctuation">,</span> <span class="literal">10</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">)</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>i<span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="literal">0</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">,</span> <span class="literal">4</span><span class="punctuation">,</span> <span class="literal">6</span><span class="punctuation">,</span> <span class="literal">8</span></span>
<span class="punctuation">}</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="mark"><span class="keyword">function</span></span> range <span class="punctuation">(</span>start<span class="punctuation">,</span> end<span class="punctuation">,</span> step<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark"><span class="keyword">var</span> list<span class="punctuation"> = </span><span class="punctuation">[</span><span class="punctuation">]</span></span><span class="semi">;</span>
    <span class="keyword">while</span> <span class="punctuation">(</span>start <span class="punctuation">&lt;</span> end<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="mark">list<span class="punctuation">.</span>push<span class="punctuation">(</span>start<span class="punctuation">)</span></span><span class="semi">;</span>
        start <span class="punctuation">+</span>= step<span class="semi">;</span>
    <span class="punctuation">}</span>
    <span class="mark"><span class="keyword">return</span> list</span><span class="semi">;</span>
<span class="punctuation">}</span>

<span class="mark"><span class="keyword">var</span> r<span class="punctuation"> = </span>range<span class="punctuation">(</span><span class="literal">0</span><span class="punctuation">,</span> <span class="literal">10</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">)</span></span><span class="semi">;</span>
<span class="keyword">for</span> <span class="punctuation">(</span><span class="mark"><span class="keyword">var</span> i<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">;</span> i <span class="punctuation">&lt;</span> r<span class="punctuation">.</span>length<span class="punctuation">;</span> i<span class="punctuation">+</span><span class="punctuation">+</span></span><span class="punctuation">)</span> <span class="punctuation">{</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="mark">r<span class="punctuation">[</span>i<span class="punctuation">]</span></span><span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="literal">0</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">,</span> <span class="literal">4</span><span class="punctuation">,</span> <span class="literal">6</span><span class="punctuation">,</span> <span class="literal">8</span></span>
<span class="punctuation">}</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="GeneratorMatching" class="showcase showcase_GeneratorMatching">    <div class="title">Generators</div>
    <div class="subtitle">Generator Matching</div>
    <div class="desc">Support for generator functions, i.e., functions where the control flow
can be paused and resumed, in order to produce and spread sequence of
values (either finite or infinite).</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">let</span> fibonacci<span class="punctuation"> = </span><span class="mark"><span class="keyword">function</span><span class="punctuation">*</span></span> <span class="punctuation">(</span>numbers<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">let</span> pre<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">,</span> cur<span class="punctuation"> = </span><span class="literal">1</span><span class="semi">;</span>
    <span class="keyword">while</span> <span class="punctuation">(</span>numbers<span class="punctuation">-</span><span class="punctuation">-</span> <span class="punctuation">&gt;</span> <span class="literal">0</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="punctuation">[</span> pre<span class="punctuation">,</span> cur <span class="punctuation">]</span><span class="punctuation"> = </span><span class="punctuation">[</span> cur<span class="punctuation">,</span> pre <span class="punctuation">+</span> cur <span class="punctuation">]</span><span class="semi">;</span>
        <span class="mark">yield cur</span><span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span><span class="semi">;</span>

<span class="keyword">for</span> <span class="punctuation">(</span><span class="mark"><span class="keyword">let</span> n <span class="keyword">of</span> fibonacci<span class="punctuation">(</span><span class="literal">1000</span><span class="punctuation">)</span></span><span class="punctuation">)</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>n<span class="punctuation">)</span><span class="semi">;</span>

<span class="keyword">let</span> numbers<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="mark"><span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>fibonacci<span class="punctuation">(</span><span class="literal">1000</span><span class="punctuation">)</span></span> <span class="punctuation">]</span><span class="semi">;</span>

<span class="keyword">let</span> <span class="punctuation">[</span> n<span class="literal">1</span><span class="punctuation">,</span> n<span class="literal">2</span><span class="punctuation">,</span> n<span class="literal">3</span><span class="punctuation">,</span> <span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>others <span class="punctuation">]</span><span class="punctuation"> = </span><span class="mark">fibonacci<span class="punctuation">(</span><span class="literal">1000</span><span class="punctuation">)</span></span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="GeneratorControlFlow" class="showcase showcase_GeneratorControlFlow">    <div class="title">Generators</div>
    <div class="subtitle">Generator Control-Flow</div>
    <div class="desc">Support for generators, a special case of Iterators where the control
flow can be paused and resumed, in order to support asynchronous
programming in the style of "co-routines" in combination with Promises (see below).
[Notice: the generic <code>async</code> function usually is provided by a reusable library
and given here just for better understanding. See
<a href="https://github.com/tj/co">co</a> or
<a href="https://github.com/petkaantonov/bluebird/blob/master/API.md#promisecoroutinegeneratorfunction-generatorfunction---function">Bluebird</a>'s <code>coroutine</code> in practice.]</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  generic asynchronous control<span class="punctuation">-</span>flow driver</span>
<span class="keyword">function</span> <span class="mark">async</span> <span class="punctuation">(</span>proc<span class="punctuation">,</span> <span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>params<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">let</span> <span class="mark">iterator</span><span class="punctuation"> = </span><span class="mark">proc<span class="punctuation">(</span><span class="punctuation">.</span><span class="punctuation">.</span><span class="punctuation">.</span>params<span class="punctuation">)</span></span><span class="semi">;</span>
    <span class="keyword">return</span> <span class="keyword">new</span> Promise<span class="punctuation">(</span><span class="punctuation">(</span>resolve<span class="punctuation">,</span> reject<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
        <span class="keyword">let</span> loop<span class="punctuation"> = </span><span class="punctuation">(</span>value<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
            <span class="keyword">let</span> result<span class="semi">;</span>
            try <span class="punctuation">{</span>
                result<span class="punctuation"> = </span><span class="mark">iterator<span class="punctuation">.</span>next</span><span class="punctuation">(</span>value<span class="punctuation">)</span><span class="semi">;</span>
            <span class="punctuation">}</span>
            catch <span class="punctuation">(</span>err<span class="punctuation">)</span> <span class="punctuation">{</span>
                reject<span class="punctuation">(</span>err<span class="punctuation">)</span><span class="semi">;</span>
            <span class="punctuation">}</span>
            <span class="keyword">if</span> <span class="punctuation">(</span>result<span class="punctuation">.</span>done<span class="punctuation">)</span>
                resolve<span class="punctuation">(</span>result<span class="punctuation">.</span>value<span class="punctuation">)</span><span class="semi">;</span>
            else <span class="keyword">if</span> <span class="punctuation">(</span>   typeof result<span class="punctuation">.</span>value      <span class="punctuation">===</span> <span class="literal">"object"</span>
                     <span class="punctuation"><span class="punctuation">&amp;</span></span><span class="punctuation"><span class="punctuation">&amp;</span></span> typeof result<span class="punctuation">.</span>value<span class="punctuation">.</span>then <span class="punctuation">===</span> <span class="literal">"<span class="keyword">function</span>"</span><span class="punctuation">)</span>
                result<span class="punctuation">.</span>value<span class="punctuation">.</span>then<span class="punctuation">(</span><span class="punctuation">(</span>value<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
                    loop<span class="punctuation">(</span>value<span class="punctuation">)</span><span class="semi">;</span>
                <span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">(</span>err<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
                    reject<span class="punctuation">(</span>err<span class="punctuation">)</span><span class="semi">;</span>
                <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
            else
                loop<span class="punctuation">(</span>result<span class="punctuation">.</span>value<span class="punctuation">)</span><span class="semi">;</span>
        <span class="punctuation">}</span>
        loop<span class="punctuation">(</span><span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span>
<span class="comment">
//  application<span class="punctuation">-</span>specific asynchronous builder</span>
<span class="keyword">function</span> makeAsync <span class="punctuation">(</span>text<span class="punctuation">,</span> after<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="keyword">new</span> Promise<span class="punctuation">(</span><span class="punctuation">(</span>resolve<span class="punctuation">,</span> reject<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
        setTimeout<span class="punctuation">(</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">=&gt;</span> resolve<span class="punctuation">(</span>text<span class="punctuation">)</span><span class="punctuation">,</span> after<span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span>
<span class="comment">
//  application<span class="punctuation">-</span>specific asynchronous procedure</span>
<span class="mark">async</span><span class="punctuation">(</span><span class="mark"><span class="keyword">function</span><span class="punctuation">*</span></span> <span class="punctuation">(</span>greeting<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">let</span> foo<span class="punctuation"> = </span><span class="mark">yield</span> makeAsync<span class="punctuation">(</span><span class="literal">"foo"</span><span class="punctuation">,</span> <span class="literal">300</span><span class="punctuation">)</span>
    <span class="keyword">let</span> bar<span class="punctuation"> = </span><span class="mark">yield</span> makeAsync<span class="punctuation">(</span><span class="literal">"bar"</span><span class="punctuation">,</span> <span class="literal">200</span><span class="punctuation">)</span>
    <span class="keyword">let</span> baz<span class="punctuation"> = </span><span class="mark">yield</span> makeAsync<span class="punctuation">(</span><span class="literal">"baz"</span><span class="punctuation">,</span> <span class="literal">100</span><span class="punctuation">)</span>
    <span class="keyword">return</span> <span class="literal">`$<span class="punctuation">{</span>greeting<span class="punctuation">}</span> $<span class="punctuation">{</span>foo<span class="punctuation">}</span> $<span class="punctuation">{</span>bar<span class="punctuation">}</span> $<span class="punctuation">{</span>baz<span class="punctuation">}</span>`</span>
<span class="punctuation">}</span><span class="punctuation">,</span> <span class="literal">"Hello"</span><span class="punctuation">)</span><span class="punctuation">.</span>then<span class="punctuation">(</span><span class="punctuation">(</span>msg<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">"RESULT:"</span><span class="punctuation">,</span> msg<span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="literal">"Hello foo bar baz"</span></span>
<span class="punctuation">}</span><span class="punctuation">)</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="GeneratorMethods" class="showcase showcase_GeneratorMethods">    <div class="title">Generators</div>
    <div class="subtitle">Generator Methods</div>
    <div class="desc">Support for generator methods, i.e., methods in classes and on objects,
based on generator functions.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">class</span> Clz <span class="punctuation">{</span>
    <span class="mark"><span class="punctuation">*</span> bar <span class="punctuation">(</span><span class="punctuation">)</span></span> <span class="punctuation">{</span>
        <span class="ellipsis">&hellip;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">let</span> Obj<span class="punctuation"> = </span><span class="punctuation">{</span>
    <span class="mark"><span class="punctuation">*</span> foo <span class="punctuation">(</span><span class="punctuation">)</span></span> <span class="punctuation">{</span>
        <span class="ellipsis">&hellip;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="SetDataStructure" class="showcase showcase_SetDataStructure">    <div class="title">Map/Set & WeakMap/WeakSet</div>
    <div class="subtitle">Set Data-Structure</div>
    <div class="desc">Cleaner data-structure for common algorithms based on sets.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">let</span> s<span class="punctuation"> = </span><span class="mark"><span class="keyword">new</span> Set<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="semi">;</span>
s<span class="punctuation">.</span><span class="mark">add<span class="punctuation">(</span><span class="literal">"hello"</span><span class="punctuation">)</span></span><span class="punctuation">.</span><span class="mark">add<span class="punctuation">(</span><span class="literal">"goodbye"</span><span class="punctuation">)</span></span><span class="punctuation">.</span><span class="mark">add<span class="punctuation">(</span><span class="literal">"hello"</span><span class="punctuation">)</span></span><span class="semi">;</span>
s<span class="punctuation">.</span><span class="mark">size</span> <span class="punctuation">===</span> <span class="literal">2</span><span class="semi">;</span>
s<span class="punctuation">.</span><span class="mark">has<span class="punctuation">(</span><span class="literal">"hello"</span><span class="punctuation">)</span></span> <span class="punctuation">===</span> true<span class="semi">;</span>
<span class="keyword">for</span> <span class="punctuation">(</span><span class="keyword">let</span> key <span class="mark"><span class="keyword">of</span></span> s<span class="punctuation">.</span><span class="mark">values<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="punctuation">)</span><span class="comment"> // insertion order</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>key<span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> s<span class="punctuation"> = </span><span class="mark"><span class="punctuation">{</span><span class="punctuation">}</span></span><span class="semi">;</span>
<span class="mark">s<span class="punctuation">[</span><span class="literal">"hello"</span><span class="punctuation">]</span><span class="punctuation"> = </span>true</span><span class="punctuation">;</span> <span class="mark">s<span class="punctuation">[</span><span class="literal">"goodbye"</span><span class="punctuation">]</span><span class="punctuation"> = </span>true</span><span class="punctuation">;</span> <span class="mark">s<span class="punctuation">[</span><span class="literal">"hello"</span><span class="punctuation">]</span><span class="punctuation"> = </span>true</span><span class="semi">;</span>
<span class="mark">Object<span class="punctuation">.</span>keys<span class="punctuation">(</span>s<span class="punctuation">)</span><span class="punctuation">.</span>length</span> <span class="punctuation">===</span> <span class="literal">2</span><span class="semi">;</span>
<span class="mark">s<span class="punctuation">[</span><span class="literal">"hello"</span><span class="punctuation">]</span></span> <span class="punctuation">===</span> true<span class="semi">;</span>
<span class="keyword">for</span> <span class="punctuation">(</span><span class="keyword">var</span> key <span class="mark"><span class="keyword">in</span></span> s<span class="punctuation">)</span><span class="comment"> // arbitrary order</span>
    <span class="keyword">if</span> <span class="punctuation">(</span>s<span class="punctuation">.</span>hasOwnProperty<span class="punctuation">(</span>key<span class="punctuation">)</span><span class="punctuation">)</span>
        console<span class="punctuation">.</span>log<span class="punctuation">(</span>s<span class="punctuation">[</span>key<span class="punctuation">]</span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="MapDataStructure" class="showcase showcase_MapDataStructure">    <div class="title">Map/Set & WeakMap/WeakSet</div>
    <div class="subtitle">Map Data-Structure</div>
    <div class="desc">Cleaner data-structure for common algorithms based on maps.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">let</span> m<span class="punctuation"> = </span><span class="mark"><span class="keyword">new</span> Map<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="semi">;</span>
<span class="keyword">let</span> s<span class="punctuation"> = </span><span class="mark">Symbol<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="semi">;</span>
m<span class="punctuation">.</span><span class="mark">set<span class="punctuation">(</span><span class="literal">"hello"</span><span class="punctuation">,</span> <span class="literal">42</span><span class="punctuation">)</span></span><span class="semi">;</span>
m<span class="punctuation">.</span><span class="mark">set<span class="punctuation">(</span>s<span class="punctuation">,</span> <span class="literal">34</span><span class="punctuation">)</span></span><span class="semi">;</span>
m<span class="punctuation">.</span><span class="mark">get<span class="punctuation">(</span>s<span class="punctuation">)</span></span> <span class="punctuation">===</span> <span class="literal">34</span><span class="semi">;</span>
m<span class="punctuation">.</span><span class="mark">size</span> <span class="punctuation">===</span> <span class="literal">2</span><span class="semi">;</span>
<span class="keyword">for</span> <span class="punctuation">(</span><span class="keyword">let</span> <span class="mark"><span class="punctuation">[</span> key<span class="punctuation">,</span> val <span class="punctuation">]</span> <span class="keyword">of</span> m<span class="punctuation">.</span>entries<span class="punctuation">(</span><span class="punctuation">)</span></span><span class="punctuation">)</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span>key <span class="punctuation">+</span> <span class="literal">"<span class="punctuation"> = </span>"</span> <span class="punctuation">+</span> val<span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> m<span class="punctuation"> = </span><span class="mark"><span class="punctuation">{</span><span class="punctuation">}</span></span><span class="semi">;</span><span class="comment">
// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span>
<span class="mark">m<span class="punctuation">[</span><span class="literal">"hello"</span><span class="punctuation">]</span><span class="punctuation"> = </span><span class="literal">42</span></span><span class="semi">;</span><span class="comment">
// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span><span class="comment">
// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span>
<span class="mark">Object<span class="punctuation">.</span>keys<span class="punctuation">(</span>m<span class="punctuation">)</span><span class="punctuation">.</span>length</span> <span class="punctuation">===</span> <span class="literal">2</span><span class="semi">;</span>
<span class="keyword">for</span> <span class="punctuation">(</span>key <span class="mark"><span class="keyword">in</span></span> m<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">if</span> <span class="punctuation">(</span>m<span class="punctuation">.</span>hasOwnProperty<span class="punctuation">(</span>key<span class="punctuation">)</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">var</span> <span class="mark">val<span class="punctuation"> = </span>m<span class="punctuation">[</span>key<span class="punctuation">]</span></span><span class="semi">;</span>
        console<span class="punctuation">.</span>log<span class="punctuation">(</span>key <span class="punctuation">+</span> <span class="literal">"<span class="punctuation"> = </span>"</span> <span class="punctuation">+</span> val<span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="WeakLinkDataStructures" class="showcase showcase_WeakLinkDataStructures">    <div class="title">Map/Set & WeakMap/WeakSet</div>
    <div class="subtitle">Weak-Link Data-Structures</div>
    <div class="desc">Memory-leak-free Object-key’d side-by-side data-structures.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">let</span> isMarked    <span class="punctuation"> = </span><span class="keyword">new</span> <span class="mark">WeakSet</span><span class="punctuation">(</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="keyword">let</span> attachedData<span class="punctuation"> = </span><span class="keyword">new</span> <span class="mark">WeakMap</span><span class="punctuation">(</span><span class="punctuation">)</span><span class="semi">;</span>

<span class="keyword">export</span> <span class="keyword">class</span> Node <span class="punctuation">{</span>
    constructor <span class="punctuation">(</span>id<span class="punctuation">)</span>   <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>id<span class="punctuation"> = </span>id<span class="semi">;</span>                  <span class="punctuation">}</span>
    mark        <span class="punctuation">(</span><span class="punctuation">)</span>     <span class="punctuation">{</span> <span class="mark">isMarked<span class="punctuation">.</span>add</span><span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">)</span><span class="semi">;</span>            <span class="punctuation">}</span>
    unmark      <span class="punctuation">(</span><span class="punctuation">)</span>     <span class="punctuation">{</span> <span class="mark">isMarked<span class="punctuation">.</span>delete</span><span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">)</span><span class="semi">;</span>         <span class="punctuation">}</span>
    marked      <span class="punctuation">(</span><span class="punctuation">)</span>     <span class="punctuation">{</span> <span class="keyword">return</span> <span class="mark">isMarked<span class="punctuation">.</span>has</span><span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">)</span><span class="semi">;</span>     <span class="punctuation">}</span>
    set data    <span class="punctuation">(</span>data<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="mark">attachedData<span class="punctuation">.</span>set</span><span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">,</span> data<span class="punctuation">)</span><span class="semi">;</span>  <span class="punctuation">}</span>
    get data    <span class="punctuation">(</span><span class="punctuation">)</span>     <span class="punctuation">{</span> <span class="keyword">return</span> <span class="mark">attachedData<span class="punctuation">.</span>get</span><span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">)</span><span class="semi">;</span> <span class="punctuation">}</span>
<span class="punctuation">}</span>

<span class="keyword">let</span> foo<span class="punctuation"> = </span><span class="keyword">new</span> Node<span class="punctuation">(</span><span class="literal">"foo"</span><span class="punctuation">)</span><span class="semi">;</span>

JSON<span class="punctuation">.</span>stringify<span class="punctuation">(</span>foo<span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="literal">'<span class="punctuation">{</span>"id":"foo"<span class="punctuation">}</span>'</span></span><span class="semi">;</span>
foo<span class="punctuation">.</span>mark<span class="punctuation">(</span><span class="punctuation">)</span><span class="semi">;</span>
foo<span class="punctuation">.</span>data<span class="punctuation"> = </span><span class="literal">"bar"</span><span class="semi">;</span>
foo<span class="punctuation">.</span>data <span class="punctuation">===</span> <span class="literal">"bar"</span><span class="semi">;</span>
JSON<span class="punctuation">.</span>stringify<span class="punctuation">(</span>foo<span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="literal">'<span class="punctuation">{</span>"id":"foo"<span class="punctuation">}</span>'</span></span><span class="semi">;</span>

isMarked<span class="punctuation">.</span>has<span class="punctuation">(</span>foo<span class="punctuation">)</span>     <span class="punctuation">===</span> <span class="mark">true</span>
attachedData<span class="punctuation">.</span>has<span class="punctuation">(</span>foo<span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark">true</span>
foo <span class="mark">=</span> null  /<span class="punctuation">*</span> remove only reference to foo <span class="punctuation">*</span>/
attachedData<span class="punctuation">.</span>has<span class="punctuation">(</span>foo<span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark">false</span>
isMarked<span class="punctuation">.</span>has<span class="punctuation">(</span>foo<span class="punctuation">)</span>     <span class="punctuation">===</span> <span class="mark">false</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="TypedArrays" class="showcase showcase_TypedArrays">    <div class="title">Typed Arrays</div>
    <div class="subtitle">Typed Arrays</div>
    <div class="desc">Support for arbitrary byte-based data structures to implement network
protocols, cryptography algorithms, file format manipulations, etc.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  ES<span class="literal">6</span> <span class="keyword">class</span> equivalent to the following C structure:</span><span class="comment">
//  struct Example <span class="punctuation">{</span> unsigned long id<span class="punctuation">;</span> char username<span class="punctuation">[</span><span class="literal">16</span><span class="punctuation">]</span><span class="punctuation">;</span> float amountDue<span class="semi">;</span> <span class="punctuation">}</span><span class="semi">;</span></span>
<span class="keyword">class</span> Example <span class="punctuation">{</span>
    constructor <span class="punctuation">(</span>buffer<span class="punctuation"> = </span><span class="mark"><span class="keyword">new</span> ArrayBuffer<span class="punctuation">(</span><span class="literal">24</span><span class="punctuation">)</span></span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">this</span><span class="punctuation">.</span>buffer<span class="punctuation"> = </span>buffer<span class="semi">;</span>
    <span class="punctuation">}</span>
    set buffer <span class="punctuation">(</span>buffer<span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">this</span><span class="punctuation">.</span>_buffer   <span class="punctuation"> = </span>buffer<span class="semi">;</span>
        <span class="keyword">this</span><span class="punctuation">.</span>_id       <span class="punctuation"> = </span><span class="mark"><span class="keyword">new</span> Uint<span class="literal">32</span>Array <span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">.</span>_buffer<span class="punctuation">,</span>  <span class="literal">0</span><span class="punctuation">,</span>  <span class="literal">1</span><span class="punctuation">)</span></span><span class="semi">;</span>
        <span class="keyword">this</span><span class="punctuation">.</span>_username <span class="punctuation"> = </span><span class="mark"><span class="keyword">new</span> Uint<span class="literal">8</span>Array  <span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">.</span>_buffer<span class="punctuation">,</span>  <span class="literal">4</span><span class="punctuation">,</span> <span class="literal">16</span><span class="punctuation">)</span></span><span class="semi">;</span>
        <span class="keyword">this</span><span class="punctuation">.</span>_amountDue<span class="punctuation"> = </span><span class="mark"><span class="keyword">new</span> Float<span class="literal">32</span>Array<span class="punctuation">(</span><span class="keyword">this</span><span class="punctuation">.</span>_buffer<span class="punctuation">,</span> <span class="literal">20</span><span class="punctuation">,</span>  <span class="literal">1</span><span class="punctuation">)</span></span><span class="semi">;</span>
    <span class="punctuation">}</span>
    get buffer <span class="punctuation">(</span><span class="punctuation">)</span>     <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_buffer<span class="semi">;</span>       <span class="punctuation">}</span>
    set id <span class="punctuation">(</span>v<span class="punctuation">)</span>        <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_id<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="punctuation"> = </span>v<span class="semi">;</span>           <span class="punctuation">}</span>
    get id <span class="punctuation">(</span><span class="punctuation">)</span>         <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_id<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="semi">;</span>        <span class="punctuation">}</span>
    set username <span class="punctuation">(</span>v<span class="punctuation">)</span>  <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_username<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="punctuation"> = </span>v<span class="semi">;</span>     <span class="punctuation">}</span>
    get username <span class="punctuation">(</span><span class="punctuation">)</span>   <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_username<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="semi">;</span>  <span class="punctuation">}</span>
    set amountDue <span class="punctuation">(</span>v<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">this</span><span class="punctuation">.</span>_amountDue<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="punctuation"> = </span>v<span class="semi">;</span>    <span class="punctuation">}</span>
    get amountDue <span class="punctuation">(</span><span class="punctuation">)</span>  <span class="punctuation">{</span> <span class="keyword">return</span> <span class="keyword">this</span><span class="punctuation">.</span>_amountDue<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="semi">;</span> <span class="punctuation">}</span>
<span class="punctuation">}</span>

<span class="keyword">let</span> example<span class="punctuation"> = </span><span class="keyword">new</span> Example<span class="punctuation">(</span><span class="punctuation">)</span>
example<span class="punctuation">.</span><span class="mark">id</span><span class="punctuation"> = </span><span class="literal">7</span>
example<span class="punctuation">.</span><span class="mark">username</span><span class="punctuation"> = </span><span class="literal">"John Doe"</span>
example<span class="punctuation">.</span><span class="mark">amountDue</span><span class="punctuation"> = </span><span class="literal">42</span><span class="punctuation">.</span><span class="literal">0</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">//  no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span><span class="comment">
//  <span class="punctuation">(</span>only an equivalent <span class="keyword">in</span> HTML<span class="literal">5</span><span class="punctuation">)</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ObjectPropertyAssignment" class="showcase showcase_ObjectPropertyAssignment">    <div class="title">New Built-In Methods</div>
    <div class="subtitle">Object Property Assignment</div>
    <div class="desc">New function for assigning enumerable properties of one or more source
objects onto a destination object.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> dest<span class="punctuation"> = </span><span class="punctuation">{</span> quux: <span class="literal">0</span> <span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> src<span class="literal">1</span><span class="punctuation"> = </span><span class="punctuation">{</span> foo: <span class="mark"><span class="literal">1</span></span><span class="punctuation">,</span> bar: <span class="literal">2</span> <span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> src<span class="literal">2</span><span class="punctuation"> = </span><span class="punctuation">{</span> foo: <span class="mark"><span class="literal">3</span></span><span class="punctuation">,</span> baz: <span class="literal">4</span> <span class="punctuation">}</span><span class="semi">;</span>
Object<span class="mark"><span class="punctuation">.</span>assign</span><span class="punctuation">(</span>dest<span class="punctuation">,</span> src<span class="literal">1</span><span class="punctuation">,</span> src<span class="literal">2</span><span class="punctuation">)</span><span class="semi">;</span>
dest<span class="punctuation">.</span>quux <span class="punctuation">===</span> <span class="literal">0</span><span class="semi">;</span>
dest<span class="punctuation">.</span>foo  <span class="punctuation">===</span> <span class="mark"><span class="literal">3</span></span><span class="semi">;</span>
dest<span class="punctuation">.</span>bar  <span class="punctuation">===</span> <span class="literal">2</span><span class="semi">;</span>
dest<span class="punctuation">.</span>baz  <span class="punctuation">===</span> <span class="literal">4</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> dest<span class="punctuation"> = </span><span class="punctuation">{</span> quux: <span class="literal">0</span> <span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> src<span class="literal">1</span><span class="punctuation"> = </span><span class="punctuation">{</span> foo: <span class="mark"><span class="literal">1</span></span><span class="punctuation">,</span> bar: <span class="literal">2</span> <span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> src<span class="literal">2</span><span class="punctuation"> = </span><span class="punctuation">{</span> foo: <span class="mark"><span class="literal">3</span></span><span class="punctuation">,</span> baz: <span class="literal">4</span> <span class="punctuation">}</span><span class="semi">;</span>
Object<span class="mark"><span class="punctuation">.</span>keys<span class="punctuation">(</span>src<span class="literal">1</span><span class="punctuation">)</span><span class="punctuation">.</span>forEach</span><span class="punctuation">(</span><span class="keyword">function</span><span class="punctuation">(</span>k<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark">dest<span class="punctuation">[</span>k<span class="punctuation">]</span><span class="punctuation"> = </span>src<span class="literal">1</span><span class="punctuation">[</span>k<span class="punctuation">]</span></span><span class="semi">;</span>
<span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
Object<span class="mark"><span class="punctuation">.</span>keys<span class="punctuation">(</span>src<span class="literal">2</span><span class="punctuation">)</span><span class="punctuation">.</span>forEach</span><span class="punctuation">(</span><span class="keyword">function</span><span class="punctuation">(</span>k<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="mark">dest<span class="punctuation">[</span>k<span class="punctuation">]</span><span class="punctuation"> = </span>src<span class="literal">2</span><span class="punctuation">[</span>k<span class="punctuation">]</span></span><span class="semi">;</span>
<span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
dest<span class="punctuation">.</span>quux <span class="punctuation">===</span> <span class="literal">0</span><span class="semi">;</span>
dest<span class="punctuation">.</span>foo  <span class="punctuation">===</span> <span class="mark"><span class="literal">3</span></span><span class="semi">;</span>
dest<span class="punctuation">.</span>bar  <span class="punctuation">===</span> <span class="literal">2</span><span class="semi">;</span>
dest<span class="punctuation">.</span>baz  <span class="punctuation">===</span> <span class="literal">4</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="ArrayElementFinding" class="showcase showcase_ArrayElementFinding">    <div class="title">New Built-In Methods</div>
    <div class="subtitle">Array Element Finding</div>
    <div class="desc">New function for finding an element in an array.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="punctuation">[</span> <span class="literal">1</span><span class="punctuation">,</span> <span class="literal">3</span><span class="punctuation">,</span> <span class="literal">4</span><span class="punctuation">,</span> <span class="literal">2</span> <span class="punctuation">]</span><span class="punctuation">.</span><span class="mark">find</span><span class="punctuation">(</span><span class="mark">x <span class="punctuation">=&gt;</span></span> x <span class="punctuation">&gt;</span> <span class="literal">3</span><span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="literal">4</span></span>
<span class="punctuation">[</span> <span class="literal">1</span><span class="punctuation">,</span> <span class="literal">3</span><span class="punctuation">,</span> <span class="literal">4</span><span class="punctuation">,</span> <span class="literal">2</span> <span class="punctuation">]</span><span class="punctuation">.</span><span class="mark">findIndex</span><span class="punctuation">(</span><span class="mark">x <span class="punctuation">=&gt;</span></span> x <span class="punctuation">&gt;</span> <span class="literal">3</span><span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="literal">2</span></span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="punctuation">[</span> <span class="literal">1</span><span class="punctuation">,</span> <span class="literal">3</span><span class="punctuation">,</span> <span class="literal">4</span><span class="punctuation">,</span> <span class="literal">2</span> <span class="punctuation">]</span><span class="punctuation">.</span><span class="mark">filter</span><span class="punctuation">(</span><span class="mark"><span class="keyword">function</span> <span class="punctuation">(</span>x<span class="punctuation">)</span> <span class="punctuation">{</span> <span class="keyword">return</span></span> x <span class="punctuation">&gt;</span> <span class="literal">3</span><span class="semi">;</span> <span class="punctuation">}</span><span class="punctuation">)</span><span class="mark"><span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span></span><span class="semi">;</span><span class="comment"> // <span class="literal">4</span></span><span class="comment">
// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="StringRepeating" class="showcase showcase_StringRepeating">    <div class="title">New Built-In Methods</div>
    <div class="subtitle">String Repeating</div>
    <div class="desc">New string repeating functionality.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="literal">" "</span><span class="punctuation">.</span><span class="mark">repeat</span><span class="punctuation">(</span><span class="literal">4</span> <span class="punctuation">*</span> depth<span class="punctuation">)</span><span class="semi">;</span>
<span class="literal">"foo"</span><span class="punctuation">.</span><span class="mark">repeat</span><span class="punctuation">(</span><span class="literal">3</span><span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="mark">Array</span><span class="punctuation">(</span><span class="punctuation">(</span><span class="literal">4</span> <span class="punctuation">*</span> depth<span class="punctuation">)</span> <span class="punctuation">+</span> <span class="literal">1</span><span class="punctuation">)</span><span class="punctuation">.</span><span class="mark">join</span><span class="punctuation">(</span><span class="literal">" "</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="mark">Array</span><span class="punctuation">(</span><span class="literal">3</span> <span class="punctuation">+</span> <span class="literal">1</span><span class="punctuation">)</span><span class="punctuation">.</span><span class="mark">join</span><span class="punctuation">(</span><span class="literal">"foo"</span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="StringSearching" class="showcase showcase_StringSearching">    <div class="title">New Built-In Methods</div>
    <div class="subtitle">String Searching</div>
    <div class="desc">New specific string functions to search for a sub-string.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="literal">"hello"</span><span class="punctuation">.</span><span class="mark">startsWith</span><span class="punctuation">(</span><span class="literal">"ello"</span><span class="punctuation">,</span> <span class="literal">1</span><span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // true</span>
<span class="literal">"hello"</span><span class="punctuation">.</span><span class="mark">endsWith</span><span class="punctuation">(</span><span class="literal">"hell"</span><span class="punctuation">,</span> <span class="literal">4</span><span class="punctuation">)</span><span class="semi">;</span>  <span class="comment"> // true</span>
<span class="literal">"hello"</span><span class="punctuation">.</span><span class="mark">includes</span><span class="punctuation">(</span><span class="literal">"ell"</span><span class="punctuation">)</span><span class="semi">;</span>      <span class="comment"> // true</span>
<span class="literal">"hello"</span><span class="punctuation">.</span><span class="mark">includes</span><span class="punctuation">(</span><span class="literal">"ell"</span><span class="punctuation">,</span> <span class="literal">1</span><span class="punctuation">)</span><span class="semi">;</span>   <span class="comment"> // true</span>
<span class="literal">"hello"</span><span class="punctuation">.</span><span class="mark">includes</span><span class="punctuation">(</span><span class="literal">"ell"</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">)</span><span class="semi">;</span>   <span class="comment"> // false</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="literal">"hello"</span><span class="punctuation">.</span><span class="mark">indexOf</span><span class="punctuation">(</span><span class="literal">"ello"</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="literal">1</span><span class="semi">;</span>   <span class="comment"> // true</span>
<span class="literal">"hello"</span><span class="punctuation">.</span><span class="mark">indexOf</span><span class="punctuation">(</span><span class="literal">"hell"</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="punctuation">(</span><span class="literal">4</span> <span class="mark"><span class="punctuation">-</span> <span class="literal">"hell"</span><span class="punctuation">.</span>length</span><span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // true</span>
<span class="literal">"hello"</span><span class="punctuation">.</span><span class="mark">indexOf</span><span class="punctuation">(</span><span class="literal">"ell"</span><span class="punctuation">)</span> !== <span class="punctuation">-</span><span class="literal">1</span><span class="semi">;</span>   <span class="comment"> // true</span>
<span class="literal">"hello"</span><span class="punctuation">.</span><span class="mark">indexOf</span><span class="punctuation">(</span><span class="literal">"ell"</span><span class="punctuation">,</span> <span class="literal">1</span><span class="punctuation">)</span> !== <span class="punctuation">-</span><span class="literal">1</span><span class="semi">;</span><span class="comment"> // true</span>
<span class="literal">"hello"</span><span class="punctuation">.</span><span class="mark">indexOf</span><span class="punctuation">(</span><span class="literal">"ell"</span><span class="punctuation">,</span> <span class="literal">2</span><span class="punctuation">)</span> !== <span class="punctuation">-</span><span class="literal">1</span><span class="semi">;</span><span class="comment"> // false</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="NumberTypeChecking" class="showcase showcase_NumberTypeChecking">    <div class="title">New Built-In Methods</div>
    <div class="subtitle">Number Type Checking</div>
    <div class="desc">New functions for checking for non-numbers and finite numbers.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">Number<span class="punctuation">.</span><span class="mark">isNaN</span><span class="punctuation">(</span><span class="literal">42</span><span class="punctuation">)</span> <span class="punctuation">===</span> false<span class="semi">;</span>
Number<span class="punctuation">.</span><span class="mark">isNaN</span><span class="punctuation">(</span>NaN<span class="punctuation">)</span> <span class="punctuation">===</span> true<span class="semi">;</span>

Number<span class="punctuation">.</span><span class="mark">isFinite</span><span class="punctuation">(</span>Infinity<span class="punctuation">)</span> <span class="punctuation">===</span> false<span class="semi">;</span>
Number<span class="punctuation">.</span><span class="mark">isFinite</span><span class="punctuation">(</span><span class="punctuation">-</span>Infinity<span class="punctuation">)</span> <span class="punctuation">===</span> false<span class="semi">;</span>
Number<span class="punctuation">.</span><span class="mark">isFinite</span><span class="punctuation">(</span>NaN<span class="punctuation">)</span> <span class="punctuation">===</span> false<span class="semi">;</span>
Number<span class="punctuation">.</span><span class="mark">isFinite</span><span class="punctuation">(</span><span class="literal">123</span><span class="punctuation">)</span> <span class="punctuation">===</span> true<span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> <span class="mark">isNaN</span><span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>n<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="mark">n !== n</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">var</span> <span class="mark">isFinite</span><span class="punctuation"> = </span><span class="keyword">function</span> <span class="punctuation">(</span>v<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="mark"><span class="punctuation">(</span>typeof v <span class="punctuation">===</span> <span class="literal">"number"</span> <span class="punctuation"><span class="punctuation">&amp;</span></span><span class="punctuation"><span class="punctuation">&amp;</span></span> !isNaN<span class="punctuation">(</span>v<span class="punctuation">)</span> <span class="punctuation"><span class="punctuation">&amp;</span></span><span class="punctuation"><span class="punctuation">&amp;</span></span> v !== Infinity <span class="punctuation"><span class="punctuation">&amp;</span></span><span class="punctuation"><span class="punctuation">&amp;</span></span> v !== <span class="punctuation">-</span>Infinity<span class="punctuation">)</span></span><span class="semi">;</span>
<span class="punctuation">}</span><span class="semi">;</span>
isNaN<span class="punctuation">(</span><span class="literal">42</span><span class="punctuation">)</span> <span class="punctuation">===</span> false<span class="semi">;</span>
isNaN<span class="punctuation">(</span>NaN<span class="punctuation">)</span> <span class="punctuation">===</span> true<span class="semi">;</span>

isFinite<span class="punctuation">(</span>Infinity<span class="punctuation">)</span> <span class="punctuation">===</span> false<span class="semi">;</span>
isFinite<span class="punctuation">(</span><span class="punctuation">-</span>Infinity<span class="punctuation">)</span> <span class="punctuation">===</span> false<span class="semi">;</span>
isFinite<span class="punctuation">(</span>NaN<span class="punctuation">)</span> <span class="punctuation">===</span> false<span class="semi">;</span>
isFinite<span class="punctuation">(</span><span class="literal">123</span><span class="punctuation">)</span> <span class="punctuation">===</span> true<span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="NumberSafetyChecking" class="showcase showcase_NumberSafetyChecking">    <div class="title">New Built-In Methods</div>
    <div class="subtitle">Number Safety Checking</div>
    <div class="desc">Checking whether an integer number is in the safe range, i.e., it is
correctly represented by JavaScript (where all numbers, including
integer numbers, are technically floating point number).</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">Number<span class="punctuation">.</span><span class="mark">isSafeInteger</span><span class="punctuation">(</span><span class="literal">42</span><span class="punctuation">)</span> <span class="punctuation">===</span> true<span class="semi">;</span>
Number<span class="punctuation">.</span><span class="mark">isSafeInteger</span><span class="punctuation">(</span><span class="literal">9007199254740992</span><span class="punctuation">)</span> <span class="punctuation">===</span> false<span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> isSafeInteger <span class="punctuation">(</span>n<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="punctuation">(</span>
           typeof n <span class="punctuation">===</span> <span class="literal">'number'</span>
        <span class="punctuation"><span class="punctuation">&amp;</span></span><span class="punctuation"><span class="punctuation">&amp;</span></span> Math<span class="punctuation">.</span>round<span class="punctuation">(</span>n<span class="punctuation">)</span> <span class="punctuation">===</span> n
        <span class="punctuation"><span class="punctuation">&amp;</span></span><span class="punctuation"><span class="punctuation">&amp;</span></span> <span class="punctuation">-</span><span class="punctuation">(</span>Math<span class="punctuation">.</span>pow<span class="punctuation">(</span><span class="literal">2</span><span class="punctuation">,</span> <span class="literal">53</span><span class="punctuation">)</span> <span class="punctuation">-</span> <span class="literal">1</span><span class="punctuation">)</span> <span class="punctuation">&lt;</span>= n
        <span class="punctuation"><span class="punctuation">&amp;</span></span><span class="punctuation"><span class="punctuation">&amp;</span></span> n <span class="punctuation">&lt;</span>= <span class="punctuation">(</span>Math<span class="punctuation">.</span>pow<span class="punctuation">(</span><span class="literal">2</span><span class="punctuation">,</span> <span class="literal">53</span><span class="punctuation">)</span> <span class="punctuation">-</span> <span class="literal">1</span><span class="punctuation">)</span>
    <span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span>
<span class="mark">isSafeInteger</span><span class="punctuation">(</span><span class="literal">42</span><span class="punctuation">)</span> <span class="punctuation">===</span> true<span class="semi">;</span>
<span class="mark">isSafeInteger</span><span class="punctuation">(</span><span class="literal">9007199254740992</span><span class="punctuation">)</span> <span class="punctuation">===</span> false<span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="NumberComparison" class="showcase showcase_NumberComparison">    <div class="title">New Built-In Methods</div>
    <div class="subtitle">Number Comparison</div>
    <div class="desc">Availability of a standard Epsilon value for more precise comparison of
floating point numbers.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">0</span><span class="punctuation">.</span><span class="literal">1</span> <span class="punctuation">+</span> <span class="literal">0</span><span class="punctuation">.</span><span class="literal">2</span> <span class="punctuation">===</span> <span class="literal">0</span><span class="punctuation">.</span><span class="literal">3</span><span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // false</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>Math<span class="punctuation">.</span>abs<span class="punctuation">(</span><span class="punctuation">(</span><span class="literal">0</span><span class="punctuation">.</span><span class="literal">1</span> <span class="punctuation">+</span> <span class="literal">0</span><span class="punctuation">.</span><span class="literal">2</span><span class="punctuation">)</span> <span class="punctuation">-</span> <span class="literal">0</span><span class="punctuation">.</span><span class="literal">3</span><span class="punctuation">)</span> <span class="punctuation">&lt;</span> <span class="mark">Number<span class="punctuation">.</span>EPSILON</span><span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // true</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">0</span><span class="punctuation">.</span><span class="literal">1</span> <span class="punctuation">+</span> <span class="literal">0</span><span class="punctuation">.</span><span class="literal">2</span> <span class="punctuation">===</span> <span class="literal">0</span><span class="punctuation">.</span><span class="literal">3</span><span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // false</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>Math<span class="punctuation">.</span>abs<span class="punctuation">(</span><span class="punctuation">(</span><span class="literal">0</span><span class="punctuation">.</span><span class="literal">1</span> <span class="punctuation">+</span> <span class="literal">0</span><span class="punctuation">.</span><span class="literal">2</span><span class="punctuation">)</span> <span class="punctuation">-</span> <span class="literal">0</span><span class="punctuation">.</span><span class="literal">3</span><span class="punctuation">)</span> <span class="punctuation">&lt;</span> <span class="mark"><span class="literal">2</span><span class="punctuation">.</span><span class="literal">220446049250313</span>e<span class="punctuation">-</span><span class="literal">16</span></span><span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // true</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="NumberTruncation" class="showcase showcase_NumberTruncation">    <div class="title">New Built-In Methods</div>
    <div class="subtitle">Number Truncation</div>
    <div class="desc">Truncate a floating point number to its integral part,
completely dropping the fractional part.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="mark">Math<span class="punctuation">.</span>trunc</span><span class="punctuation">(</span><span class="literal">42</span><span class="punctuation">.</span><span class="literal">7</span><span class="punctuation">)</span><span class="punctuation">)</span><span class="comment"> // <span class="literal">42</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="mark">Math<span class="punctuation">.</span>trunc</span><span class="punctuation">(</span> <span class="literal">0</span><span class="punctuation">.</span><span class="literal">1</span><span class="punctuation">)</span><span class="punctuation">)</span><span class="comment"> // <span class="literal">0</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="mark">Math<span class="punctuation">.</span>trunc</span><span class="punctuation">(</span><span class="punctuation">-</span><span class="literal">0</span><span class="punctuation">.</span><span class="literal">1</span><span class="punctuation">)</span><span class="punctuation">)</span><span class="comment"> // <span class="punctuation">-</span><span class="literal">0</span></span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> mathTrunc <span class="punctuation">(</span>x<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="mark"><span class="punctuation">(</span>x <span class="punctuation">&lt;</span> <span class="literal">0</span> ? Math<span class="punctuation">.</span>ceil<span class="punctuation">(</span>x<span class="punctuation">)</span> : Math<span class="punctuation">.</span>floor<span class="punctuation">(</span>x<span class="punctuation">)</span><span class="punctuation">)</span></span><span class="semi">;</span>
<span class="punctuation">}</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>mathTrunc<span class="punctuation">(</span><span class="literal">42</span><span class="punctuation">.</span><span class="literal">7</span><span class="punctuation">)</span><span class="punctuation">)</span><span class="comment"> // <span class="literal">42</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>mathTrunc<span class="punctuation">(</span> <span class="literal">0</span><span class="punctuation">.</span><span class="literal">1</span><span class="punctuation">)</span><span class="punctuation">)</span><span class="comment"> // <span class="literal">0</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>mathTrunc<span class="punctuation">(</span><span class="punctuation">-</span><span class="literal">0</span><span class="punctuation">.</span><span class="literal">1</span><span class="punctuation">)</span><span class="punctuation">)</span><span class="comment"> // <span class="punctuation">-</span><span class="literal">0</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="NumberSignDetermination" class="showcase showcase_NumberSignDetermination">    <div class="title">New Built-In Methods</div>
    <div class="subtitle">Number Sign Determination</div>
    <div class="desc">Determine the sign of a number, including special cases of signed zero and non-number.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code">console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="mark">Math<span class="punctuation">.</span>sign</span><span class="punctuation">(</span><span class="literal">7</span><span class="punctuation">)</span><span class="punctuation">)</span>  <span class="comment"> // <span class="literal">1</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="mark">Math<span class="punctuation">.</span>sign</span><span class="punctuation">(</span><span class="literal">0</span><span class="punctuation">)</span><span class="punctuation">)</span>  <span class="comment"> // <span class="literal">0</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="mark">Math<span class="punctuation">.</span>sign</span><span class="punctuation">(</span><span class="punctuation">-</span><span class="literal">0</span><span class="punctuation">)</span><span class="punctuation">)</span> <span class="comment"> // <span class="punctuation">-</span><span class="literal">0</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="mark">Math<span class="punctuation">.</span>sign</span><span class="punctuation">(</span><span class="punctuation">-</span><span class="literal">7</span><span class="punctuation">)</span><span class="punctuation">)</span> <span class="comment"> // <span class="punctuation">-</span><span class="literal">1</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="mark">Math<span class="punctuation">.</span>sign</span><span class="punctuation">(</span>NaN<span class="punctuation">)</span><span class="punctuation">)</span><span class="comment"> // NaN</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> <span class="mark">mathSign</span> <span class="punctuation">(</span>x<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="mark"><span class="punctuation">(</span><span class="punctuation">(</span>x <span class="punctuation">===</span> <span class="literal">0</span> &#124;&#124; isNaN<span class="punctuation">(</span>x<span class="punctuation">)</span><span class="punctuation">)</span> ? x : <span class="punctuation">(</span>x <span class="punctuation">&gt;</span> <span class="literal">0</span> ? <span class="literal">1</span> : <span class="punctuation">-</span><span class="literal">1</span><span class="punctuation">)</span><span class="punctuation">)</span></span><span class="semi">;</span>
<span class="punctuation">}</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>mathSign<span class="punctuation">(</span><span class="literal">7</span><span class="punctuation">)</span><span class="punctuation">)</span>  <span class="comment"> // <span class="literal">1</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>mathSign<span class="punctuation">(</span><span class="literal">0</span><span class="punctuation">)</span><span class="punctuation">)</span>  <span class="comment"> // <span class="literal">0</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>mathSign<span class="punctuation">(</span><span class="punctuation">-</span><span class="literal">0</span><span class="punctuation">)</span><span class="punctuation">)</span> <span class="comment"> // <span class="punctuation">-</span><span class="literal">0</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>mathSign<span class="punctuation">(</span><span class="punctuation">-</span><span class="literal">7</span><span class="punctuation">)</span><span class="punctuation">)</span> <span class="comment"> // <span class="punctuation">-</span><span class="literal">1</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>mathSign<span class="punctuation">(</span>NaN<span class="punctuation">)</span><span class="punctuation">)</span><span class="comment"> // NaN</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="PromiseUsage" class="showcase showcase_PromiseUsage">    <div class="title">Promises</div>
    <div class="subtitle">Promise Usage</div>
    <div class="desc">First class representation of a value that may be made asynchronously and be available in the future.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> msgAfterTimeout <span class="punctuation">(</span>msg<span class="punctuation">,</span> who<span class="punctuation">,</span> timeout<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="mark"><span class="keyword">new</span> Promise</span><span class="punctuation">(</span><span class="punctuation">(</span><span class="mark">resolve</span><span class="punctuation">,</span> reject<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
        setTimeout<span class="punctuation">(</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="mark">resolve</span><span class="punctuation">(</span><span class="literal">`$<span class="punctuation">{</span>msg<span class="punctuation">}</span> Hello $<span class="punctuation">{</span>who<span class="punctuation">}</span>!`</span><span class="punctuation">)</span><span class="punctuation">,</span> timeout<span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span>
msgAfterTimeout<span class="punctuation">(</span><span class="literal">""</span><span class="punctuation">,</span> <span class="literal">"Foo"</span><span class="punctuation">,</span> <span class="literal">100</span><span class="punctuation">)</span><span class="punctuation">.</span><span class="mark">then</span><span class="punctuation">(</span><span class="punctuation">(</span>msg<span class="punctuation">)</span> <span class="punctuation">=&gt;</span>
    msgAfterTimeout<span class="punctuation">(</span>msg<span class="punctuation">,</span> <span class="literal">"Bar"</span><span class="punctuation">,</span> <span class="literal">200</span><span class="punctuation">)</span>
<span class="punctuation">)</span><span class="punctuation">.</span><span class="mark">then</span><span class="punctuation">(</span><span class="punctuation">(</span>msg<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">`done after 300ms:$<span class="punctuation">{</span>msg<span class="punctuation">}</span>`</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> msgAfterTimeout <span class="punctuation">(</span>msg<span class="punctuation">,</span> who<span class="punctuation">,</span> timeout<span class="punctuation">,</span> <span class="mark">onDone</span><span class="punctuation">)</span> <span class="punctuation">{</span>
    setTimeout<span class="punctuation">(</span><span class="keyword">function</span> <span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="mark">onDone</span><span class="punctuation">(</span>msg <span class="punctuation">+</span> <span class="literal">" Hello "</span> <span class="punctuation">+</span> who <span class="punctuation">+</span> <span class="literal">"!"</span><span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span><span class="punctuation">,</span> timeout<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span>
msgAfterTimeout<span class="punctuation">(</span><span class="literal">""</span><span class="punctuation">,</span> <span class="literal">"Foo"</span><span class="punctuation">,</span> <span class="literal">100</span><span class="mark"><span class="punctuation">,</span> <span class="keyword">function</span></span> <span class="punctuation">(</span>msg<span class="punctuation">)</span> <span class="punctuation">{</span>
    msgAfterTimeout<span class="punctuation">(</span>msg<span class="punctuation">,</span> <span class="literal">"Bar"</span><span class="punctuation">,</span> <span class="literal">200</span><span class="mark"><span class="punctuation">,</span> <span class="keyword">function</span></span> <span class="punctuation">(</span>msg<span class="punctuation">)</span> <span class="punctuation">{</span>
        console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">"done after 300ms:"</span> <span class="punctuation">+</span> msg<span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="PromiseCombination" class="showcase showcase_PromiseCombination">    <div class="title">Promises</div>
    <div class="subtitle">Promise Combination</div>
    <div class="desc">Combine one or more promises into new promises without having to take
care of ordering of the underlying asynchronous operations yourself.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> fetchAsync <span class="punctuation">(</span>url<span class="punctuation">,</span> timeout<span class="punctuation">,</span> onData<span class="punctuation">,</span> onError<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="ellipsis">&hellip;</span>
<span class="punctuation">}</span>
<span class="keyword">let</span> fetchPromised<span class="punctuation"> = </span><span class="punctuation">(</span>url<span class="punctuation">,</span> timeout<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
    <span class="keyword">return</span> <span class="mark"><span class="keyword">new</span> Promise</span><span class="punctuation">(</span><span class="punctuation">(</span><span class="mark">resolve</span><span class="punctuation">,</span> <span class="mark">reject</span><span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
        fetchAsync<span class="punctuation">(</span>url<span class="punctuation">,</span> timeout<span class="punctuation">,</span> <span class="mark">resolve</span><span class="punctuation">,</span> <span class="mark">reject</span><span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span>
<span class="mark">Promise<span class="punctuation">.</span>all</span><span class="punctuation">(</span><span class="punctuation">[</span>
    fetchPromised<span class="punctuation">(</span><span class="literal">"http://backend/foo<span class="punctuation">.</span>txt"</span><span class="punctuation">,</span> <span class="literal">500</span><span class="punctuation">)</span><span class="punctuation">,</span>
    fetchPromised<span class="punctuation">(</span><span class="literal">"http://backend/bar<span class="punctuation">.</span>txt"</span><span class="punctuation">,</span> <span class="literal">500</span><span class="punctuation">)</span><span class="punctuation">,</span>
    fetchPromised<span class="punctuation">(</span><span class="literal">"http://backend/baz<span class="punctuation">.</span>txt"</span><span class="punctuation">,</span> <span class="literal">500</span><span class="punctuation">)</span>
<span class="punctuation">]</span><span class="punctuation">)</span><span class="punctuation">.</span><span class="mark">then</span><span class="punctuation">(</span><span class="punctuation">(</span>data<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
    <span class="keyword">let</span> <span class="punctuation">[</span> foo<span class="punctuation">,</span> bar<span class="punctuation">,</span> baz <span class="punctuation">]</span><span class="punctuation"> = </span>data<span class="semi">;</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">`success: foo=$<span class="punctuation">{</span>foo<span class="punctuation">}</span> bar=$<span class="punctuation">{</span>bar<span class="punctuation">}</span> baz=$<span class="punctuation">{</span>baz<span class="punctuation">}</span>`</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="punctuation">,</span> <span class="punctuation">(</span>err<span class="punctuation">)</span> <span class="punctuation">=&gt;</span> <span class="punctuation">{</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">`error: $<span class="punctuation">{</span>err<span class="punctuation">}</span>`</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">function</span> fetchAsync <span class="punctuation">(</span>url<span class="punctuation">,</span> timeout<span class="punctuation">,</span> onData<span class="punctuation">,</span> onError<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="ellipsis">&hellip;</span>
<span class="punctuation">}</span>
<span class="keyword">function</span> <span class="mark">fetchAll</span> <span class="punctuation">(</span>request<span class="punctuation">,</span> onData<span class="punctuation">,</span> onError<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">var</span> result<span class="punctuation"> = </span><span class="punctuation">[</span><span class="punctuation">]</span><span class="punctuation">,</span> results<span class="punctuation"> = </span><span class="literal">0</span><span class="semi">;</span>
    <span class="keyword">for</span> <span class="punctuation">(</span><span class="keyword">var</span> i<span class="punctuation"> = </span><span class="literal">0</span><span class="punctuation">;</span> i <span class="punctuation">&lt;</span> request<span class="punctuation">.</span>length<span class="punctuation">;</span> i<span class="punctuation">+</span><span class="punctuation">+</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        result<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="punctuation"> = </span>null<span class="semi">;</span>
        <span class="punctuation">(</span><span class="keyword">function</span> <span class="punctuation">(</span>i<span class="punctuation">)</span> <span class="punctuation">{</span>
            fetchAsync<span class="punctuation">(</span>request<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="punctuation">.</span>url<span class="punctuation">,</span> request<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="punctuation">.</span>timeout<span class="punctuation">,</span> <span class="keyword">function</span> <span class="punctuation">(</span>data<span class="punctuation">)</span> <span class="punctuation">{</span>
                <span class="mark">result<span class="punctuation">[</span>i<span class="punctuation">]</span><span class="punctuation"> = </span>data</span><span class="semi">;</span>
                <span class="mark"><span class="keyword">if</span> <span class="punctuation">(</span><span class="punctuation">+</span><span class="punctuation">+</span>results <span class="punctuation">===</span> request<span class="punctuation">.</span>length<span class="punctuation">)</span></span>
                    <span class="mark">onData<span class="punctuation">(</span>result<span class="punctuation">)</span></span><span class="semi">;</span>
            <span class="punctuation">}</span><span class="punctuation">,</span> onError<span class="punctuation">)</span><span class="semi">;</span>
        <span class="punctuation">}</span><span class="punctuation">)</span><span class="punctuation">(</span>i<span class="punctuation">)</span><span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span>
<span class="mark">fetchAll</span><span class="punctuation">(</span><span class="punctuation">[</span>
    <span class="punctuation">{</span> url: <span class="literal">"http://backend/foo<span class="punctuation">.</span>txt"</span><span class="punctuation">,</span> timeout: <span class="literal">500</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    <span class="punctuation">{</span> url: <span class="literal">"http://backend/bar<span class="punctuation">.</span>txt"</span><span class="punctuation">,</span> timeout: <span class="literal">500</span> <span class="punctuation">}</span><span class="punctuation">,</span>
    <span class="punctuation">{</span> url: <span class="literal">"http://backend/baz<span class="punctuation">.</span>txt"</span><span class="punctuation">,</span> timeout: <span class="literal">500</span> <span class="punctuation">}</span>
<span class="punctuation">]</span><span class="punctuation">,</span> <span class="keyword">function</span> <span class="punctuation">(</span>data<span class="punctuation">)</span> <span class="punctuation">{</span>
    <span class="keyword">var</span> foo<span class="punctuation"> = </span>data<span class="punctuation">[</span><span class="literal">0</span><span class="punctuation">]</span><span class="punctuation">,</span> bar<span class="punctuation"> = </span>data<span class="punctuation">[</span><span class="literal">1</span><span class="punctuation">]</span><span class="punctuation">,</span> baz<span class="punctuation"> = </span>data<span class="punctuation">[</span><span class="literal">2</span><span class="punctuation">]</span><span class="semi">;</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">"success: foo="</span> <span class="punctuation">+</span> foo <span class="punctuation">+</span> <span class="literal">" bar="</span> <span class="punctuation">+</span> bar <span class="punctuation">+</span> <span class="literal">" baz="</span> <span class="punctuation">+</span> baz<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="punctuation">,</span> <span class="keyword">function</span> <span class="punctuation">(</span>err<span class="punctuation">)</span> <span class="punctuation">{</span>
    console<span class="punctuation">.</span>log<span class="punctuation">(</span><span class="literal">"error: "</span> <span class="punctuation">+</span> err<span class="punctuation">)</span><span class="semi">;</span>
<span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="Proxying" class="showcase showcase_Proxying">    <div class="title">Meta-Programming</div>
    <div class="subtitle">Proxying</div>
    <div class="desc">Hooking into runtime-level object meta-operations.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">let</span> target<span class="punctuation"> = </span><span class="punctuation">{</span>
    foo: <span class="literal">"Welcome<span class="punctuation">,</span> foo"</span>
<span class="punctuation">}</span><span class="semi">;</span>
<span class="keyword">let</span> proxy<span class="punctuation"> = </span><span class="mark"><span class="keyword">new</span> Proxy</span><span class="punctuation">(</span><span class="mark">target</span><span class="punctuation">,</span> <span class="punctuation">{</span>
    <span class="mark">get <span class="punctuation">(</span>receiver<span class="punctuation">,</span> name<span class="punctuation">)</span></span> <span class="punctuation">{</span>
        <span class="keyword">return</span> name <span class="keyword">in</span> receiver ? receiver<span class="punctuation">[</span>name<span class="punctuation">]</span> : <span class="literal">`Hello<span class="punctuation">,</span> $<span class="punctuation">{</span>name<span class="punctuation">}</span>`</span><span class="semi">;</span>
    <span class="punctuation">}</span>
<span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
proxy<span class="punctuation">.</span>foo   <span class="punctuation">===</span> <span class="literal">"Welcome<span class="punctuation">,</span> foo"</span><span class="semi">;</span>
proxy<span class="punctuation">.</span><span class="mark">world</span> <span class="punctuation">===</span> <span class="literal">"Hello<span class="punctuation">,</span> <span class="mark">world</span>"</span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="Reflection" class="showcase showcase_Reflection">    <div class="title">Meta-Programming</div>
    <div class="subtitle">Reflection</div>
    <div class="desc">Make calls corresponding to the object meta-operations.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">let</span> obj<span class="punctuation"> = </span><span class="punctuation">{</span> a: <span class="literal">1</span> <span class="punctuation">}</span><span class="semi">;</span>
Object<span class="punctuation">.</span>defineProperty<span class="punctuation">(</span>obj<span class="punctuation">,</span> <span class="literal">"b"</span><span class="punctuation">,</span> <span class="punctuation">{</span> value: <span class="literal">2</span> <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
obj<span class="punctuation">[</span>Symbol<span class="punctuation">(</span><span class="literal">"c"</span><span class="punctuation">)</span><span class="punctuation">]</span><span class="punctuation"> = </span><span class="literal">3</span><span class="semi">;</span>
<span class="mark">Reflect<span class="punctuation">.</span>ownKeys</span><span class="punctuation">(</span>obj<span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span> <span class="literal">"a"</span><span class="punctuation">,</span> <span class="literal">"b"</span><span class="punctuation">,</span> Symbol<span class="punctuation">(</span>c<span class="punctuation">)</span> <span class="punctuation">]</span></span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> obj<span class="punctuation"> = </span><span class="punctuation">{</span> a: <span class="literal">1</span> <span class="punctuation">}</span><span class="semi">;</span>
Object<span class="punctuation">.</span>defineProperty<span class="punctuation">(</span>obj<span class="punctuation">,</span> <span class="literal">"b"</span><span class="punctuation">,</span> <span class="punctuation">{</span> value: <span class="literal">2</span> <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span><span class="comment">
// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span>
<span class="mark">Object<span class="punctuation">.</span>getOwnPropertyNames</span><span class="punctuation">(</span>obj<span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span> <span class="literal">"a"</span><span class="punctuation">,</span> <span class="literal">"b"</span> <span class="punctuation">]</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="Collation" class="showcase showcase_Collation">    <div class="title">Internationalization & Localization</div>
    <div class="subtitle">Collation</div>
    <div class="desc">Sorting a set of strings and searching within a set of strings.
Collation is parameterized by locale and aware of Unicode.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">// <span class="keyword">in</span> German<span class="punctuation">,</span>  <span class="literal">"ä"</span> sorts with <span class="literal">"a"</span></span><span class="comment">
// <span class="keyword">in</span> Swedish<span class="punctuation">,</span> <span class="literal">"ä"</span> sorts after <span class="literal">"z"</span></span>
<span class="keyword">var</span> list<span class="punctuation"> = </span><span class="punctuation">[</span> <span class="mark"><span class="literal">"ä"</span></span><span class="punctuation">,</span> <span class="literal">"a"</span><span class="punctuation">,</span> <span class="literal">"z"</span> <span class="punctuation">]</span><span class="semi">;</span>
<span class="keyword">var</span> l<span class="literal">10</span>nDE<span class="punctuation"> = </span><span class="keyword">new</span> Intl<span class="punctuation">.</span>Collator<span class="punctuation">(</span><span class="mark"><span class="literal">"de"</span></span><span class="punctuation">)</span><span class="semi">;</span>
<span class="keyword">var</span> l<span class="literal">10</span>nSV<span class="punctuation"> = </span><span class="keyword">new</span> Intl<span class="punctuation">.</span>Collator<span class="punctuation">(</span><span class="mark"><span class="literal">"sv"</span></span><span class="punctuation">)</span><span class="semi">;</span>
l<span class="literal">10</span>nDE<span class="punctuation">.</span>compare<span class="punctuation">(</span><span class="literal">"ä"</span><span class="punctuation">,</span> <span class="literal">"z"</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="punctuation">-</span><span class="literal">1</span></span><span class="semi">;</span>
l<span class="literal">10</span>nSV<span class="punctuation">.</span>compare<span class="punctuation">(</span><span class="literal">"ä"</span><span class="punctuation">,</span> <span class="literal">"z"</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="punctuation">+</span><span class="literal">1</span></span><span class="semi">;</span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>list<span class="punctuation">.</span>sort<span class="punctuation">(</span>l<span class="literal">10</span>nDE<span class="punctuation">.</span>compare<span class="punctuation">)</span><span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span> <span class="literal">"a"</span><span class="punctuation">,</span> <span class="mark"><span class="literal">"ä"</span></span><span class="punctuation">,</span> <span class="literal">"z"</span> <span class="punctuation">]</span></span>
console<span class="punctuation">.</span>log<span class="punctuation">(</span>list<span class="punctuation">.</span>sort<span class="punctuation">(</span>l<span class="literal">10</span>nSV<span class="punctuation">.</span>compare<span class="punctuation">)</span><span class="punctuation">)</span><span class="semi">;</span><span class="comment"> // <span class="punctuation">[</span> <span class="literal">"a"</span><span class="punctuation">,</span> <span class="literal">"z"</span><span class="punctuation">,</span> <span class="mark"><span class="literal">"ä"</span></span> <span class="punctuation">]</span></span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="NumberFormatting" class="showcase showcase_NumberFormatting">    <div class="title">Internationalization & Localization</div>
    <div class="subtitle">Number Formatting</div>
    <div class="desc">Format numbers with digit grouping and localized separators.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> l<span class="literal">10</span>nEN<span class="punctuation"> = </span><span class="keyword">new</span> Intl<span class="punctuation">.</span>NumberFormat<span class="punctuation">(</span><span class="mark"><span class="literal">"en<span class="punctuation">-</span>US"</span></span><span class="punctuation">)</span><span class="semi">;</span>
<span class="keyword">var</span> l<span class="literal">10</span>nDE<span class="punctuation"> = </span><span class="keyword">new</span> Intl<span class="punctuation">.</span>NumberFormat<span class="punctuation">(</span><span class="mark"><span class="literal">"de<span class="punctuation">-</span>DE"</span></span><span class="punctuation">)</span><span class="semi">;</span>
l<span class="literal">10</span>nEN<span class="punctuation">.</span>format<span class="punctuation">(</span><span class="literal">1234567</span><span class="punctuation">.</span><span class="literal">89</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="literal">"1<span class="punctuation">,</span>234<span class="punctuation">,</span>567<span class="punctuation">.</span>89"</span></span><span class="semi">;</span>
l<span class="literal">10</span>nDE<span class="punctuation">.</span>format<span class="punctuation">(</span><span class="literal">1234567</span><span class="punctuation">.</span><span class="literal">89</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="literal">"1<span class="punctuation">.</span>234<span class="punctuation">.</span>567<span class="punctuation">,</span>89"</span></span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="CurrencyFormatting" class="showcase showcase_CurrencyFormatting">    <div class="title">Internationalization & Localization</div>
    <div class="subtitle">Currency Formatting</div>
    <div class="desc">Format numbers with digit grouping, localized separators and attached currency symbol.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> l<span class="literal">10</span>nUSD<span class="punctuation"> = </span><span class="keyword">new</span> Intl<span class="punctuation">.</span>NumberFormat<span class="punctuation">(</span><span class="literal">"en<span class="punctuation">-</span>US"</span><span class="punctuation">,</span> <span class="punctuation">{</span> style: <span class="literal">"currency"</span><span class="punctuation">,</span> currency: <span class="mark"><span class="literal">"USD"</span></span> <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="keyword">var</span> l<span class="literal">10</span>nGBP<span class="punctuation"> = </span><span class="keyword">new</span> Intl<span class="punctuation">.</span>NumberFormat<span class="punctuation">(</span><span class="literal">"en<span class="punctuation">-</span>GB"</span><span class="punctuation">,</span> <span class="punctuation">{</span> style: <span class="literal">"currency"</span><span class="punctuation">,</span> currency: <span class="mark"><span class="literal">"GBP"</span></span> <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
<span class="keyword">var</span> l<span class="literal">10</span>nEUR<span class="punctuation"> = </span><span class="keyword">new</span> Intl<span class="punctuation">.</span>NumberFormat<span class="punctuation">(</span><span class="literal">"de<span class="punctuation">-</span>DE"</span><span class="punctuation">,</span> <span class="punctuation">{</span> style: <span class="literal">"currency"</span><span class="punctuation">,</span> currency: <span class="mark"><span class="literal">"EUR"</span></span> <span class="punctuation">}</span><span class="punctuation">)</span><span class="semi">;</span>
l<span class="literal">10</span>nUSD<span class="punctuation">.</span>format<span class="punctuation">(</span><span class="literal">100200300</span><span class="punctuation">.</span><span class="literal">40</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="literal">"$100<span class="punctuation">,</span>200<span class="punctuation">,</span>300<span class="punctuation">.</span>40"</span></span><span class="semi">;</span>
l<span class="literal">10</span>nGBP<span class="punctuation">.</span>format<span class="punctuation">(</span><span class="literal">100200300</span><span class="punctuation">.</span><span class="literal">40</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="literal">"£100<span class="punctuation">,</span>200<span class="punctuation">,</span>300<span class="punctuation">.</span>40"</span></span><span class="semi">;</span>
l<span class="literal">10</span>nEUR<span class="punctuation">.</span>format<span class="punctuation">(</span><span class="literal">100200300</span><span class="punctuation">.</span><span class="literal">40</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="literal">"100<span class="punctuation">.</span>200<span class="punctuation">.</span>300<span class="punctuation">,</span>40 €"</span></span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>
<div id="DateTimeFormatting" class="showcase showcase_DateTimeFormatting">    <div class="title">Internationalization & Localization</div>
    <div class="subtitle">Date/Time Formatting</div>
    <div class="desc">Format date/time with localized ordering and separators.</div>
<div class="js es6">
    <div class="title"><b>ECMAScript 6</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="keyword">var</span> l<span class="literal">10</span>nEN<span class="punctuation"> = </span><span class="keyword">new</span> Intl<span class="punctuation">.</span>DateTimeFormat<span class="punctuation">(</span><span class="mark"><span class="literal">"en<span class="punctuation">-</span>US"</span></span><span class="punctuation">)</span><span class="semi">;</span>
<span class="keyword">var</span> l<span class="literal">10</span>nDE<span class="punctuation"> = </span><span class="keyword">new</span> Intl<span class="punctuation">.</span>DateTimeFormat<span class="punctuation">(</span><span class="mark"><span class="literal">"de<span class="punctuation">-</span>DE"</span></span><span class="punctuation">)</span><span class="semi">;</span>
l<span class="literal">10</span>nEN<span class="punctuation">.</span>format<span class="punctuation">(</span><span class="keyword">new</span> Date<span class="punctuation">(</span><span class="literal">"2015<span class="punctuation">-</span>01<span class="punctuation">-</span>02"</span><span class="punctuation">)</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="literal">"1/2/2015"</span></span><span class="semi">;</span>
l<span class="literal">10</span>nDE<span class="punctuation">.</span>format<span class="punctuation">(</span><span class="keyword">new</span> Date<span class="punctuation">(</span><span class="literal">"2015<span class="punctuation">-</span>01<span class="punctuation">-</span>02"</span><span class="punctuation">)</span><span class="punctuation">)</span> <span class="punctuation">===</span> <span class="mark"><span class="literal">"2<span class="punctuation">.</span>1<span class="punctuation">.</span>2015"</span></span><span class="semi">;</span>
</div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-check-circle"></i>
</div>
    <div class="arrow"><i class="fa fa-caret-up"></i><i class="fa fa-caret-down"></i></div><div class="js es5">
    <div class="title"><b>ECMAScript 5</b> &mdash; syntactic sugar: <span class="style reduced">reduced</span> | <span class="style traditional">traditional</span></div>
    <div class="code"><span class="comment">// no equivalent <span class="keyword">in</span> ES<span class="literal">5</span></span></div>
    <i class="icon fa fa-circle"></i>
    <i class="icon fa fa-times-circle"></i>
</div>
</div>

            <!-- ATTENTION: END OF GENERATED CODE. DO NOT EDIT MANUALLY -->
        </div>
        <div class="foot">
            <div class="text">
                Copyright &copy; 2015-2017 <a href="http://engelschall.com/">Ralf S. Engelschall</a> &nbsp; <i class="fa fa-twitter-square"></i> <a href="http://twitter.com/engelschall">@engelschall</a><br/>
                Fully generated from a <a href="https://github.com/rse/es6-features/blob/gh-pages/features.txt">single source</a><br/>
                Licensed under <a href="https://github.com/rse/es6-features/blob/gh-pages/LICENSE.txt">MIT License</a>.
            </div>
        </div>
    </body>
</html>