open-in-web-browser.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="assets/reset.css">
    <link rel="stylesheet" href="assets/styles.css">
    <link rel="stylesheet" href="assets/prism.css">
    <script src="assets/prism.js"></script>
    <title>JavaScript (ES2015+) Enlightenment</title>
    <meta name="description" content="Grokking Modern JavaScript, In The Wild">
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-11649917-2"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-11649917-2');
    </script>
</head>

<body>

    <div id="menu">

        <div id="toc"></div>
    </div>

    <div id="panel">

        <div id="menuButton">|||</div>

        <div id="bookPadding">

            <h1>JavaScript (ES2015+) Enlightenment</h1>

            <h3 style="margin-top:0px">Grokking Modern JavaScript, In The Wild</h3>

            <h5 style="margin-top:0px">
                    Written by
                    <a href="http://codylindley.com/">Cody Lindley</a>
                  </h5>
                  <section>
                        <p>
                            <a class="logo" href="https://frontendmasters.com/">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1207.01" height="194.33" version="1.2" viewbox="0 0 905.26 145.75"><defs><symbol id="a" overflow="visible"><path d="M60.83-82.8H18.4V0h5.4v-40.94h27.84v-4.6H23.8V-78.2h37.03zm0 0"/></symbol><symbol id="b" overflow="visible"><path d="M24.84-24.72c0-23.12 13.8-32.78 20-32.78 7.36 0 7.72 8.17 7.83 13.8h5.4c0-8.28-2.63-18.4-12.76-18.4-10.4 0-16.7 9.43-20.8 17.82l-2-17.25h-5.2l2.2 19.44V0h5.4zm0 0"/></symbol><symbol id="c" overflow="visible"><path d="M34.5 1.27c10.23 0 23.34-7.02 23.34-31.74 0-24.84-13.22-31.62-23.34-31.62-11.05 0-23.23 8-23.23 31.7 0 24.9 13 31.8 23.23 31.8zm0-4.6c-14.83 0-17.83-15.2-17.83-27.14 0-11.84 3-27.03 17.83-27.03 14.95 0 17.94 15.2 17.94 27.03 0 11.84-3 27.14-17.94 27.14zm0 0"/></symbol><symbol id="d" overflow="visible"><path d="M19.3-25.06c0-23.7 11.87-32.44 20.6-32.44 9.43 0 9.43 9.66 9.43 16.67V0h5.4v-43.36c0-9.2-3.1-18.73-14.14-18.73-9.7 0-19.4 9-21.7 18.1h-.2l-2.2-17.5h-5c2 10.4 2.4 20.7 2.4 31.1V0h5.4zm0 0"/></symbol><symbol id="e" overflow="visible"><path d="M51.86-60.83h-22.3V-80.4h-5.4v19.57h-13.7v4.6h13.7v38.3c0 15.4 7 19.2 14.82 19.2 9.08 0 15.75-6.33 19.55-14.14l-5.17-1.27C50.72-8.4 46-3.34 39.22-3.34c-7.5 0-9.66-5.52-9.66-11.38v-41.5h22.3zm0 0"/></symbol><symbol id="f" overflow="visible"><path d="M54.97-9.3c-5.75 3.44-12.3 5.97-19.2 5.97-9.32 0-18.18-4.84-19.2-26.23H58.2c0-25.17-12.1-32.53-22.34-32.53-17.93 0-24.7 16.6-24.7 32 0 15.4 6.53 31.4 24.36 31.4 7.83 0 14.72-2.4 21.74-5.5zm-38.4-24.86c-.37-10.68 6.76-23.34 18.6-23.34 11.97 0 18.17 12.88 17.6 23.34zm0 0"/></symbol><symbol id="g" overflow="visible"><path d="M54.28-85.33h-5.4v28.4c-4.15-3.34-9.55-5.16-14.96-5.16-8.4 0-23.92 6.9-23.92 31.3C10-7.1 23.34 1.3 33.58 1.3c7.12 0 13-3.7 16.22-10l2.18 10 5.07-.7c-2.2-7.13-2.77-14.5-2.77-21.96zm-5.4 69.8c-2.54 6.56-7.47 12.2-15.2 12.2-6.88 0-18.27-6.1-18.27-27.14 0-22.3 13-27.03 19.9-27.03 5.1 0 9.8 2.64 13.6 5.98zm0 0"/></symbol></defs><g transform="translate(-528.72 -655.664)"><use width="100%" height="100%" x="510.31" y="783.61" fill="#8a8a8a" xlink:href="#a"/><use width="100%" height="100%" x="556.31" y="783.61" fill="#8a8a8a" xlink:href="#b"/><use width="100%" height="100%" x="609.79" y="783.61" fill="#8a8a8a" xlink:href="#c"/><use width="100%" height="100%" x="663.26" y="783.61" fill="#8a8a8a" xlink:href="#d"/><use width="100%" height="100%" x="715.59" y="783.61" fill="#8a8a8a" xlink:href="#e"/><use width="100%" height="100%" x="768.49" y="783.61" fill="#8a8a8a" xlink:href="#f"/><use width="100%" height="100%" x="821.96" y="783.61" fill="#8a8a8a" xlink:href="#d"/><use width="100%" height="100%" x="876.01" y="783.61" fill="#8a8a8a" xlink:href="#g"/><path fill="#bf2b26" d="M1183.75 736.27c-2.36-2.2-4.6-3.28-6.68-3.28-1.85 0-3.9.9-6.18 2.9-2.3 1.9-4.5 4.4-6.5 7.4s-3.7 6.3-5.1 9.9c-1.4 3.5-2 7-2 10.2 0 1.2.2 2.1.7 2.7.5.6 1.1.9 1.9.9.7 0 2-.9 3.8-2.7 1.8-1.8 3.8-4.1 6.1-7 2.2-2.9 4.6-6.2 7-9.9s4.6-7.5 6.7-11.4m29.1 13.7c.1.4.1.8.2 1.3v1.2c0 2.9-1 5.6-3.1 8.2-3.2 4.2-6.3 7.7-9.2 10.7-3 3-5.6 5.4-8.1 7.3-2.5 1.9-4.6 3.3-6.5 4.2-1.9.9-3.4 1.4-4.5 1.4-2 0-3.9-.5-5.8-1.6-1.9-1-3.3-2.5-4.2-4.4 0-1.1.1-2.1.3-3.2s.7-2.4 1.2-4c.6-1.6 1.4-3.5 2.5-5.7 1-2.2 2.4-5 4.1-8.4-1.4 0-2.3.3-2.7 1-4 5.3-7.4 9.6-10.2 13-2.8 3.3-5.3 6-7.3 8s-3.7 3.3-5.1 4c-1.3.7-2.5 1.1-3.5 1.1-4-.5-7.2-2.4-9.4-5.5-2.3-3.2-3.4-7.1-3.4-11.9 0-6.5 1.1-12.5 3.4-18 2.3-5.6 5.2-10.4 8.7-14.5s7.4-7.3 11.6-9.6c4.2-2.3 8.2-3.5 12-3.5 2.94 0 5.44.5 7.5 1.5 2.1 1 4.22 2.7 6.5 5.3 3.2-2.2 6-3.7 8.4-4.6 2.4-.9 4.1-1.3 5.3-1.3 1.6 0 2.83.7 3.8 2.1-.4 1.6-1 3.6-1.8 6s-1.58 4.9-2.47 7.6c-.8 2.6-1.7 5.3-2.7 8l-2.5 7.6c-.7 2.3-1.4 4.4-1.9 6.1-.5 1.7-.8 3-.9 3.8 0 .8.6 1.3 1.67 1.3.4 0 .9-.2 1.8-.6.86-.4 2-1.2 3.4-2.3 1.4-1.2 3.17-2.7 5.2-4.6 2-2 4.4-4.4 7.1-7.3"/><path fill="#bf2b26" d="M1223.7 746.97c-.85 1.18-1.93 2.53-3.23 4.04-1.3 1.6-2.7 3.1-4.22 4.8-1.5 1.7-3.1 3.3-4.72 5l-4.6 4.8c2.02 2.6 4.24 4.6 6.68 6.1 2.5 1.5 4.9 2.2 7.2 2.2 2 0 3.8-.7 5.3-2.2 1.5-1.5 2.2-3.7 2.2-6.6 0-1.4-.1-2.9-.5-4.5-.3-1.6-.7-3.1-1.2-4.7l-1.5-4.5c-.5-1.4-.9-2.8-1.2-4.1m-2.4-10.7c.4-2.4 1.2-4.7 2.3-6.8 1.1-2.1 2.4-4 3.8-5.5 1.5-1.5 3.1-2.7 4.8-3.6 1.7-.9 3.5-1.3 5.3-1.3 1.8 0 3.3.6 4.6 1.7 1.3 1.2 2.1 2.8 2.4 4.9-.6 1.2-1.4 2.4-2.4 3.6s-2.1 2.4-3.3 3.5c.2 1.7.7 3.6 1.7 5.7.9 2.1 1.9 4.3 2.9 6.7 1 2.4 1.9 4.9 2.7 7.6.8 2.7 1.2 5.4 1.2 8.3 0 2.9-.9 5.7-2.7 8.5-1.8 2.9-4.2 5.4-7 7.7s-5.9 4.1-9.2 5.5c-3.3 1.4-6.5 2.1-9.5 2.1-3.1 0-5.9-.3-8.4-1.1-2.4-.7-4.6-1.7-6.3-2.9-1.7-1.1-3.1-2.5-4.1-4-.9-1.5-1.4-3-1.4-4.5 0-2.2.3-4.2.9-6.1.6-1.8 1.7-3.8 3.2-5.8.7-.8 1.8-2.1 3.3-3.8 1.5-1.7 3.1-3.7 4.9-5.8 1.8-2.2 3.6-4.5 5.6-6.9 1.9-2.5 3.6-4.8 5-7.1m74.7 14c.1.4.2.8.2 1.2.1.5.1.9.1 1.3 0 3.1-1 5.9-3 8.2-3.5 4.7-6.9 8.6-10.1 11.6-3.2 3-6.1 5.4-8.8 7.2-2.6 1.8-5 3-7 3.7-2 .7-3.6 1-4.9 1-2.8 0-5.5-.8-7.9-2.5-2.4-1.6-4.2-3.9-5.3-6.8l11.5-37-3 .7c-.5-1.6-.7-3.04-.7-4.4.1-2 .6-3.84 1.4-5.53.9-1.7 1.9-2.9 3.1-3.6l3.4-.33 5.3-16.5c2-.5 4.1-.8 6.2-.8 2.8 0 5.2.5 7.1 1.5 2 1 3.1 2.4 3.6 4.08l-3 9.9 12-1.2c-.1 1.7-.5 3.5-1.3 5.3-.8 1.9-1.9 3.57-3.2 5.1l-11 2.4-8.3 28.1c0 2.8.9 4.2 2.6 4.2 1.4 0 3.8-1.14 7.2-3.5 3.5-2.32 8.2-6.7 14.1-13"/><path fill="#bf2b26" d="M1322.72 731.6c-.5 0-1.22.36-2.14 1.07-.93.72-1.94 1.87-3.03 3.47-1.1 1.6-2.22 3.6-3.4 6.05-1.17 2.4-2.27 5.3-3.27 8.6 4.1-1.9 7.4-3.6 9.82-5.1 2.44-1.5 4.12-2.8 5.05-3.8 1.17-1.5 1.76-3.3 1.76-5.5 0-3.4-1.6-5-4.7-5m26.9 17c.2.8.3 1.7.3 2.7 0 1.4-.4 3-1 4.7-.6 1.7-1.4 3.2-2.3 4.4-5.8 7.9-11.8 13.8-17.9 17.8-6 4-12.2 6-18.6 6-6.9 0-12-1.8-15.5-5.3-3.4-3.5-5.1-8.3-5.1-14.1 0-2.1.2-4.3.7-6.6s1.1-4.5 1.8-6.4c1.6-4.6 3.7-8.7 6.3-12.5 2.6-3.8 5.5-7 8.7-9.7 3.2-2.7 6.5-4.7 10-6.2s7-2.2 10.4-2.2c5.2 0 9.2 1.1 11.9 3.3 2.8 2.2 4.1 5.3 4.1 9.2 0 1.3-.2 2.6-.7 4.1-.5 1.5-1.2 2.8-2 4-.5.6-1.6 1.6-3.3 2.9-1.8 1.3-4 2.7-6.7 4.3s-5.9 3.3-9.6 5c-3.6 1.8-7.6 3.4-11.9 4.9-.1.4-.1.9-.2 1.5 0 .6-.1 1.2-.1 1.9 0 2.3.8 4.1 2.2 5.6 1.4 1.5 3.7 2.2 6.9 2.2 3.6 0 8.1-1.7 13.5-5s11.6-9 18.5-17"/><path fill="#bf2b26" d="M1399.7 750c.17.34.26.75.26 1.26v1.26c0 1.43-.28 2.85-.82 4.28-.55 1.43-1.28 2.73-2.2 3.9-3.37 4.46-6.54 8.2-9.52 11.22-2.98 3.03-5.7 5.46-8.13 7.3-2.5 1.86-4.6 3.18-6.5 3.98-1.9.8-3.5 1.2-4.6 1.2-2.5 0-4.7-.7-6.8-2.08-2.1-1.4-3.9-3.55-5.5-6.5.2-2.18.9-4.6 2.1-7.24 1.1-2.64 2.5-5.4 4.1-8.25 1.6-2.85 3.3-5.7 5.1-8.5 1.8-2.82 3.4-5.5 4.9-8 0-.5-.2-1-.5-1.46-.4-.46-1-.9-2-1.32-1.1-.42-2.3-.84-3.5-1.26-1.3-.5-2.3-.8-3.1-1.2-2 3.2-4.3 6.5-6.9 10-2.6 3.5-5.3 6.9-8.1 10.2-2.8 3.3-5.7 6.4-8.5 9.4-2.9 3-5.6 5.5-8.1 7.6-.7-.6-1.2-1.3-1.5-2.2-.3-.9-.4-1.8-.4-2.8 0-1.1.1-2.2.5-3.2.3-1.1.8-2 1.5-2.9 2.3-1.8 4.8-4.1 7.3-6.9 2.5-2.8 4.8-5.8 7-8.8 2.1-3.1 4-5.9 5.7-8.7 1.6-2.8 2.9-4.9 3.6-6.4-1.5-2.1-2.2-4.5-2.2-7.1.1-3.5 1.1-6.6 3.1-9.3 1.9-2.8 4.5-4.3 7.7-4.6.1 1.1.3 2.3.7 3.3.4 1 1.3 2.1 2.8 3.1 1.4 1 3.5 2.1 6.1 3.2 2.7 1.1 6.3 2.4 10.8 3.8 2.6.8 4.6 1.7 6 2.7 1.3 1 2 2.7 2 5.2-.7 2.2-1.8 4.6-3.3 7.4-1.5 2.8-3.1 5.6-4.8 8.4-1.7 2.8-3.3 5.4-4.7 8-1.5 2.5-2.4 4.7-2.8 6.5 0 .6.2 1 .6 1.4.4.3.9.5 1.4.5.5 0 1.4-.4 2.6-1.2 1.2-.8 2.8-1.9 4.6-3.3 1.9-1.4 3.9-3.2 6.1-5.4 2.3-2.2 4.6-4.6 7-7.3"/><path fill="#bf2b26" d="M1410.54 746.97c-.84 1.18-1.9 2.53-3.2 4.04-1.32 1.6-2.72 3.1-4.23 4.8-1.5 1.7-3 3.3-4.7 5l-4.6 4.8c2 2.6 4.3 4.6 6.7 6.1 2.5 1.5 4.9 2.2 7.2 2.2 2 0 3.8-.7 5.3-2.2 1.5-1.5 2.2-3.7 2.2-6.6 0-1.4-.1-2.9-.5-4.5-.3-1.6-.7-3.1-1.2-4.7l-1.5-4.5c-.5-1.4-.9-2.8-1.2-4.1m-2.4-10.7c.5-2.4 1.2-4.7 2.3-6.8 1.1-2.1 2.4-4 3.9-5.5s3.1-2.7 4.8-3.6c1.7-.9 3.5-1.3 5.2-1.3 1.8 0 3.3.6 4.6 1.7 1.3 1.2 2.1 2.8 2.4 4.9-.6 1.2-1.4 2.4-2.4 3.6s-2.1 2.4-3.2 3.5c.2 1.7.7 3.6 1.6 5.7 1 2.1 1.9 4.3 2.9 6.7 1 2.4 1.9 4.9 2.7 7.6.8 2.7 1.2 5.4 1.2 8.3 0 2.9-.9 5.7-2.7 8.5-1.8 2.9-4.1 5.4-7 7.7-2.8 2.3-5.9 4.1-9.2 5.5-3.3 1.4-6.5 2.1-9.6 2.1-3.1 0-5.9-.3-8.3-1.1-2.4-.7-4.6-1.7-6.3-2.9-1.7-1.1-3.1-2.5-4.1-4-.9-1.5-1.4-3-1.4-4.5 0-2.2.3-4.2 1-6.1.7-1.8 1.7-3.8 3.2-5.8.7-.8 1.8-2.1 3.3-3.8 1.5-1.7 3.2-3.7 5-5.8 1.8-2.2 3.7-4.5 5.6-6.9 2-2.5 3.7-4.8 5.1-7.1M1152.7 679c-2.9 7.5-5.6 15.6-8.2 24.22-2.5 8.66-4.8 17.16-6.6 25.5-1.8 8.37-3.4 16.34-4.5 23.9-1.1 7.6-1.7 14.04-1.7 19.36 0 2.6.3 4.8.9 6.7.7 1.9 1.6 3.3 2.8 4.18-1.8 2.3-4.1 4.1-7 5.2-2.9 1.2-5.8 1.8-8.7 1.8-4.2 0-7.7-1.26-10.6-3.8-2.8-2.55-4.3-6.86-4.3-12.95 0-2.2.3-5.3.9-9.2.6-3.9 1.4-8.4 2.4-13.4 1.1-5 2.3-10.4 3.8-16.3 1.47-5.8 3-11.8 4.68-17.7-.65 0-1.12.1-1.4.2-.3.1-.6.4-.9.8l-40.8 62c-4.9 1.7-9.2 2.5-12.94 2.5-2.62 0-4.95-.5-6.94-1.6-2-1-3.5-2.8-4.4-5.4.35-2.9.66-6.3.9-10l.8-11.4c.3-3.9.5-7.8.8-11.8.2-4 .4-7.9.5-11.6.1-2.2.2-4.22.2-6.1v-6c-.1-.9-.3-1.5-.4-1.7-.2-.2-.57-.3-1.1-.3-9 16.18-16.77 29.77-23.3 40.77-6.6 11-12.47 19.9-17.56 26.6-5.1 6.8-9.7 11.6-13.8 14.5-4.1 3-8.1 4.4-12 4.4-4.4 0-8.1-1.5-11.02-4.7-2.9-3.12-5-7.4-6.1-12.83.6.2 1.3.4 2.3.4 4.7 0 9.2-1.9 13.7-5.9 4.5-3.9 9.1-9 13.7-15.4 4.7-6.4 9.5-13.6 14.4-21.8 4.95-8.2 10.18-16.4 15.7-24.8 2.78-4.2 5.3-7.3 7.56-9.3 2.24-2 4.9-3 8.03-3 1.7 0 3.6.3 5.8.9 1.3 0 2.1-.6 2.2-1.8-.8-9-3.5-15.8-8.1-20.6-4.6-4.7-11.2-7.1-19.7-7.1-6.9 0-13.5 1.7-19.6 4.9-6 3.3-11.3 7.6-15.8 13s-8 11.6-10.6 18.6c-2.6 7-3.9 14.4-3.9 22 0 5.1 1.6 8.4 4.7 10-1.83 2.6-4.1 4.6-6.8 6-2.62 1.5-5.5 2.2-8.43 2.2-4.44 0-8.2-1.43-11.2-4.3-3.1-2.9-4.6-7.5-4.6-13.8 0-7.1 1.16-13.9 3.4-20.4 2.27-6.54 5.37-12.7 9.3-18.5 3.9-5.8 8.55-11.1 13.86-15.87 5.3-4.7 11-8.8 17.1-12.3 6.1-3.4 12.4-6.06 19-7.9 6.6-1.87 13.14-2.8 19.7-2.8 16.25 0 28.5 5.02 36.7 15.1 8.2 10.1 12.3 25.8 12.3 47.13 0 1.6-.1 3.6-.1 6.17l-.3 7.8-.3 7.4c-.1 2.28-.26 3.9-.37 4.9.64 0 1.1-.1 1.4-.2.3-.1.5-.4.7-.8l43.7-63.7c1.3-2.2 2.5-3.3 3.64-3.3.3 0 .8-.05 1.4-.1.6-.05 1.1-.14 1.4-.25 1.64-1.9 4.2-2.9 7.62-2.9 2.2 0 4.7.4 7.44 1.2 2.8.74 5.8 2.1 9 3.94"/></g></svg>
                            </a>
                            <br />
                            <em
                            >Sponsored by
                            <a href="https://frontendmasters.com/">Frontend Masters</a>,
                            advancing your skills with in-depth, modern front-end engineering
                            courses</em
                          >
                        </p>
                      </section>
            <section>Today, tools like
                <a href="https://babeljs.io/">Babel</a> have made it commonplace to see
                <a href="http://www.ecma-international.org/ecma-262/6.0/">ES2015</a>, ES2016, ES2017, ES2018, and
                ES2019
                language updates/proposals in babelified source code. These compounding language changes can make
                it
                difficult to learn something like React, Apollo GraphQL, or Webpack.</section>
            <section>
                This book aims to alleviate this problem by providing a curated selection of the commonly used language updates, tersely explained, to lessen this indirection. Thus, after studying the material in this book grokking new JavaScript code while learning JavaScript frameworks and tools, should be much more comfortable.
            </section>
            <hr>

            <h3>Written For:</h3>

            <p>The contents of this book are for developers who are working in a codebase using modern React, Vue, or Angular code and find recent JavaScript language updates/proposals to be causing too much indirection. And or, developers who want to drill into memory the latest and most commonly used JavaScript updates.</p>

            <p>ES2015+ Enlightenment is not a rudimentary read on the JavaScript language. The content in this book attempts to take a developer with ES3 and ES5 knowledge and make them more knowledgeable about ES2015+ and the implications of modern changes to the language on JavaScript tools and frameworks.
            </p>

            <hr>

            <h3>How to Use/Read This Book:</h3>

            <p>First off, this is a mix between a book, a reference, and cheatsheet. My intention in writing is to shine a light on ES5+ language changes in a  tersely and helpfully format. To be clear this is not a long form book on the JavaScript language. Or, a detailed reference. Consider this an elaborate cheatsheet with runnable code purposefully curated for those who know ES3 but need to master ES5+.</p>

                <p>Second, this is a web book. A lot of contexts can be gained by just clicking on links in this book. If you ever feel in need of more context use the links in the text.</p>

            <hr>

            <h3>How to Use/Read The Code Examples:</h3>

            <p>Try and view the code examples as an extension of the words. First, read and re-read the words. Then read the code, especially the code comments, from top to bottom as if they are part of the surrounding paragraphs. The goal should be to grok the code until no questions remain as to what the code example is doing and expressing.
            </p>

            <hr>

            <h3>While Using/Reading the book remember, by design:</h3>

            <ol>
                <li>The words and code comments are intentionally terse with the goal of code comprehension without long-winded and exhaustive explanations.</li>
                <li>The code examples are contrived to reveal the nature of the code. Focus on what the code is doing and making sure you understand it, potentially over my words.</li>
                <li>The book is a mix of a mini book, a reference, and cheatsheet. Expect it to feel like one of these or all of these at the same time.</li>
        </ol>


            <hr>

            <p><strong>Contribute content, suggestions, and fixes on github</strong>:</p>
			<p><a href="https://github.com/FrontendMasters/javascript-enlightenment">https://github.com/FrontendMasters/javascript-enlightenment</a></p>
			
            <hr>

            <div id="chapter1" class="chapter">

                <h2>Chapter 1 : ECMAScript 5 (aka ES5) Recap </h2>

                <section class="sub">

                    <p>In this chapter, I'll recap the significant language updates introduce in ES5 to delineate these updates from
                        the
                        updates made in ES2015 (aka ES6).</p>
                </section>

                <h3>1.1 : ES5 Browser and Node Compatibility</h3>

                <p>For the most part, ES5 is
                    <a href="https://kangax.github.io/compat-table/es5/">compatible</a> with
                    <a href="https://gs.statcounter.com/browser-version-market-share">modern</a> browsers (e.g.
                    <a href="https://kangax.github.io/compat-table/es5/#test-Strict_mode">IE9+, excluding strict mode</a>)
                    and
                    <a href=" https://nodejs.org/en/ ">Node</a> since version 4.x.x.</p>

                <p>Unless you have to support an older JavaScript engine/runtime (e.g. IE8) you are safe to assume
                    most
                    <a href="https://kangax.github.io/compat-table/es5/">modern JavaScript engines/runtimes support ES5</a>.</p>

                <h3>1.2 : New ES5 <code>String</code> Method</h3>

                <p>The ES5 <code>.trim()</code> method removes whitespace from both ends of a string and creates a new
                    string.</p>

                <pre class="line-numbers"><code class="language-js">
var myString = '  Some Tabs and Spaces      ';
console.log(myString.length); // logs 28
var myNewString = myString.trim(); // trim it
console.log(myNewString); // logs 'Some Tabs and Spaces'
console.log(myNewString.length); // logs 20

// Note: this method does not mutate a value it creates a new value
console.log(myString, myString.length); // This still is, '  Some Tabs and Spaces      '
    </code></pre>

                <p>You should consider "Whitespace" to mean in general; spaces, tabs, and non-breaking spaces used in a string.</p>

                <p>Specifically <code>trim()</code> removes:</p>

<ul>
    <li>\U0009 character tabulation</li>
    <li>\U000A line feed</li>
    <li>\U000B line tab</li>
    <li>\U000C form feed</li>
    <li>\U000D carriage return</li>
    <li>\U0020 space</li>
    <li>\U3000 ideographic space</li>
    <li>\UFEFF zero-width non-breaking space</li>
</ul>

                <h3>1.3 : New ES5 <code>Array</code> Static Methods</h3>

                <p>ES5 added the static <code>Array</code> method, <code>Array.isArray()</code>.</p>

                <p>The <code>Array.isArray()</code> method is used to determine precisely (<code>true</code> or <code>false</code>)
                    if a value is a true
                    <code>Array</code>. In other words, this method checks to see if the provided value is an instance
                    of
                    the <code>Array()</code> constructor.</p>

                <pre class="line-numbers"><code class="language-js">
console.log(Array.isArray([1,2,3])) //logs true

// Note: does not work on Array-like objects
console.log(Array.isArray({length: 3, 0:1, 1:2, 2:3})) //logs false
    </code></pre>

    <div class="notes">

            <p>
                <strong>Notes:</strong>
            </p>
            <ol>
                <li>The static <code>Array.isArray()</code> method differs from using <code>[] instanceof Array</code> only slightly when dealing with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray#instanceof_vs_isArray">iframes</a>.</li>
                <li>This <code>isArray()</code> method also respects values that are constructed from constructors extended from the native <code>Array</code> constructor using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends">new class <code>extends</code> keyword.</a></li>
            </ol>
        </div>

                <h3>1.4 : New ES5 <code>Array</code> Methods</h3>

                <p>ES5 added the following <code>Array</code> methods (i.e.
                    <a href="https://en.wikipedia.org/wiki/Higher-order_function ">higher-order iteration functions</a>):</p>

                <ul>
                    <li><code>[].some()</code></li>
                    <li><code>[].every()</code></li>
                    <li><code>[].filter()</code></li>
                    <li><code>[].forEach()</code></li>
                    <li><code>[].indexOf()</code></li>
                    <li><code>[].lastIndexOf()</code></li>
                    <li><code>[].map()</code></li>
                    <li><code>[].reduce()</code></li>
                    <li><code>[].reduceRight()</code></li>
                </ul>

                <p>The <code>[].some()</code> method will start testing values in array,
                    <strong>until a test returns true</strong>, then the function passed to <code>.some()</code> immediately returns <code>true</code>, otherwise the function returns
                    <code>false</code> (i.e. the first truthy value found will result in the function immediately returning true and potentially this could mean not all tests are run).</p>

                <pre class="line-numbers"><code class="language-js">
// Check if one or more items in the array is bigger than or equal to 2
var someMethod = [1, 2, 3].some(function(value, valueIndex, wholeArray){ 
    return value >= 2; 
}); 

console.log(someMethod)
// logs true because the array contains a value that is greater than or equal to 2
    </code></pre>

                <p>The <code>[].every()</code> method will start testing values in array,
                    <strong>until a test returns false</strong>, then the function passed to <code>.every()</code> immediately returns <code>false</code>, otherwise the function returns <code>true</code> (i.e. the first falsy value found will result in the function immediately returning false and potentially this could mean not all tests are run).</p>

                <pre class="line-numbers"><code class="language-js">
// Check if every item in the array is bigger than or equal to 2
var everyMethod = [1, 2, 3].every(function(value, valueIndex, wholeArray){ 
    return value >= 2; 
}); 

console.log(everyMethod) // logs false because the array contains a value that is less than 2
    </code></pre>

                <p>The <code>[].filter()</code> method will return a new
                    <code>Array</code> containing all the values that
                    <strong>pass (i.e. are true) the filtering test</strong>.</p>

                <pre class="line-numbers"><code class="language-js">
var myArray = [1,2,3];
// filter out any value in the array that is not bigger than or equal to 2
var FilteredArray = myArray.filter(function(value, valueIndex, wholeArray){ 
    return value >= 2; 
});

console.log(FilteredArray) // logs [2,3]

// Note: filter() returns a new Array, myArray is still equal to [1,2,3]
    </code></pre>

                <p>The <code>[].forEach()</code> method executes a provided function for each value in the array.</p>

                <pre class="line-numbers"><code class="language-js">
// log to the console each value, valueIndex, and wholeArray passed to the function
['dog','cat','mouse'].forEach(function(value, valueIndex, wholeArray){ 
    console.log('value = '+value+' valueIndex = '+valueIndex+' wholeArray = '+wholeArray);
    /** logs:

    "value=dog valueIndex=0 wholeArray=dog,cat,mouse "
    "value=cat valueIndex=1 wholeArray=dog,cat,mouse "
    "value=mouse valueIndex=2 wholeArray=dog,cat,mouse "

    **/
});       
    </code></pre>

                <p>The <code>[].indexOf()</code> method searches an array for the
                    <strong>first</strong> value matching the value passed to <code>indexOf()</code>, and returns the index of this value.</p>

                <pre class="line-numbers"><code class="language-js">
// get index of first 'cat'
console.log(['dog','cat','mouse', 'cat'].indexOf('cat')); // logs 1

// Note: Remember the index starts at 0
    </code></pre>

                <p>The <code>[].lastIndexOf()</code> method searches an array for the
                    <strong>last</strong> value matching the value passed to <code>[].lastIndexOf()</code>, and returns the index of this value.</p>

                <pre class="line-numbers"><code class="language-js">
// get index of last 'cat'
console.log(['dog','cat','mouse', 'cat'].lastIndexOf('cat')); // logs 3

// Note: Remember the index starts at 0
    </code></pre>

                <p>The <code>[].map()</code> method executes a provided function for each value in the array, and returns the
                    results
                    in a
                    <strong>new array</strong>.</p>

                <pre class="line-numbers"><code class="language-js">
var myArray = [5, 15, 25];
// add 10 to every number in the array
var mappedArray = myArray.map(function(value, valueIndex, wholeArray){ 
    return value + 10; 
});

console.log(mappedArray) // logs [15,25,35]

// Note: map() returns a new Array, myArray is still equal to [5, 15, 25]
    </code></pre>


                <p>The <code>[].reduce()</code> method runs a function that passes the return value to the next iteration of the
                    function
                    using values in the array from
                    <strong>left to right</strong> and returning a final value.</p>

                <pre class="line-numbers"><code class="language-js">
// add up numbers in array from left to right i.e. (((5+5) +5 ) + 2)
var reduceMethod = [5, 5, 5, 2].reduce(function(accumulator, value, valueIndex, wholeArray){ 
    return accumulator + value; 
}); 
console.log(reduceMethod) // logs 17

/** reduce also accepts a second parameter that sets the first accumulator value, 
instead of using the first value in the array. **/

// add up numbers in array from left to right, but start at 10 i.e. ((((10+5) +5 ) +5 ) + 2)
var reduceMethod = [5, 5, 5, 2].reduce(function(accumulator, value, valueIndex, wholeArray){ 
    return accumulator + value; // first iteration of func accumulator is 10 not 5
}, 10); 
console.log(reduceMethod) // logs 27
    </code></pre>

                <p>The <code>[].reduceRight()</code> method runs a function that passes the return value to the next iteration of
                    the
                    function using values in the array from
                    <strong>right to left</strong> and returning a final value.</p>

                <pre class="line-numbers"><code class="language-js">
// add up numbers in array from left to right i.e. (((2+5) +5 ) + 5)
var reduceRightMethod = [5, 5, 5, 2].reduceRight(function(accumulator, value, valueIndex, wholeArray){ 
    return accumulator + value; 
}); 
console.log(reduceRightMethod) // logs 17

/** reduce also accepts a second parameter that sets the first accumulator value, 
instead of using the first value in the array. **/

// add up numbers in array from left to right, but start at 10 i.e. ((((10+2) + 5 ) +5 ) + 5)
var reduceRightMethod = [5, 5, 5, 2].reduceRight(function(accumulator, value, valueIndex, wholeArray){ 
    return accumulator + value; // first iteration of func accumulator is 10 not 5
}, 10); 
console.log(reduceRightMethod) // logs 27
    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>All the new methods ignore holes in arrays (i.e. <code>[1,2,,,,,,,,,3]</code>).</li>
                        <li>All of these new <code>Array</code> methods, except for <code>reduce</code> and <code>reduceRight</code>
                            accept
                            a second parameter. This second parameter allows you to set the <code>this</code> value for
                            the
                            function being passed in the first parameter. </li>
                    </ol>
                </div>

                <h3>1.5 : New ES5 Getters and Setters (aka Accessors Descriptors or Computed Properties)</h3>

                <p>ES5 adds to <code>Objects</code> computed properties via the keywords <code>get</code> and <code>set</code>.
                    This means that <code>Objects</code> can have properties, that are methods, but don't act like
                    methods
                    (i.e you don't invoke them using <code>()</code>). In short by labeling a function in an object
                    with
                    <code>get</code> or <code>set</code> one can invoke the backing property function on a property, by merely
                    accessing
                    the property, without using innovating brackets.</p>

                <p>The example below demonstrates the nature of getter and setter properties:</p>

<pre class="line-numbers"><code class="language-js">
var obj = {
    get RunsWhenAccessed(){ 
        console.log('you accessed the property RunsWhenAccessed');
    },
    set RunsWhenSet(newValueBeingSet){ 
        console.log('you set the property RunsWhenSet to : ' + newValueBeingSet);
    }
}

// access the RunsWhenAccessed property and the backing property function fires
obj.RunsWhenAccessed; // logs 'you accessed the property RunsWhenAccessed'

// access and set the RunsWhenSet property and the backing property function fires
obj.RunsWhenSet = 'foo'; // logs 'you set the property RunsWhenSet to : foo'
// note I am setting a value that becomes an argument and not calling a function using brackets

</code></pre>

                <p>Don't over think getters and setters, they are simply a property who's value is determined by
                    running
                    a backing property function and the function is invoked by accessing or setting the property.</p>

<pre class="line-numbers"><code class="language-js">
var person = {
    firstName : '',
    lastName : '',
    get name() {
        return this.firstName + ' ' + this.lastName;
    },
    set name(str) {
        var n = str.split(/\s+/);
        this.firstName = n.shift();
        this.lastName = n.join(' ');
    }
}

// set name, but store first and last separately
person.name = 'Cody Lindley';

// get name, returns firstName and LastName combined
console.log(person.name); // logs 'Cody Lindley'

</code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>The same property can have a getter and setter.</li>
                        <li>The <code>get</code> and <code>set</code> syntax is a shortcut for using <code>Object.defineProperty()</code>
                            and
                            <code>Object.defineProperties()</code> to add the <code>get</code> and <code>set</code> property descriptors.</li>
                        <li>A setter property can only take in a single value and thus a single argument is
                            passed
                            to the backing property function.
                        </li>
                    </ol>
                </div>

                <h3>1.6 : New ES5 <code>Object</code> Static Methods</h3>

                <ul>
                    <li><code>Object.create()</code></li>
                    <li><code>Object.getPrototypeOf()</code></li>
                    <li><code>Object.defineProperty()</code></li>
                    <li><code>Object.defineProperties()</code></li>
                    <li><code>Object.getOwnPropertyDescriptor()</code></li>
                    <li><code>Object.getOwnPropertyNames()</code></li>
                    <li><code>Object.preventExtensions()</code></li>
                    <li><code>Object.isExtensible()</code></li>
                    <li><code>Object.sealed()</code></li>
                    <li><code>Object.isSealed()</code></li>
                    <li><code>Object.freeze()</code></li>
                    <li><code>Object.isFrozen()</code></li>
                </ul>

                <p>ES5 added the <code>Object.create()</code> method so objects could be created and their prototypes
                    easily
                    setup.
                    <code>Object.getPrototypeOf</code>() was added to easily get an objects prototype.</p>

                <pre class="line-numbers"><code class="language-js">
// setup an object to be used as the prototype to a newly created myObject object below
var aPrototype = {
    foo: 'bar',
    getFoo: function(){
        console.log(this.foo);
    }
}

// create a new myObject, setting the prototype of this new object to aPrototype
var myObject = Object.create(aPrototype);

// logs 'bar' because myObject uses aPrototype as its prototype, it inherits getFoo()
myObject.getFoo(); // logs 'bar'

// get a reference to the prototype of myObject, using getPrototypeOf()
console.log(Object.getPrototypeOf(myObject) === aPrototype); //logs true
    </code></pre>

                <p>ES5 added <code>Object.defineProperty()</code>, <code>Object.defineProperties()</code>, and <code>Object.getOwnPropertyDescriptor()</code>
                    so
                    object properties can be precisely defined (using descriptors) and retrieved. Descriptors provide
                    an
                    attribute that describe a property in an object. The attributes (i.e descriptors) that each
                    property
                    can have are:
                    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor#Description ">configurable,
                        enumerable, value, writable, get, and set</a>.</p>

                <pre class="line-numbers"><code class="language-js">
// create an object with a property and value
const myObject = {
    prop1: 'value1'
}

// get the default descriptors for the prop1 property in myObject.
console.log(Object.getOwnPropertyDescriptor(myObject,'prop1'));

/** the above console logs:

[object Object] {
    configurable: true,
    enumerable: true,
    value: "value1",
    writable: true
}

Note that get and set are undefined by default **/

// add a property, 'value2' with descriptors to myObject using Object.defineProperty()
Object.defineProperty(myObject, 'prop2', {
    value: 'value2',
    writable: true,
    enumerable: true,
    configurable: true,
});

// get the descriptors for the prop2 property.
console.log(Object.getOwnPropertyDescriptor(myObject,'prop2'));

// add multiple properties ('prop3' &amp; 'prop4') with 
// descriptors to myObject using Object.defineProperties()
Object.defineProperties(myObject, {
    prop3: {
    enumerable: true,
    configurable: true,
    value: 'value3'
    },
    prop4: {
    enumerable: true,
    configurable: true,
    // Note that value and write properties are not added when using the properties set and get
    set: (newValue) => {
      console.log('you set the property prop4 to : ' + newValue);
      },
    get: () => {
      console.log('you accessed the property prop4');
      return 'prop4'; // the get returns the value for prop4 unlike using, value: 'value4'
      }
    }
});

// get the descriptors for the prop3 and prop4 properties

console.log(Object.getOwnPropertyDescriptor(myObject,'prop3'));

console.log(Object.getOwnPropertyDescriptor(myObject,'prop4'));


// Note that prop4's value is based on get and set, not value
console.log(myObject.prop4);

    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Using <code>=</code> to assign an object a property and value is a similar routine but not
                            exactly
                            identical to using
                            <code>Object.defineProperty()</code> and <code>Object.defineProperties()</code>. These two
                            methods
                            allow the assignment of a value as well as the defining/retrieval of a properties
                            descriptors
                            and will ignore the prototype chain (i.e. will not look for inherited properties).</li>
                        <li>ES2017 added the <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors">Object.getOwnPropertyDescriptors()</a></code> static method. This method returns an object containing all the own property descriptors for a given object.</li>
                        <li>Below are the descriptions/definitions of the attributes of a property that make up a
                            property
                            descriptor:
                            <br>
                            <br>
                            <dl>
                                <dt>
                                    <strong>value</strong> :</dt>
                                <dd>contains the property's value.</dd>
                                <dt>
                                    <strong>writable</strong> :</dt>
                                <dd>contains a boolean indicating whether the value of a property can be changed or
                                    written
                                    too.
                                </dd>
                                <dt>
                                    <strong>get</strong> :
                                </dt>
                                <dd>reference to the function that is called when a property is read.</dd>
                                <dt>
                                    <strong>set</strong> :
                                </dt>
                                <dd>reference to the function that is called when a property is set to a value.</dd>
                                <dt>
                                    <strong>configurable</strong> :
                                </dt>
                                <dd>contains a boolean indicating whether a property can have its attributes changed
                                    and
                                    deleted.
                                </dd>
                                <dt>
                                    <strong>enumerable</strong> :
                                </dt>
                                <dd>contains a boolean indicating if a property will show up on certain operations.
                                </dd>
                            </dl>

                        </li>
                    </ol>
                </div>

                <p>ES5 added <code>Object.keys()</code> which returns an <code>Array</code> of non-inherited-enumerable properties
                    of
                    a given object. ES5 added <code>Object.getOwnPropertyNames()</code> which returns an <code>Array</code> of
                    non-inherited
                    properties of a given object regardless of enumerability.</p>

                <pre class="line-numbers"><code class="language-js">    
// Create an object
var myObject = Object.create(null); // no prototype used

// Add prop to object created
myObject.myObjectProp1 = 1;

// Define a property using defineProperty()
Object.defineProperty(myObject, 'myObjectProp2', {
    enumerable: false,
    value: 2
});

// Use keys() to get Array of all non-inherited, enumerable properties
console.log(Object.keys(myObject)); // logs ["myObjectProp1"]

// Use getOwnPropertyNames to get Array of all non-inherited properties including non-enumerable
console.log(Object.getOwnPropertyNames(myObject)); // logs ["myObjectProp1", "myObjectProp2"]
    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>ES2017 added <code>Object.values()</code> which returns an array of a given object's own
                            enumerable
                            property values and <code>Object.entries()</code> which returns an array of a given
                            object's
                            own enumerable properties and values (e.g. <code>[[property:value],[property:value]]</code>).</li>
                    </ol>
                </div>

                <p>ES5 provided three Object methods for protecting objects. They are:</p>

                <ol>
                    <li><code>Object.preventExtensions()</code>: Stops properties from being added but not deleted.</li>
                    <li><code>Object.seal()</code>: Stops properties from being added or configured (i.e. the <code>configurable</code>
                        descriptor attribute
                        for each property is changed to <code>false</code>).</li>
                    <li><code>Object.freeze()</code>: Stops properties from being added, configured, or writable (i.e.
                        the
                        <code>configurable</code> and
                        <code>writable</code> descriptor attribute for each property is changed to <code>false</code>)</li>
                </ol>

                <p>To compliment these three methods ES5 also added three <code>Object</code> methods for determining the type of
                    protection
                    an object is using. They are:</p>

                <ol>
                    <li><code>Object.isExtensible()</code>: Boolean check if an object is extensible.</li>
                    <li><code>Object.isSealed()</code>: Boolean checking if an object is sealed.</li>
                    <li><code>Object.isFrozen()</code>: Boolean checking if an object is frozen.</li>
                </ol>

                <h3>1.7 : New ES5 <code>bind()</code> Function Method</h3>

                <p>Before ES5 functions could only be invoked and given a <code>this</code> value at innovation time
                    using
                    <code>apply()</code> or <code>call()</code>. In other words, these two methods make it possible to
                    call
                    a function and at call time change the value of <code>this</code> for the body of the function. But
                    what
                    if you don't want to invoke the function? And instead, you want to change the value of <code>this</code>
                    for
                    the function when it is called in the future?</p>

                <p>ES5 added <code>bind()</code> and this new function method does not invoke a function but instead
                    takes
                    an existing function and from it creates a new function, yet to be called, with a specified value
                    for
                    <code>this</code> inside of the new function.</p>


                <pre class="line-numbers"><code class="language-js">
window.name = 'John'; // Defined in the global scope

var myObject = {name:'Bill'};

var greeting = function(){
    // if the greeting function has a defined this that is not window i.e. global scope
    console.log(this !== undefined && this !== window ?  this.name : window.name);
};

// invoke greeting, where the this context for the greeting function is the global scope
greeting(); //logs John because the value name is in the global scope

// .bind() greetings function this value to myObject
var bindGreetingToObject = greeting.bind(myObject);
// this keyword now points to myObject, and not the window object.

// invoke bindGreetingToObject with the this context being bound to myObject
bindGreetingToObject(); //logs Bill because this value for bindGreetingToObject is bound to myObject
        </code></pre>


                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Don't forget that the main difference between <code>apply()</code> and <code>call()</code>
                            is
                            that
                            <code>apply()</code> takes an Array of arguments passed to the called function while <code>call()</code>
                            takes
                            a list of individual arguments (e.g. arg2, arg3, ... ). <code>Bind()</code> also takes a
                            list
                            of individual arguments (e.g. arg2, arg3, ... ) passed to the new function being called.</li>
                    </ol>
                </div>

                <h3>1.8 : New ES5 <code>use strict</code> Mode</h3>

                <p>Adding, <code>'use strict'</code> to the top of a JavaScript file or as the first line of a function
                    body
                    will change the language to a
                    <a href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/ ">stricter</a> version of
                    JavaScript.
                    Today, using strict mode isn't typically a decision to be made because ECMAScript modules are implicitly
                    in
                    strict mode. In other words, spinning up a version of say,
                    <a href="https://github.com/facebook/create-react-app ">create-react-app</a> which uses ECMAScript modules
                    will
                    have <code>'use strict'</code> in play by default due to the fact that ECMAScript modules (i.e. <code>import React from 'react';</code>)
                    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import ">uses
                        strict
                        mode implicitly</a>. It is important you are aware of this fact. In other words, JavaScript
                    modules
                    give you strict mode by default.</p>

                <h3>1.9 : New ES5 <code>JSON</code> methods</h3>

                <p><code>JSON.parse()</code> takes a JSON string and returns the JavaScript value(s) described by the
                    string.
                    In other words,
                    <code>JSON.parse()</code> will convert a string of JavaScript in
                    <a href="https://json.org/ ">JSON format</a> into real JavaScript values (i.e. Objects, Arrays,
                    Strings,
                    Numbers, Booleans etc...).</p>

                <pre class="line-numbers"><code class="language-js">
var JSONValues = JSON.parse('{"name":"Bill","age":22}') // convert JSON string to JS values
console.log(typeof JSONValues); // logs "object"
console.log(JSONValues.name, JSONValues.age); // logs Bill, 22
    </code></pre>

                <p><code>JSON.stringify()</code> takes JavaScript values and returns a string representing the values.</p>

                <pre class="line-numbers"><code class="language-js">
var JSONString = JSON.stringify({ name: 'Bill', age: 2 }); // Convert JS Object to JSON String 
console.log(typeof JSONString) // logs "string"
console.log(JSONString) // logs "{ "name": "Bill", "age":2} "
    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Both <code>stringify()</code> and <code>parse()</code> have an optional second function
                            parameter
                            that can be used to augment the result before it is returned.</li>
                    </ol>
                </div>

                <h3>1.10 : New ES5 Syntax Changes</h3>

                <p>Trailing commas in <code>Object</code> literals are now ok:</p>

                <pre class="line-numbers"><code class="language-js">
var myObject = {
    name: 'Bill',
    age: 12, // no syntax error
}
    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Be aware, trailing commas are not allowed in JSON.</li>
                        <li>ES2017 will allow trailing commas when defining function parameters or calling a function with
                            arguments.
                            However, calling a function with a comma alone or defining a function parameter as a comma
                            alone
                            will throw a SyntaxError.
                        </li>
                    </ol>
                </div>

                <p>Reserved words can now be used as unquoted <code>Object</code> property keys:</p>

                <pre class="line-numbers"><code class="language-js">
// no syntax error when using reserved keywords as property/keys on an object
var myObject = {
    new: 'new',
    class: 'class',
    if: 'if',
    function: 'function'
}
    </code></pre>

                <h3>1.11 : From ES5 to ES2015. What?</h3>

                <p>ES2015 was first called ES6 because at the time an update to the 5th edition of ECMAScript would
                    logically
                    be title ECMAScript edition 6 or "ES6". However, a naming tweak for language updates/changes
                    occurred
                    in 2015. It was decided by <a href="https://www.ecma-international.org/memento/tc39-rf-tg.htm">TC39</a>,
                    the standardization group for JavaScript/ECMA-262, to release <a href="https://github.com/tc39/proposals/blob/master/finished-proposals.md">stage four
                        proposals
                    </a> once a year (i.e. stage four are approved changes to the language). Given this change, new updates to the language moving forward would be given the
                    titles
                    ES2015 (i.e. ES6), ES2016, ES2017, ES2018 etc... . Basically, language changes/updates are semantically
                    titled
                    under the year in which the update/change becomes standardized.
                </p>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>If it is not obvious, it should be noted that just because a JavaScript language
                            update/change has been
                            standardized
                            does not mean those who make use of the ECMAScript standard will implement the
                            updates/change
                            (i.e.,
                            adoption of new standards is a slow and often complicated affair e.g., browser
                            compatibility).</li>
                    </ol>
                </div>
            </div>

            <div id="chapter2" class="chapter">

                <h2>Chapter 2 : Running ES2015+ (Compatibility, Compiling, and Polyfills)</h2>

                <section class="sub">

                    <p>Writing and running ES2015+ (i.e. ES2015, ES2016, ES2017, ES2018) code and staged proposals is
                        not as simple as writing some code and
                        then
                        having a web browser or Node run it. To run ES2015+ and staged proposals a pre-compiler and
                        polyfills
                        are needed. This chapter digs into some of these details.</p>
                </section>

                <h3>2.1 : ES2015 Native Runtime Compatibility</h3>

                <p>Native support for ES2015+ (i.e.
                    <a href="https://kangax.github.io/compat-table/es6/">ES2015</a>,
                    <a href="https://kangax.github.io/compat-table/es2016plus/">ES2016</a>,
                    <a href="https://kangax.github.io/compat-table/esnext/">ES2017</a>,
                    <a href="https://kangax.github.io/compat-table/esnext/">ES2018</a> etc...) varies greatly depending upon
                    which
                    JavaScript engine and runtime one is needing to support (e.g. V8 & Node, V8 & Chrome,
                    JavaScriptCore
                    & Safari, SpiderMonkey & Firefox etc..). </p>

                <p>In short, both modern day Node and modern web browser engines mostly have full <a href="http://kangax.github.io/compat-table/es6/">support
                        for ES2015</a> (starting with Node 6.14.4+, Edge 15, Chrome 47, Safari 10, and Firefox 54).
                    However,
                    things get complicated in terms of compatibility for <a href="https://kangax.github.io/compat-table/es2016plus/">ES2016+</a>
                    and <a href="https://github.com/tc39/proposals">staged proposals</a>. This is why a lot of
                    developers
                    side-step chasing compatibility and turn to polyfills and compilers. Polyfills plug JavaScript
                    runtimes
                    environments, at runtime, with newer unsupported API's while a compiler will transform newer
                    unsupported
                    syntax to previous versions of JavaScript (i.e. ES2015+ > ES5). This combination of polyfills and
                    compiling
                    allows developers to write ES2015+ JavaScript today while still supporting current and previous
                    runtimes (i.e. Write new 2015+ JavaScript, transforming it
                    using something like
                    Babel, then it can run it in IE9 with polyfills).</p>

                    <div class="notes ">

                            <p>
                                <strong>Notes:</strong>
                            </p>
                            <ol>
                                <li>The staging of JavaScript proposals/updates is the process that allows JavaScript to change over time. A proposed change to the language starts at stage 0 and is finished when it reaches stage 4 (stages: <a href="https://tc39.github.io/process-document/">0 = strawman, 1 = proposal, 2 = draft, 3 = Candidate, 4 = finished</a>). When a proposal is finished it simply means it is ready to be added to the formal specification. Today, staged proposals regardless of if they have been officially added to the JavaScript specification can be adopted prematurely by developers using polyfills and compilers (e.g. Both TypeScript and Babel can be configured to interpret staged proposals).</li>
                            </ol>
                        </div>

                <h3>2.2 : Running ES2015+ Using Online Tools</h3>

                <p>The simplest way to run ES2015+ code online (including staged proposals) is to use the <a href="https://babeljs.io/repl">online
                        Babel REPL</a>.</p>

                <p>If you'd like to run ES2015+ code in the context of the web platform try the <a href="https://codesandbox.io/s/vanilla">codesandbox.io</a>
                    tool.
                    The vanilla sandbox uses <a href="https://parceljs.org/transforms.html#babel">Parcel</a>
                    which uses Babel and <a href="https://babeljs.io/docs/en/babel-preset-env">babel-preset-env</a>
                    by default. Most of the code examples in this book can be run in <a href="https://codesandbox.io/s/vanilla">codesandbox.io</a> by clicking on the "run/edit in codesandbox.io" link above the code.</p>

                <h3>2.3 : Running ES2015+ locally</h3>

                <p>A common way to run ES2015+ code on your local computer, if you are already familiar with Node.js
                    and
                    REPL's, is to use
                    <a href="https://babeljs.io/docs/en/next/babel-node.html">babel-node</a>. Babel-node is a node CLI
                    tool
                    that will compile ES2015+ syntax to ES5 syntax before running it. It can be used in place of the
                    <a href="https://nodejs.org/api/cli.html">Node.js CLI</a> to run JavaScript code using the Node
                    runtime.
                    Keep in mind that most of ES2015 has been supported in <a href="https://node.green/">Node since
                        6.14.4+</a>.
                    But if you want ES2015+ including staged proposals you'll need to use a tool like <a href="https://babeljs.io/docs/en/next/babel-node.html">babel-node</a>.</p>

                <p>Personally, I prefer using <a href="https://quokkajs.com/">Quokka.js</a> in my code editor with <a
                        href="https://quokkajs.com/docs/configuration.html#babel">Babel
                        enabled</a>. I setup Quokka to use <a href="https://babeljs.io/docs/en/babel-preset-env">babel-preset-env</a>
                    and <a href="https://babeljs.io/docs/en/babel-preset-stage-1">stage 1-3</a>.</p>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Writing source code that uses ES2015+ in a coding environment isn't the topic of this book.
                            However,
                            keep in mind, that most developers today working on the front-end will set up a compiler
                            like
                            Babel or TypeScript as part of a development environment process so ES2015+ code will be
                            compiled
                            as it is developed. Typically, this involves using a <a href="https://github.com/topics/module-bundler">module
                                bundler
                            </a> that makes use of Babel or Typescript during development and production bundling.</li>
                        <li>Babel Polyfill is automatically loaded when using babel-node.</li>
                    </ol>
                </div>

                <h3>2.4 : Compiling ES2015+ Development Syntax To Static ES5 Production Syntax</h3>

                <p>Because developers today don't want to wait for native support for newer
                    <a href="https://kangax.github.io/compat-table/es2016plus/">ES2016</a>,
                    <a href="https://kangax.github.io/compat-table/esnext/">ES2017</a>,
                    <a href="https://kangax.github.io/compat-table/esnext/">ES2018</a> syntax and coming syntax <a href="https://github.com/tc39/proposals">proposals</a>
                    they will adopt a compiling step for JavaScript source code. A compiling step takes ES2015+ syntax,
                    and potentially <a href="https://github.com/tc39/proposals">staged syntax proposals</a>, and
                    transforms newer/proposed syntax
                    to ES5 syntax (<a href="https://babeljs.io/docs/en/babel-polyfill">polyfill</a> require for
                    complete
                    compatibility). For example, it can take <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function syntax</a> and convert it to ES5 syntax.
                </p>

<pre class="line-numbers"><code class="language-js">
// Compilers like Babel/TypeScript will take this:
const myFunction = () => {};

// And turn it into this:
var myFunction = function myFunction() {};

</code></pre>

                <p>The most common compilers in use today are
                    <a href="https://babeljs.io/">Babel</a> and
                    <a href="https://www.typescriptlang.org/">TypeScript</a>. These compilers are routinely used as
                    part
                    of a build/bundling module process where ES2015+ source code and ES modules syntax are taken in and
                    transformed
                    to <strong>static</strong> ES5 production code (e.g.
                    <a href="https://webpack.js.org/loaders/babel-loader/">Webpack</a> and
                    <a href="https://parceljs.org/transforms.html#babel">Parcel</a> exist to bundle assets, but they can
                    also
                    compile ES2015+ code found in JavaScript modules to ES5 when bundling).</p>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>The <a href="https://babeljs.io">Babel</a> compiling tool does double duty by compiling not
                            just
                            ES2015+ to ES5 but also things like <a href="https://babeljs.io/docs/en/babel-preset-react">JSX
                                to ES5</a> and <a href="https://babeljs.io/docs/en/babel-preset-flow">Flow to ES5</a>
                            using
                            <a href="https://babeljs.io/docs/en/plugins">plugins</a>.</li>
                        <li>Compiling does not come without <a href="https://babeljs.io/docs/en/caveats#classes">caveats</a>.</li>
                        <li>Babel and TypeScript differ in the fact that Babel is not trying to be a superset of
                            JavaScript.
                            In other words, Babel does not exist so non-standard language features can be bolted on to
                            the
                            language.
                            However, TypeScript views non-standard language updates as a core part of its purpose for
                            existing (e.g. built in static type
                            checking).</li>
                    </ol>
                </div>

                <h3>2.5 : Compiling ES2015+ Syntax Dynamically at Runtime</h3>

                <p>Compilers like <a href="https://babeljs.io">Babel</a> are typically used by tools like <a href="https://webpack.js.org/loaders/babel-loader/">Webpack</a>
                    or <a href="https://parceljs.org/transforms.html#babel">Parcel</a> during module bundling to create
                    static
                    files that are then used in production. However, Babel can also be used dynamically at runtime via
                    <a href="https://babeljs.io/docs/en/next/babel-standalone.html">babel-standalone</a>. Below is a
                    example
                    of using babel-standalone in a web browser via a .html document.</p>


                    <div class="codesandboxlinkNotDynamic"><a href="https://codesandbox.io/s/182474qr23">run/edit in
                        codesandbox.io</a></div>

                <pre class="line-numbers"><code class="language-markup">
&lt;!DOCTYPE html&gt;&#10;&lt;html&gt;&#10;&#10;&lt;head&gt;&#10;    &lt;meta charset=&quot;utf-8&quot; /&gt;&#10;&lt;/head&gt;&#10;&#10;&lt;body&gt;&#10;&#10;    &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;&#10;    &lt;!-- Load ES2015+ Polyfill, core-js used by Babel polyfill --&gt;&#10;    &lt;script src=&quot;https://unpkg.com/core-js-bundle@3.0.0-beta.3/minified.js&quot;&gt;&lt;/script&gt;&#10;    &lt;!-- Load Babel --&gt;&#10;    &lt;script src=&quot;https://unpkg.com/@babel/standalone/babel.min.js&quot;&gt;&lt;/script&gt;&#10;    &lt;!-- Your custom script here --&gt;&#10;    &lt;script type=&quot;text/babel&quot;&gt;&#10;&#10;    // Arrow function from ES2015&#10;    const getMessage = () =&gt; &quot;Hello World&quot;;&#10;    document.getElementById(&apos;output&apos;).innerHTML = getMessage();&#10;&#10;    // .flat() from staged 3 proposal works because of polyfill&#10;    console.log([1, [2, 3], [4, 5]].flat());&#10;    &lt;/script&gt;&#10;&#10;&lt;/body&gt;&#10;&#10;&lt;/html&gt;

</pre></code>
               
<p>Using Babel dynamically at runtime is generally not recommended for production but it does have a
                    few
                    use cases:
                    <ol>
                        <li>
                            Sites like JSFiddle, JS Bin, the REPL on the Babel site, etc. These sites compile
                            user-provided JavaScript in real-time.
                        </li>
                        <li>Apps that embed a JavaScript engine such as V8 directly, and want to use Babel for
                            compilation</li>
                        <li>
                            Apps that want to use JavaScript as a scripting language for extending the app itself,
                            including all the goodies that ES2015
                            provides.
                        </li>
                        <li>
                            Integration of Babel into a non-Node.js environment (ReactJS.NET, ruby-babel-transpiler,
                            php-babel-transpiler, etc).
                        </li>
                    </ol>
                </p>


                <h3>2.6 : Polyfill'ing JavaScript API's at Runtime</h3>

                <p>Polyfills are JavaScript code used to plug or fill runtime environments with newer non-syntax parts of the
                    JavaScript
                    language that it may be lacking. Below is an example of an <code>Object.assign()</code> polyfill that will check to see if the JavaScript runtime has <code>Object.assign()</code> and if not will add it to the runtime.</p>

<pre class="line-numbers"><code class="language-js">
// if Object.assign is missing then polyfill it.
if (typeof Object.assign != 'function') {
    // Must be writable: true, enumerable: false, configurable: true
    Object.defineProperty(Object, "assign", {
        value: function assign(target, varArgs) { // .length of function is 2
        'use strict';
        if (target == null) { // TypeError if undefined or null
            throw new TypeError('Cannot convert undefined or null to object');
        }
    
        var to = Object(target);
    
        for (var index = 1; index < arguments.length; index++) {
            var nextSource = arguments[index];
    
            if (nextSource != null) { // Skip over if undefined or null
            for (var nextKey in nextSource) {
                // Avoid bugs when hasOwnProperty is shadowed
                if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
                to[nextKey] = nextSource[nextKey];
                }
            }
            }
        }
        return to;
        },
        writable: true,
        configurable: true
    });
}
                        
</code></pre>                  
                    
                    
                    <p>Basically, JavaScript polyfills fill in newer missing API features if they are missing from the runtime. The
                    <a href="https://babeljs.io/docs/en/babel-polyfill">babel-polyfill</a>
                    documentation offers the following explanation for polyfill'ing:</p>

                    <p>"You can use new built-ins like Promise or WeakMap, static methods like Array.from or
                        Object.assign,
                        instance methods like Array.prototype.includes, and generator functions (provided you use the
                        regenerator
                        plugin). The polyfill adds to the global scope as well as native prototypes like String in
                        order
                        to do this." - <a href="https://babeljs.io/docs/en/babel-polyfill">Babel Docs</a></p>

                    <p>Polyfills are typically <a href="https://babeljs.io/docs/en/babel-polyfill">used in conjunction
                            with
                            compiling tools like Babel</a> to offer full compatibility for both syntax and newer API
                        features
                        (i.e. syntax meaning something like: <code>() => {}</code> and API meaning something like
                        <code>Object.assign()</code>).
                        This is why Babel provides the <a href="https://babeljs.io/docs/en/babel-polyfill">babel-polyfill</a>.</p>

                    <div class="notes ">

                        <p>
                            <strong>Notes:</strong>
                        </p>
                        <ol>
                            <li>The polyfills used by Babel can be also used as standalone solutions with Node and Web
                                browsers
                                (i.e.
                                <a href="https://github.com/zloirock/core-js">regenerator runtime</a> and <a href="https://github.com/zloirock/core-js">core-js</a>).
                            </li>
                            <li>Tools like <a href="https://polyfill.io/">polyfill.io</a> are available for
                                polyfill'ing
                                browsers with not just JavaScript API updates <a href="https://polyfill.io/v2/docs/features/">but
                                    also with browser/web API updates as well</a> (e.g. <a href="https://polyfill.io/v2/docs/features/#requestAnimationFrame">requestAnimationFrame</a>).</li>
                        </ol>
                    </div>

            </div>

            <div id="chapter3" class="chapter">

                <h2>Chapter 3 : New ES2015+ Methods</h2>


                <section class="sub">

                        <p>In this chapter, I'll break down the newest methods from ES2015+. When targeting an ES5 only runtime (i.e. IE9) all of these methods have to be <a href="https://github.com/zloirock/core-js">polyfilled</a>.</p>
            </section>

                <h3>3.1 : New <code>Number</code> Static Method (ES2015)</h3>

                <p>ES2015 added the <code>Number.isInteger()</code> method that will return <code>true</code> if the
                    value
                    passed to it is an integer (i.e. a number with no fractional part). Otherwise, it will return <code>false</code>.</p>

                <pre class="line-numbers"><code class="language-js">
console.log(Number.isInteger(0)); // logs true
console.log(Number.isInteger(1)); // logs true

console.log(Number.isInteger(0.1)); // logs false, has a fractional part
console.log(Number.isInteger(Infinity)); // logs false
console.log(Number.isInteger([1])); // logs false
    </code></pre>

                <h3>3.2 : New <code>String</code> Methods (ES2015, ES2017) </h3>

                <ul>
                    <li><code>''.startsWith()</code> ES2015</li>
                    <li><code>''.endsWith()</code> ES2015</li>
                    <li><code>''.includes()</code> ES2015</li>
                    <li><code>''.repeat()</code> ES2015</li>
                    <li><code>''.padStart()</code> ES2017</li>
                    <li><code>''.padEnd()</code> ES2017</li>
                    <li><code>''.matchAll()</code> (coming soon, stage 3 proposal)</li>
                    <li><code>''.trimStart()</code> / <code>''.trimLeft()</code> (coming soon, stage 3 proposal)</li>
                    <li><code>''.trimEnd()</code> / <code>''.trimRight()</code> (coming soon, stage 3 proposal)</li>
                </ul>

                <p>ES2015 added <code>''.startsWith()</code>and <code>''.endsWith()</code>. These methods can check if
                    a
                    string begins or ends with a specific sub-string.</p>

                <pre class="line-numbers"><code class="language-js">
// True or false does 'pre-funded' start with 'pre-'
console.log('pre-funded'.startsWith('pre-')) // logs true

// True or false does 'pre-funded' end with 'funded'
console.log('pre-funded'.endsWith('funded')) // logs true
    </code></pre>

                <p>ES2015 added <code>''.includes()</code>. This method will check if a string contains a specific
                    sub-string.</p>

                <pre class="line-numbers"><code class="language-js">
// True or false does 'pre-funded' include the sub string 'fund'
console.log('pre-funded'.includes('fund')) // logs true
    </code></pre>

                <p>ES2015 added <code>''.repeat()</code>. This method will take a string and return the same string
                    repeated
                    as many times as provided in the first argument.</p>

                <pre class="line-numbers"><code class="language-js">
// Take the string 'He' and return a string containing 'He' repeated three times
console.log('He'.repeat(3)) // logs 'HeHeHe'
    </code></pre>

                <p>ES2017 added <code>''.padStart()</code> and <code>''.padEnd()</code>. These methods will pad the
                    beginning
                    or end of a string with repeating non-breaking spaces (the default) or a specified string of
                    characters.
                    When padding you supply the final length of the entire string. Including the original string. The
                    non-breaking
                    spaces or specified string will fill in any of the characters not taken up by the original string.</p>

                <pre class="line-numbers"><code class="language-js">
// Pad the start of 'GO!' with spaces so the total length of the string is 10, including 'GO!'.
console.log('GO!'.padStart(10)) // logs '       GO!' 
// note how the ' ' repeated until a length of 10 was reached

// Pad the start of 'GO!' with '.' so the total length of the string is 10, including 'GO!'.
console.log('GO!'.padStart(10, '.')) // logs '.......GO!'
// note how the '.' repeated until a length of 10 was reached

// Pad the end of 'GO!' with spaces so the total length of the string is 10, including 'GO!'.
console.log('GO!'.padEnd(10)) // logs 'GO!       '
// note how the ' ' repeated until a length of 10 was reached

// Pad the start of 'GO!' with '.' so the total length of the string is 10, including 'GO!'.
console.log('GO!'.padEnd(10, '!')) // logs 'GO!!!!!!!!'
// note how the '!' repeated until a length of 10 was reached
    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>The string methods <code>''.matchAll()</code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart">''.trimStart(); ''.trimLeft();</a></code>,
                            and
                            <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd">''.trimEnd(); ''.trimRight();</a></code> are currently at
                            <a href="https://tc39.github.io/process-document/ ">stage 3</a>.
                        </li>

                    </ol>
                </div>

                <h3>3.3 : New <code>Array</code> Static Methods (ES2015)</h3>

                <ul>
                    <li><code>Array.from()</code></li>
                    <li><code>Array.of()</code></li>
                </ul>

                <p>ES2015 added the <code>Array.from()</code> static method. This method will take Array-like values
                    (objects
                    with a length property and indexed values) or iterable values and convert them into <code>Array</code> values
                    (iterable
                    values are:
                    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols ">String,
                        Array, TypedArray, Map, and Set</a>).</p>

                <pre class="line-numbers"><code class="language-js">
// Array from Array-like values
const myArray1 = Array.from({length: 2, 0: 'zero', 1:'one'});
console.log(myArray1); // logs ["zero", "one"]

// Array from String (i.e. an iterable)
const myArray2 = Array.from('foo');
console.log(myArray2); // logs ["f", "o", "o"]

// Array from an Array (i.e. an iterable)
const myArray3 = Array.from([1, 2, 3])
console.log(myArray3); // logs [1, 2, 3], well that is silly

// Array from an Array (i.e. an iterable), where each item in the array is run through a function
// The second argument to .from() can be a function called on each iterable
const myArray4 = Array.from([1, 2, 3], item => item * item)
console.log(myArray4); // logs [1, 4, 9]
                </code></pre>


                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li><code>Array.from()</code> creates a new, shallow-copied Array. </li>
                    </ol>
                </div>

                <p>ES2015 added the <code>Array.of()</code> static method. This method creates an <code>Array</code> from arguments.
                    Unlike
                    the array constructor it can handle a case like <code>Array.of(5)</code> resulting in <code>[5]</code>
                    while
                    <code>Array(5)</code> will result in <code>[undefined, undefined, undefined, undefined, undefined]</code>.</p>

                <pre class="line-numbers"><code class="language-js">
// create an array containing 5 values                   
console.log(Array.of(5,{},undefined,[],'string'));
/* logs:

[5, [object Object] { ... }, undefined, [], "string"]

*/

// create an array containing 5 undefined values
console.log(Array(5)); // works if only one argument is passed
/* logs:

[undefined, undefined, undefined, undefined, undefined]

*/

// create an array containing 2 numeric values, 5 and 4
console.log(Array(5,4));
/* logs:

[5, 4]

*/
                </code></pre>

                <h3>3.4 : New <code>Array</code> Methods (ES2015, ES2016)</h3>

                <ul>
                        <li><code>[].findIndex()</code></li>
                        <li><code>[].find()</code></li>
                        <li><code>[].includes()</code></li>
                        <li><code>[].keys()</code></li>
                        <li><code>[].values()</code></li>
                        <li><code>[].entries()</code></li>
                        <li><code>[].copyWithin()</code></li>
                        <li><code>[].fill()</code></li>
                        <li><code>[].flat()</code> (coming soon, stage 3 proposal)</li>
                        <li><code>[].flatMap()</code> (coming soon, stage 3 proposal)</li>
                    </ul>

                <p>ES2015/ES2016 added the <code>[].findIndex()</code>, <code>[].find()</code> and <code>[].includes()</code>
                    methods.
                    The <code>[].find()</code> method is used to find a specific value in an array and return that
                    value.
                    <code>[].findIndex()</code> is used to find a specific value and return its index in the array.
                    Both
                    use a testing function to iterate over the Array and return the first truthy value returned from
                    the
                    testing function. The <code>[].includes()</code> method is used to verify (true or false) if an
                    array
                    contains a specific value.</p>

                <pre class="line-numbers"><code class="language-js">
const myArray = [10, 20, 30, 40];

// find and return the first value in the array that is greater than 20
console.log(myArray.find(function(item){ return item > 20})) // logs 30

// find and return the index of the first value in the array that is greater than 20
console.log(myArray.findIndex(function(item){ return item > 20})) // logs 2

// does myArray contain the value 30
console.log(myArray.includes(30)) // logs true
                </code></pre>

                <p>ES2015 added the <code>[].keys()</code>, <code>[].values()</code>, and <code>[].entries()</code>
                    methods.
                    The <code>[].keys()</code> method returns the keys from an Array as an Array iterator object. The
                    <code>[].values()</code> method
                    returns the values (i.e. the items) from an Array as an Array iterator object. And the <code>[].entries()</code>
                    returns
                    an Array iterator containing each item as a key-value array (i.e. <code>[[0, item0], [1, item1]]</code>).</p>

                <pre class="line-numbers"><code class="language-js">
let myArray = ['item0', 'item1', 'item2'];

// All of these log "[object Array Iterator] "
console.log(myArray.keys().toString());
console.log(myArray.values().toString());
console.log(myArray.entries().toString());

// create an iterator containing the index's of an array (i.e. the key's)
let myArrayKeys = myArray.keys();
console.log(myArrayKeys.next().value) // logs 0
console.log(myArrayKeys.next().value) // logs 1
console.log(myArrayKeys.next().value) // logs 2

// create an iterator containing the values from an array
let myArrayValues = myArray.values();
console.log(myArrayValues.next().value) // logs "item0 "
console.log(myArrayValues.next().value) // logs "item1 "
console.log(myArrayValues.next().value) // logs "item2 "

// create an iterator containing both the keys and the values, inside of an array
let myArrayEntries = myArray.entries();
console.log(myArrayEntries.next().value) // logs [0, "item0"]
console.log(myArrayEntries.next().value) // logs [1, "item1"]
console.log(myArrayEntries.next().value) // logs [2, "item2"] 
                </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>The <code>[].keys()</code>, <code>[].values()</code>, and <code>[].entries()</code> array
                            methods
                            are very similar to the <code>[].keys()</code>, <code>[].values()</code>, and <code>[].entries()</code>
                            found
                            on the <code>Map()</code> and <code>Set()</code> values.</li>
                        <li>
                            <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols ">An
                                iterator is basically an object with a <code>.next()</code> method.</a>
                        </li>
                        <li>
                            Don't confuse an iterator with an iterable. An iterator will keep track of what comes next
                            (i.e. <code>.next()</code>)
                            while a iterable value is simply a value that comes with an interface for iterating over
                            the
                            value. An array is by default an iterable. But, methods like <code>[].keys()</code>,
                            <code>[].values()</code>,
                            and <code>[].entries()</code> can be used to create an Array iterator object around the
                            original
                            array that will keep track of the current iteration and knows what the next item in the
                            iteration
                            is and how to get it.
                        </li>
                    </ol>
                </div>

                <p>ES2015 added the <code>[].copyWithin()</code> method. This method shallow copies a range of items in
                    an
                    Array and then inserts the copies back into the same Array replacing items in the Array starting at
                    a
                    specific index.
                </p>

                <pre class="line-numbers"><code class="language-js">
let myArray1 = [1,1,1,1,5,5,5,5];
// copy from index 4 to 6 and take the copies and start replacing at index 0
console.log(myArray1.copyWithin(0, 4, 6)); //logs [5, 5, 1, 1, 5, 5, 5, 5]
// i.e. this will replace the values at index 0 and index 1 with copied values 5, 5

let myArray2 = [1,1,1,1,5,5,5,5];
// passing negative numbers to any of the parameters means start from the end of the array
// copy from -4 index to -2 and take the copies and start replacing at index 2
console.log(myArray2.copyWithin(-6, -4, -2)); //logs [1, 1, 5, 5, 5, 5, 5, 5]
// i.e. this will replace the values at index 2 and index 3 with copied values 5, 5

let myArray3 = [1,1,1,1,5,5,5,5];
// copy from index 4 to end and take the copies and start replacing at index 0
console.log(myArray3.copyWithin(0, 4)); //logs [5, 5, 5, 5, 5, 5, 5, 5]
// i.e. this will replace the values at index 0, 1, 2, 3 with copied values 5, 5, 5, 5
                </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>The second and third arguments passed to <code>[].copyWithin()</code> will accept negative
                            numbers
                            indicating a range which starts or counts from the end not the beginning.</li>
                    </ol>
                </div>

                <p>ES2015 added the <code>[].fill()</code> method. This method will replace or fill a range of items
                    in
                    an Array with a new value.</p>

                <pre class="line-numbers"><code class="language-js">
// replace the values at index 0 and index 1 with 'foo'
// the second and third arguments to fill() below say, start filling at index 0 and stop at index 2
console.log([5,5,5,5].fill('foo',0,2)) // logs ["foo", "foo", 5, 5]

// replace all values from index 2 on with 'foo'
console.log([5,5,5,5].fill('foo',2)) // logs [5, 5, "foo", "foo"]

// replace all values with 'foo'
console.log(Array(4).fill('foo')) // logs ["foo", "foo", "foo", "foo"]
                </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>The second and third arguments passed to <code>[].fill()</code> will accept negative
                            numbers
                            indicating a range which starts or counts from the end not the beginning.</li>
                    </ol>
                </div>

                <h3>3.5 : New <code>Object</code> Static Methods (ES2015, ES2017) </h3>

                <ul>
                    <li><code>Object.is()</code></li>
                    <li><code>Object.values()</code></li>
                    <li><code>Object.entries()</code></li>
                    <li><code>Object.assign()</code></li>
                    <li><code>Object.fromEntries()</code> (coming soon, stage 3 proposal)</li>
                </ul>

                <p>ES2015 added the <code>Object.is()</code> static method. This method accepts two values and if the
                    values
                    are the same then it returns true, otherwise, it returns false.</p>

                <pre class="line-numbers"><code class="language-js">
// compare the same Object object
const myObject = {};
console.log(Object.is(myObject,myObject)); // logs true, same

// compare different Object objects
console.log(Object.is({},{})); // logs false, two different objects 

// compare primitive values
const myNumber = 5;
const myBoolean = true;
const myString = '';
const myNull = null;
const myUndefined = undefined;
console.log(Object.is(5,myNumber)); // logs true, same value
console.log(Object.is(true,myBoolean)); // logs true, same value
console.log(Object.is('',myString)); // logs true, same value
console.log(Object.is(null,myNull)); // logs true, same value 
console.log(Object.is(undefined,myUndefined)); // logs true, same value
                </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li><code>Object.is(1,1)</code> is the same as <code>1 === 1</code>, except for the following
                            cases, <code>Object.is( +0, -0 ) is false, while -0 === +0</code> is true and <code>Object.is( NaN, NaN ) is true, while NaN === NaN </code>
                            is false.</li>
                    </ol>
                </div>

                <p>ES2017 added the <code>Object.values()</code> static method. This method will return an <code>Array</code> of
                    enumerable
                    property values from an <code>Object</code>.</p>

                <pre class="line-numbers"><code class="language-js">
// log the values in myObject
var myObject = { 0: 'f', 1: 'o', 2: 'o' };
console.log(Object.values(myObject)); // logs ['f', 'o', 'o']

// the string primitive value will be coerced to an object if passed to Object.values();
console.log(Object.values('foo')); // logs ['f', 'o', 'o']
                </code></pre>

                <p>ES2017 added the <code>Object.entries()</code> static method. This method will return an objects
                    properties,
                    as key-value pairs inside an Array (e.g. <code>[property, value]</code>) inside a single wrapping
                    Array
                    (e.g. a multidimensional array
                    <code>[[property, value], [property, value]]</code>).</p>

                <pre class="line-numbers"><code class="language-js">
// log the key and value pairs in myObject
var myObject = { 0: 'f', 1: 'o', 2: 'o' };
console.log(Object.entries(myObject)); // logs [["0", "f"], ["1", "o"], ["2", "o"]]
                </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Don't forget <code>Object.keys()</code> was added in ES5.</li>
                    </ol>
                </div>

                <p>ES2015 added the <code>Object.assign()</code> static method. This method copies own enumerable
                    properties
                    from one object to a different target object. </p>

                <pre class="line-numbers"><code class="language-js">
// using assign() to clone an object
const myObject = {'key1':'value1', 'key2':'value2'};
console.log(Object.assign({}, myObject)); 
/* logs new object, cloned from myObject

[object Object] {
    key1: "value1",
    key2: "value2"
}

*/

// using assign() to merge objects
const myObject1 = {'key1':'value1', 'key2':'value2'};
const myObject2 = {'key3':'value3', 'key4':'value4'};
const myObject3 = {'key4':'4'};
console.log(Object.assign(myObject1, myObject2, myObject3)); 
/* logs a new object 

[object Object] {
    key1: "value1",
    key2: "value2",
    key3: "value3",
    key4: "4"
}

Note: same properties are overwritten. Last in to the parameter list wins. 

*/

// using assign to coerce a string to an object
console.log(Object.assign({},'foo'));

/* logs a new object 

[object Object] {
    0: "f",
    1: "o",
    2: "o"
}

*/
                </code></pre>

                <div class="notes ">

                        <p>
                            <strong>Notes:</strong>
                        </p>
                        <ol>
                            <li>The <code>Object.assign()</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Deep_Clone">won't deep clone reference values</a>; it will only deep clone the reference, not the value. This means that if you are cloning an object with reference values (e.g. objects inside of objects) the reference value is not cloned just the reference. Thus, deep cloning using <code>Object.assign()</code> copies pointers (i.e. the reference), not values. If you need to deep clone an object, you'll have to resort to other <a href="https://github.com/pvorb/clone">methods</a>.
                            </li>
                            <li>The <code>Object.assign()</code> is commonly used to merge objects together or create shallow clones of objects.</li>
                        </ol>
                    </div>

            </div>

            
            <div id="chapter4" class="chapter">

                <hr>

                <h2>Chapter 4 : New ES2015+ Syntax</h2>


                <section class="sub">

                        <p>In this chapter, I'll break down the most used syntax updates from ES2015 and beyond. When targeting an ES5 only runtime these syntax updates have to be compiled from ES2015+ to ES5 (e.g., Babel > ES5).</p>
            </section>

                <h3>4.1 : Using <code>const</code> and <code>let</code> (ES2015)</h3>

                <p>Before ES2015 variables were declared using the <code>var</code> keyword. Today, it is more common
                    that
                    developers completely avoid the use of <code>var</code> and instead use <code>const</code> and
                    <code>let</code> when
                    needed. Const is used to declare variables with values that do not get reassigned. Reassigning a
                    <code>const</code> value throws an error. Additionally, both <code>const</code> and <code>let</code>
                    honor
                    all block scope (i.e.
                    <code>{ block scope }</code>), unlike
                    <code>var</code> which only honors <strong>function</strong> block scope (i.e. <code>function myFunction(){ block scoped }</code>).</p>

                <p>This means <code>const</code> and <code>let</code> are safer because they don't leak out of things
                    like
                    <code>if</code> blocks or looping blocks. For example, in the code below the variables, <code>doug</code>
                    and
                    <code>MATH</code> are scoped to the <code>if</code> block while <code>jill</code> leaks out.
                </p>

                <pre class="line-numbers"><code class="language-js">
// MATH_CONSTANT and doug are scoped within the if(){ ... } blocks and unlike var they will not leak out.
if(true){
    let doug = 45;
    const MATH_CONSTANT = Math.PI;
    var jill = 44; // does not care about brackets
}

console.log(jill); // logs 44, because it leaked out of { }

//

try {
    console.log(doug);
    console.log(MATH_CONSTANT);
}catch(e){
    console.log('Can\'t find doug or MATH_CONSTANT');
}
    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Keep in mind, using <code>const</code> does not create an immutable value, it just means
                            that the variable
                            can't
                            be reassigned. Thus, changing the properties in something like an <code>Object</code>
                            or
                            the values in an <code>Array</code> that has been assigned to a <code>const</code> will not
                            throw an error
                            because
                            it is not being reassigned (i.e. the reference/pointer to the value did not change thus no error).</li>
                    </ol>
                </div>

                <p>Today expect to see code that never uses <code>var</code>, favors <code>const</code>, and uses <code>let</code>
                    only when
                    re-assignment is needed (i.e. <code>let score = 0; score = 1;</code> v.s. <code>const pie = 3.14;</code>).
                </p>

                <h3>4.2 : Using blocks to Create Scope (ES2015)</h3>

                <p>Before ES2015 if one needed a unique scope the only option was to use function scope:</p>

                <pre class="line-numbers"><code class="language-js">
// below doug and MATH_CONSTANT are only available with the scope of the function
(function () {
    var doug = 45;
    var MATH_CONSTANT = Math.PI
}());

try {
    console.log(doug);
    console.log(MATH_CONSTANT);
}catch(e){
    console.log('Can\'t find doug or MATH_CONSTANT');
}
    </code></pre>

                <p>Today, given that <code>const</code> and
                    <code>let</code> remain scoped to blocks with no leaking developers can replace
                    <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE ">IIFE</a> with blocks if <code>var</code>
                    is
                    avoided.
                </p>

                <p>So, don't be surprised if you see IIFE's replaced with simple blocks:</p>

                <pre class="line-numbers"><code class="language-js">
// doug and MATH_CONSTANT only available with the scope of the blocks
{
    let doug = 45;
    const MATH_CONSTANT = Math.PI;
}

try {
    console.log(doug);
    console.log(MATH_CONSTANT);
}catch(e){
    console.log('Can\'t find doug or MATH_CONSTANT');
}
    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Keep in mind that the need to construct a private scope is being accomplished today with
                            ES2015
                            modules. Modules have their own module scope by default. In other words, in modern code, ECMAScript modules are already scoped privately simply by creating the file. One does not need to create another private scope on top of that. </li>
                    </ol>
                </div>

                <h3>4.3 : Using Default Function Parameters (ES2015)</h3>

                <p>In the past, if a default value was needed for an argument passed to a function, 
                    boilerplate was needed: </p>

                <pre class="line-numbers"><code class="language-js">
const add = function(x, y) {
    x = x || 0;
    y = y || 0;
    return x + y;
}

console.log(add()) //logs 0
    </code></pre>

                <p>No longer is this the case. It is now possible to give parameters default values when defining a function.
                    The code below is equivalent to the previous code.</p>

                <pre class="line-numbers"><code class="language-js">
const add = function(x = 0, y = 0) {
    return x + y;
}

console.log(add()) //logs 0
</code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Parameter default values are triggered by <code>undefined</code>, not simply a falsely
                            value
                            like
                            <code>null</code> or <code>''</code>.
                        </li>
                        <li>The <code>arguments</code> array, available within the scope of a function, is not affected
                            by
                            default parameters values in any way.
                        </li>
                    </ol>
                </div>

                <h3>4.4 : Using Destructuring Assignments (ES2015)</h3>

                <p>Destructuring is a fancy word for unpacking elements from an array, or characters from a string, or
                    properties
                    from an object and assigning/reassigning them to one or more variables in a terse expression. Below
                    are
                    three code examples of each of these destructuring expressions just mentioned.</p>

                <p>1. Destructuring Strings:</p>

                <pre class="line-numbers"><code class="language-js">
// destructuring Strings characters into the variables a, b, and c
let [a, b, c] = "foo";
console.log(a); // logs f
console.log(b); // logs o
console.log(c); // logs o

/* Could be written
let a;
let b;
let c;
[a, b, c] = "foo"; // i.e. a = 'f', b='o', c='o'
console.log(a); // logs f
console.log(b); // logs o
console.log(c); // logs o
*/
    </code></pre>

                <p>2. Destructuring Arrays:</p>

                <pre class="line-numbers"><code class="language-js">
// destructuring an Array of elements in the variables one, two, and three
let [one, two, three] = [1,2,3];
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3
    </code></pre>

                <p>3. Destructuring Objects:</p>

                <pre class="line-numbers"><code class="language-js">
// destructuring an Object properties in the variables f and l
// i.e. find the property first, assign its value to f. Find property last, assign its value to l.
let { first: f, last: l } = { first: 'Bill', last: 'May' };
console.log(f); // Bill
console.log(l); // May
// The object is used to identify the property and new variable that will hold the properties value

// Note the above code is commonly written using shorthand properties names
let { first, last } = { first: 'Bill', last: 'May' };
console.log(first); // Bill
console.log(last); // May
// This means you omit the : f and : l, and the assignment uses first:first and last:last
// But you don't have to write first:first or last:last, just first and last

/* the above is just shorthand for:

let { first:first, last:last } = { first: 'Bill', last: 'May' };

*/
    </code></pre>

                <p>Don't over think destructuring, it simply is a terse way to take a collection of values and assign
                    those
                    values within the collection to different or new variables.</p>

                    <div class="notes ">

                        <p>
                            <strong>Notes:</strong>
                        </p>
                        <ol>
                            <li>Parentheses are required around object destructuring when the expression is assigning values (i.e. <code>{a, b} = {a: 1, b: 2};</code> will throw an error but <code>({a, b} = {a: 1, b: 2});</code> will not).</li>
                        </ol>
                    </div>

                <h3>4.5 : Using Destructuring With Function Arguments and Parameters (ES2015)</h3>

                <p>Take what you know about destructuring and now apply it to function arguments and parameters.
                    Basically,
                    a function parameter can be written as a collection of identifiers that can destructure String,
                    Array,
                    and Object values. The result is an extremely terse way to unpack Arrays, Objects, or Strings into
                    separate
                    parameters using a single argument.
                </p>

                <p>Array arguments can be destructured:</p>

                <pre class="line-numbers"><code class="language-js">
// assign argument values to identifiers in the first parameter
let func = function([one, two, three]) {
    console.log(one, two, three); 
}
func([1,2,3]);
// Same concept as: let [one, two, three] = [1,2,3]; but using arguments & parameters instead
    </code></pre>

                <p>Object arguments can be destructured (Most Common Usage):</p>

                <pre class="line-numbers"><code class="language-js">
// assign argument values to identifiers in the first parameter
let func = function({ first: f, last: l }) {
    console.log(f,l); 
}
func({ first: 'Bill', last: 'May' });
// Same concept as: let { first: f, last: l } = { first: 'Bill', last: 'May' };
    </code></pre>

                <p>String arguments can be destructured:</p>

                <pre class="line-numbers"><code class="language-js">
// assign argument values to identifiers in the first parameter
let func = function([a, b, c]) {
    console.log(a,b,c); 
}
func('foo');
// Same concept as: let [a, b, c] = "foo";
    </code></pre>

                <p>Destructuring function parameters are a terse way to pass complex data via a single argument and
                    have
                    the argument values be available in the function for immediate use without creating any assignment
                    boilerplate
                    in the function.
                </p>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Destructuring can occur on any parameter.
                        </li>
                    </ol>
                </div>

                <h3>4.6 : Using Default Destructuring Values (ES2015)</h3>

                <p>Destructuring syntax also permits the use of default values so that assignments can have fallback
                    values. In other words if the value you are destructuring is <code>undefined</code> a fall back
                    value can be setup.</p>

                <pre class="line-numbers"><code class="language-js">
// Note: Fallback to default value when destructuring Strings
const [a='f', b='o', c='o'] = '';
console.log(a); // log f
console.log(b); // log o
console.log(c); // log o

// Note: Fallback to default value when destructuring Arrays
const [one=1, two=2, three=3] = [undefined,44,undefined];
console.log(one); // log 1
console.log(two); // log 44
console.log(three); // log 3

// Note: Fallback to default value when destructuring Objects
const { first: f = 'John', last: l = 'Doe' } = { first: 'Mary' };
console.log(f); // log Mary
console.log(l); // log Doe
    </code></pre>

    <p>This will of course also work with when destructuring function arguments</p>

<pre class="line-numbers"><code class="language-js">
// destructuring array argument, with default values
const func1 = function([one=1, two=2, three=3]) {
    console.log(one, two, three); 
}
func1([]);

// destructuring object argument, with default values
const func2 = function({ first: f = 'John', last: l = 'Doe' }) {
    console.log(f,l); 
}
func2({});

// destructuring string argument, with default values
const func3 = function([a = 'f', b = 'o', c = 'o']) {
    console.log(a,b,c); 
}
func3('');
</code></pre>

                <h3>4.7 : Using the Spread Operator (ES2015, ES2018)</h3>

                <p>The spread operator (i.e. <code>...</code>) is used to unpack or expand elements from an Array,
                    properties
                    from an Object, or individual characters from a String, so as to immediately use these individual
                    values
                    in a couple of specific cases. Below I detail these cases. </p>

                <p>1. Arrays can be spread into Array literals or when calling a function:</p>

                <pre class="line-numbers"><code class="language-js">
// spreading an Array into a function call
console.log(...['f', 'o', 'o']); // logs f o o,  like calling console.log('f', 'o', 'o'); 


// spreading Array(s) into an Array literal
console.log([...[1, 2], ...[3, 4, 5]]); // logs [1,2,3,4,5]

    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Spreading Arrays into Array literals is commonly used to clone Arrays, merge Arrays into a
                            new
                            or old Arrays, and spread Array elements into a function call as arguments. Spreading an
                            Array
                            can replaces usages of
                            <code>.concat()</code>.
                        </li>
                    </ol>
                </div>

                <p>2. Object properties can be spread into Object literals:</p>

                <pre class="line-numbers"><code class="language-js">

const obj1 = {bob: true, steve: false};
const obj2 = {lisa: true, bob: false};

// spreading Objects into an object literal
console.log({...obj1, ...obj2}); // logs {bob: false, steve: false, lisa: true}
// Note that last bob value in wins.

    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Spreading objects was added in <a href="http://kangax.github.io/compat-table/es2016plus/#test-object_rest/spread_properties">ES2018</a>.</li>
                        <li>Order matters, last property and value spread wins.</li>
                        <li>Spreading Objects into object literals is commonly used to clone Objects, merge objects
                            into
                            a new or old Objects, or filling in defaults in Objects. Spreading an Object can replace
                            usages
                            of
                            <code>Object.assign({}, obj1, obj2);</code>. </li>
                    </ol>
                </div>

                <p>3. Strings can be spread into Array literals or when calling a function:</p>

                <pre class="line-numbers"><code class="language-js">
// spreading a string into an array
console.log([...'bar']);
// logs ['b','a','r']

// spreading a String into a function call
console.log(...'foo');
// i.e. console.log('f','o','o'); 
// logs f o o 

    </code></pre>

                <h3>4.8 : Using the Rest Operator (ES2015, ES2018)</h3>

                <p>Unfortunately, the rest operator (i.e. <code>...</code>) looks exactly like the spread operator but instead of expanding
                    things
                    it will wrap things up.
                </p>

                <p>The rest operator can be used in the following two cases:</p>

                <p>1. When defining function parameters a rest operator can be used on the last parameter to indicate
                    that
                    any unidentified arguments should be wrapped up into an array.</p>

                <pre class="line-numbers"><code class="language-js">
/* 
By place the ... operator directly in front of the last function parameter the rest 
of the arguments passed to a function besides the ones before the rest parameter 
are wrapped up into an array.
*/
const func = function(param1, param2, ...restOfArguments) { 
    console.log(param1, param2, restOfArguments); 
}
// call func with 7 parameters, but only two are define, the rest are wrapped up into an array
func(1,2,3,4,5,6,7); // logs 1 2 [3, 4, 5, 6, 7]
    </code></pre>

                <p>2. When destructuring, remaining values can be wrapped up too:</p>

                <pre class="line-numbers"><code class="language-js">
// destructuring String characters in the variables a, b, c, and the rest into d Array
const [a, b, c, ...d] = "doggy";
console.log(a); // d
console.log(b); // o
console.log(c); // o
console.log(d); // ["g", "y"]
// Note: use of Array of variables before assignment

// // logs f o o  an Array elements in the variables one, two, three, and the rest in restOfNumbers of Array
const [one, two, three, ...restOfNumbers] = [1, 2, 3, 4, 5, 6];
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3
console.log(restOfNumbers); // [4, 5, 6]

// // logs f o o  an Object properties in the variables f, l, and the rest in restOfProps Object 
const { first: f, last: l, ...restOfProps } = { first: 'Bill', last: 'May', age: 45, living: false };
console.log(f); // Bill
console.log(l); // May
console.log(restOfProps); // { age: 45, living: false }
    </code></pre>

                <p>Careful not to confuse the spread operator with the rest operator. The
                    <code>...</code> operator is identical but the context in which it is used changes how the operator
                    functions.
                    The rest operator is used when defining function parameters and destructuring. The spread operator
                    turns
                    iterable items into arguments for functions, into properties for Object literals, or elements for
                    Array
                    literals.
                </p>

                <h3>4.9 : Using Template Literals (ES2015, ES2016, ES2018)</h3>

                <p> Characters wrapped in backticks (i.e. <code>`string here`</code>) instead of quotes are considered
                    template
                    string literals that return a String value. Template literals support line breaks and interpolation
                    (i.e.
                    a template like syntax for easily inserting values into the string, using <code>${}</code>).</p>

                <p>In the code example below a multi-line string is created from the <code>firstName</code> and <code>lastName</code>
                    variables</p>

                <pre class="line-numbers"><code class="language-js">
let firstName = 'Jane';
let lastName = 'Smith';

console.log(`Hello Mr. ${lastName}!
Welcome!
May I call you ${firstName}?`);

// Note: when log to the console line breaks are honored

/*
"Hello Mr. Smith!
Welcome!
May I call you Jane?"
*/
    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>A backslash is used for escaping inside template literals (e.g. <code>`\${}`</code> becomes
                            <code>'${}'</code>.</li>
                    </ol>
                </div>

                <h3>4.10 : Using Tagged Template Literals (ES2015)</h3>

                <p>Tagged template literals are template literals that get run through a function and passed the
                    template
                    literal details. Commonly a <code>String</code> value is returned from a tag function, but any
                    value can be
                    returned.</p>

                <p>In the code example below the tag function <code>verifyName</code> will use a default name if one of
                    the
                    values passed to the template literal is <code>undefined</code>. Basically, by tagging the template
                    literal with
                    a
                    tag function I make sure it will always have a first and last name even if the values passed to it
                    are
                    undefined.
                </p>

                <pre class="line-numbers"><code class="language-js">
// This is a contrived example highlighting the mechanics of a tag function

let name;

// tag function to adjust string if name is undefined
const verifyName = function(stringsFromTemplate, nameTemplateData) {
    const s = stringsFromTemplate; // In an array

    if(nameTemplateData === undefined){
        return `${s[0]}${'[no name given]'}${s[1]}${'[no name given]'}${s[2]}`
    }else{
        return `${s[0]}${nameTemplateData}${s[1]}${nameTemplateData}${s[2]}`
    }
}

// Use verifyName tagged function with undefined value
let greeting1 = verifyName`Hello ${name}! May I call you ${name}?`
console.log(greeting1); //logs Hello [no name given]! May I call you [no name given]?

name = 'Pat';

// Use verifyName tagged function with defined value
let greeting2 = verifyName`Hello ${name}! May I call you ${name}?`
console.log(greeting2); //logs Hello Pat! May I call you Pat?
    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>JavaScript provides one tag function baked into the language <code>String.Raw()</code></cide>.
                            This tagged function ignores backslashes and returns the raw characters contained in the
                            template
                            literal (e.g.
                            <code>String.raw`\${}`</code> returns
                            <code>'\${}'</code>).</li>
                    </ol>
                </div>

                <h3>4.11 : Using Fat Arrow Function Expressions (ES2015)</h3>

                <p>Today, developers have replaced traditional function expressions like:</p>

                <pre class="line-numbers"><code class="language-js">
const func = function (x) { return x * x; };
        </code></pre>

                <p>with a new syntax that uses a fat arrow (i.e. <code>=&gt;</code>):</p>

                <pre class="line-numbers"><code class="language-js">
const func = x =&gt; x * x ; 
// note: Omitted parenthesis around single parameter and use of implicit return.
// This works fine when you have a single parameter and a single expression to return. 

// a less terse version of the above
const func = (x) =&gt; { return x * x; };

// parenthesis and blocks only required if you have more than one parameter or expression
const func = (x, y) =&gt; { 
    const doubleY = y * 2;
    return z * doubleY; 
};
        </code></pre>

                <p>The previous code examples are similar in that they are function expressions, but the fat arrow
                    function
                    is not a total replacement for functions in general. Fat arrow function expressions are best suited
                    for
                    non-method functions, and they cannot be used as constructor functions (Arrow functions do not have prototypes). In most cases, fat arrow
                    function
                    expressions are used due to their terseness.</p>
                    
                    <p>Fat arrow functions can also provide another
                    benefit
                    besides terseness. They will take on the value of <code>this</code> in the context they are used
                    instead
                    of binding a new <code>this</code> value (i.e. fat error functions provide a lexical
                    <code>this</code>, meaning the <code>this</code> value is determined based on surrounding scope at runtime). </p>

                <p>Have you ever had to hack a reference to <code>this</code> in the function scope chain using a <code>that</code>
                    variable:</p>

                <pre class="line-numbers"><code class="language-js">
// Broken because using this keyword creates a new binding in function(){}

var CounterBroken = function () {
    this.num = 0;
    this.timer = setTimeout(function () {
        // console.log(this); //this, refers to window
        this.num++; // this, does not refer to CounterBroken instance
        console.log(`Broken this = ${this.num}`); //logs Broken this = NaN
    }, 1000);
}

var counterBrokenInstance = new CounterBroken(); // Create an Instance of CounterBroken

// Fixing broken counter constructor using that = this

var CounterFixed = function () {
    var that = this;
    this.num = 0;
    this.timer = setTimeout(function() {
        console.log(that.num); //that = this, from scope above
        that.num++; // this will now work, but a scope chain hack
        console.log(`Fixed this = ${that.num}`); //logs Fixed this = 1
    }, 1000);
}

var counterInstance = new CounterFixed(); // Create an Instance of CounterFixed
</code></pre>

                <p>Using the new fat arrow function you no longer have to write var <code>that = this</code> or perform
                    <code>binding()</code>'s.
                    The fat arrow function provides this by default (i.e. lexically scoped <code>this</code>):</p>

                <pre class="line-numbers"><code class="language-js">
// Remove that = this, just use fat arrow function expression instead

var CounterFixed = function () {
    this.num = 0;
    this.timer = setTimeout(() =&gt; {
        console.log(this.num); // this, is CounterFixed instance
        this.num++; // this refers to what we want now with no hack
        console.log(`Fixed this = ${this.num}`);
    }, 1000);
}

var counterInstance = new CounterFixed();
</code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>"An Arrow Function does not define local bindings for arguments, super, this, or
                            new.target.
                            Any reference to arguments, super, this, or new.target within an ArrowFunction must resolve
                            to
                            a binding in a lexically enclosing environment. " -
                            <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-arrow-function-definitions-runtime-semantics-evaluation ">http://www.ecma-international.org/ecma-262/6.0/#sec-arrow-function-definitions-runtime-semantics-evaluation
                            </a>
                        </li>
                        <li>Forging the use of the blocks in an fat arrow function expression can require the use of
                            parentheses.
                            <code>(e.g. const func = () =&gt; foo();</code> should be written <code>const func = () =&gt; (foo())</code>;
                            and <code>const obj = x =&gt; { bar: x };</code> should be written <code>const obj = x =&gt; ({ bar: x });</code>.</li>
                        <li>The return keyword is implied and can be omitted when using an Arrow function (e.g. <code>let add = (x,y) => x + y</code>)</li>
                    </ol>
                </div>

                <h3>4.12 : Using Trailing Commas (ES2015, ES2017)</h3>

                <p>Trailing commas in the code below are considered valid JavaScript today:</p>

                <pre class="line-numbers"><code class="language-js">
//Trailing comma in Array literal
console.log([1, 2, 3,]) // no error

//Trailing comma in Object literal
console.log({bob: true, steve: false,}) // no error

//Trailing comma in Function parameter definitions
const func1 = ((x,) => { // no error
    console.log(x)
})('cat');

//Trailing comma in Function arguments call
const func2 = ((x) => {
    console.log(x)
})('dog',); // no error

// Trailing comma in array destructuring
const [index0, index1,] = ['bee', 'flee']; // no error
console.log(index0, index1);

// Trailing comma in object destructuring
const {bob:bobsValue, jill:jillsValue,} = {bob: false, jill: true}; // no error
console.log(bobsValue,jillsValue);
            </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Trailing commas are not allowed in JSON.</li>
                        <li>Pragmatically trailing commas can be useful because you don't have to adjust commas anymore
                            when
                            adding new elements, parameters, or properties to JavaScript code. Additionally, not
                            throwing
                            an error on a trailing commas makes version control diffs cleaner and less troublesome.</li>
                        <li>Values using the rest operator may not have a trailing comma e.g. :
                            <br>
                            <br>
                            <code>const [a, ...b,] = [1, 2, 3];</code>
                            <br>
                            <br>and
                            <br>
                            <br>
                            <code>const func = (...p,) => {};</code>
                            <br>
                            <br>this will cause a
                            <code>SyntaxError</code>. </li>
                    </ol>
                </div>

                <h3>4.13 : Using the for-of loop (ES2015)</h3>

                <p>Commonly looping today will be done by way of an Array method like <code>.map()</code> or
                    <code>.forEach()</code>. However, don't be surprised if you see the for-of loop in modern code. It
                    can
                    be used to loop over Strings, Arrays, Maps, Sets, basically anything that is an
                    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol ">iterable</a>
                    value.</p>

                <p>The for-of loop goes through an iterable and assigns each entry in the iterable one at a time to the
                    variable(s)
                    define before the <code>of</code> keyword. </p>

                <p>Looping over Arrays using for-of loop:</p>

                <pre class="line-numbers"><code class="language-js">
const anArray = ['a', 'b', 'c'];
for (const item of anArray) {
    console.log(item); // logs "a", "b", "c "
}
    </code></pre>

                <p>Looping over Strings using for-of loop:</p>

                <pre class="line-numbers"><code class="language-js">
const aString = 'cat';
for (const character of aString) {
    console.log(character); // logs "c", "a", "t "
}
    </code></pre>

                <p>Looping over Maps using for-of loop:</p>

                <pre class="line-numbers"><code class="language-js">
// create a new Map called myMap and preload it with key-value entries
const myMap = new Map([
    ['key1', 'value1'], 
    ['key2', 'value2']
]);

// Use for-of loop to loop over Map
for (const entry of myMap){
    console.log(entry);
    // logs:
    // ["key1", "value1"]
    // ["key2", "value2"]
}
    </code></pre>

    <p>As of ES2017 one can use <code>Object.entries()</code> and destructuring with the for-of loop
        to
        loop over Object literals.:</p>

<pre class="line-numbers"><code class="language-js">
const arr = ['zero', 'one']; 

for (const [index, element] of arr.entries()) { 
    console.log(index, element); 
}

// above logs 0 "zero" 
// above logs 1 "one"

</code></pre>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        
                        <li>The for-of loop provides similar terseness found with Array looping methods but also
                            supports
                            <code>break</code> and
                            <code>continue</code>.</li>
                    </ol>
                </div>

                <h3>4.14 : Using Shorthand Property Names (ES2015)</h3>

                <p>When defining an object literal if the colon and value are omitted the value from a similarly named
                    variable
                    within the same scope will be used. In the code below the <code>const</code> <code>myNumber</code>
                    value is used for the <code>myNumber</code> property value in the <code>myObjectLiteral</code>
                    object.</p>

                <pre class="line-numbers"><code class="language-js">
const myNumber = 1;

const myObjectLiteral = {
    myNumber, // notice all I put here was a property name
    // the above is shorthand for myNumber : myNumber
};

console.log(myObjectLiteral); // Logs Object {myNumber: 1}
    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Shorthand property names are often used in combination with destructuring.</li>

                    </ol>
                </div>

                <h3>4.15 : Using Shorthand Method Names (ES2015)</h3>

                <p>When adding methods (i.e. functions) to object literals a new terser syntax is possible.</p>

                <p>This is the old non-short syntax:</p>

                <pre class="line-numbers"><code class="language-js">
const myObjectLiteral = {
    myMethod: function(parameters){
        return;
    }     
};
    </code></pre>

                <p>This is the new shorthand syntax.</p>

                <pre class="line-numbers"><code class="language-js">
const myObjectLiteral = {
    myMethod(parameters){
        return;
    }
};
    </code></pre>

                <p>Which saves you from having to write, <code>: function</code>.</p>

                <p>Note how similar this new syntax is to getters and setters from ES5:</p>

                <pre class="line-numbers"><code class="language-js">
const myObjectLiteralWithGetterAndSetter = {
    set myMethod(parameters){
      return;
    },
  
    get myMethod(){
      return;
    },
};
    </code></pre>

                <h3>4.16 : Using Computed Property Names (ES2015)</h3>

                <p>Using brackets around property names/keys will permit the name/key to be a result of an expression.</p>

                <pre class="line-numbers"><code class="language-js">
const prop = 'prop';

// define an object literal with name/keys that are the result of an experssion
const myObject = {
    // note property keys/names are computed
    [prop + 1]: 1,
    [prop + '2']: 2 
}

console.log(myObject);

/* logs

[object Object] {
    prop1: 1,
    prop2: 2
}

*/
    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>This is similar to the
                            <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation ">bracket
                                notation
                            </a> that can be used to access a key/property on an object from a computed property name.</li>

                    </ol>
                </div>

                <hr>

            </div>

            <div id="chapter5" class="chapter">


                    <h2>Chapter 5 : ES2015 Map() and Set()</h2>


                    <section class="sub">
    
                            <p>This chapter will cover usages for the new <code>Map()</code> and <code>Set()</code> objects.</p>
                </section>

                <h3>5.1 : Using Maps instead of Object Literals (ES2015)</h3>

                <p>ES2015 comes with <code>Map()</code>. Maps are key-value pairs stored in insertion order. Sounds a
                    lot like an
                    object right (i.e. <code>{key1:value1, key2:value2}</code>)? Think of Maps as objects but with a built-in
                    native API for working with the object and its key-value pairs. </p>

                <p>Examine the code below to gain a basic overview of the creation and usage of a <code>Map</code>. Note that most
                    of
                    the built in methods for <code>Map()</code> are demonstrated (e.g. <code>clear()</code>, <code>entries()</code>,
                    <code>forEach()</code>,
                    <code>get()</code>,
                    <code>has()</code>,
                    <code>keys()</code>, <code>set()</code>, <code>values()</code>).</p>

                <pre class="line-numbers"><code class="language-js">
// create a new Map called myMap
// Preload myMap with key-value entries, as an Array, contained in an Array
const myMap = new Map([
    ['key1', 'value1'], 
    ['key2', 'value2']
]);

// .forEach()
// loop over each entry in the Map using Map's forEach() method
myMap.forEach((value, key) => {
    console.log(`${key} = ${value}`);
}); // logs "key1 = value1 " "key2 = value2 "

// .entries()
// List of all key-value pairs, spreading into console log
console.log(...myMap.entries()) // logs ["key1", "value1"] ["key2", "value2"]

// .keys()
// List of all keys, spreading into console log
console.log(...myMap.keys()) // logs "key1" "key2 "

// .values()
// List of all values, spreading into console log
console.log(...myMap.values()) // logs "value1" "value2 "

// .set()
// Set a key-value pair
myMap.set('key3', 'value3');

// .get()
// Get a key-value pair
console.log(myMap.get('key3')); // logs "value3"

// .has()
// Does a key have a value yet
console.log(myMap.has('key3')); // logs true

// .delete()
//Delete a key-value pair, by key
myMap.delete('key3')
console.log(myMap.has('key3')) // logs false

// .clear()
//Clear all key-value pairs
myMap.clear();

// .size()
//Get current size of map (i.e. number of entires)
console.log(myMap.size) // logs 0, because you just cleared the Map of entries
    </code></pre>

                <p>Don't forget when using a <code>Map()</code> the key can be any value:</p>

                <pre class="line-numbers"><code class="language-js">
const myMap = new Map([
    ['key1', 'some value for key 1'],
    [2, 2],
    [[1], [1,2,3]],
    [{id:1}, {prop1:'value',prop2:'value'}],
]);

myMap.forEach( (value, key) => {
    
    console.log(`${key} = ${value}`);
    // logs:
    //
    // "key1=s ome value for key 1"
    // "2=2"
    // "1=1,2,3"
    // "[object Object]=[ object Object]"
    
});
    </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Until ES2015 Object literals we're the substitute for a Map. Obviously a real Map provides
                            more
                            features and out of the box
                            <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map ">methods</a>
                            for working with key-value pairs.</li>
                        <li>Maps can be looped over using the for-of loop.</li>
                        <li>The key and the value can both be any type of value, unlike Object literals in which the
                            key
                            is typically a string.</li>
                        <li>When should you use Maps over object literals? Use a Map when you are performing a lot of
                            work
                            on the entries and the built in methods make everything simpler (<code>clear()</code>,
                            <code>entries()</code>,
                            <code>forEach()</code>,
                            <code>get()</code>,
                            <code>has()</code>,
                            <code>keys()</code>, <code>set()</code>, <code>values()</code>).</li>
                        <li>The <code>.set()</code> method returns the Map. Thus, <code>.set()</code> can be chained
                            (i.e.
                            <code>myMap.set(key,value).add(key,value);</code>).</li>
                        <li>If you want to use Array methods on a Map simply spread the map into an array (i.e. <code>[...myMap].filter(...);</code>).</li>
                        <li>A narrow version of <code>Map()</code> is also available called <code>weakMap()</code>. A
                            <code>weakMap()</code>, mainly differs from a <code>Map()</code> in that it can only hold
                            values that are objects and when a value is removed from a <code>weakMap()</code>, and it
                            has no other references, the value will immediately be garbage collected (aka weak
                            references). Additionally a <code>weakMap()</code> can't be iterated over, uses <code>.length</code>
                            to get size of the map, and only has <code>set()</code>, <code>delete()</code>, <code>get()</code>
                            , and <code>has()</code> methods.</li>
                    </ol>
                </div>

                <h3>5.2 : Using Sets to create Arrays, with no Duplicates (ES2015)</h3>

                <p>ES2015 comes with <code>Set()</code>. Sets are values stored in a specific order that can't contain
                    a duplicate.
                    Sounds
                    a bit like an Array object right (i.e. <code>[value, value]</code>)? Think of Sets as Arrays but
                    with
                    a built in API for working with the items in the Array and the bonus of automatically eliminating
                    duplicates.
                </p>

                <p>Examine the code below to gain a basic overview of the creation and usage of a Set. Note that most
                    of
                    the built in methods for <code>Set()</code> are demonstrated (e.g. <code>clear()</code>, <code>entries()</code>,
                    <code>forEach()</code>,
                    <code>has()</code>,
                    <code>keys()</code>, <code>add()</code>, <code>values()</code>).</p>

                <pre class="line-numbers"><code class="language-js">
// create a new Set called mySet and preload it with values using an array/iterable
// Note: that duplicates are removed when creating new Sets and adding values
const mySet = new Set(['one', 'two', 'three', 'three']);

// .forEach()
// loop over each value in the Set using Set's forEach() method
mySet.forEach((value) => console.log(value)); // logs "one" "two" "three"

// .entries()
// Note this uses each value as both the key and the value.
// List of all value entries, spreading into console log
console.log(...mySet.entries()) // logs ["one", "one"] ["two", "two"] etc...

// .keys()
// List of all keys (same func as values()), spreading into console log
console.log(...mySet.keys()) // logs "one" "two" "three"

// .values()
// List of all values, spreading into console log
console.log(...mySet.values()) // logs "one" "two" "three"

// .has()
// Does a Set have a specific value
console.log(mySet.has('three')); // logs true

// .add()
// Add 'four' and 'three' to the Set.
console.log(...mySet.add('three')); // logs "one" "two" "three"
console.log(...mySet.add('four')); // logs "one" "two" "three" "four"
// Note adding 'three' to a Set will not create a duplicate, as 'three' is a duplicate

// .delete()
//Delete a value
mySet.delete('four')
console.log(mySet.has('four')) // logs false

// .clear()
//Clear all ordered values
mySet.clear();

// .size()
//Get current size of Set (i.e. number of values)
console.log(mySet.size) // logs 0, because you just cleared the Set of values
        </code></pre>

                <div class="notes ">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>The <code>.add()</code> method returns the Set. Thus, <code>.add()</code> can be chained
                            (i.e.
                            <code>mySet.add('one').add('two');</code>).</li>
                        <li>If you want to use Array methods on a Set simply spread the set into an array (i.e. <code>[...mySet].filter(...);</code>).</li>
                        <li>A narrow version of <code>Set()</code> is also available called <code>weakSet()</code>.
                            A <code>weakSet()</code>, mainly differs from a <code>Set()</code> in that it can only hold
                            values that are objects and when a value is removed from a <code>weakSet()</code>, and it
                            has no other references, the value will be garbage collected (aka weak references).
                            Additionally a <code>weakSet()</code> can't be iterated over, uses <code>.length</code> to
                            get size of the set, and only has <code>add()</code>, <code>delete()</code>, and <code>has()</code>
                            methods.</li>
                    </ol>
                </div>

            </div>

            <div id="chapter6" class="chapter">

                <h2>Chapter 6 : ES2015 Class Syntax</h2>

                <section class="sub">

                    <p>This chapter will discuss the ES2015 <code>class</code> syntactical sugar which conceals
                        JavaScripts
                        clunky object inheritance model.</p>
                </section>

                <h3>6.1 : What <code>class</code> Syntax Conceals</h3>

                <p>ES2105 <code>class</code> syntax is a cleaner way to work with prototypal inheritance and object
                    factories.
                    The <code>class</code>, <code>extend</code>, <code>constructor</code>, <code>super</code>, and
                    <code>static</code> keywords
                    simplify and conceal what was already possible with JavaScript.</p>

                <p>Before <code>class</code> syntax was available <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance#Prototypal_inheritance">working
                        with object constructors and prototypal inheritance, to mimic class's from other OOP languages,</a>
                    was done in the following way:</p>

                <pre class="line-numbers"><code class="language-js"> 
// Create a Human class, i.e. an object factory for Human instances
function Human(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

// Instances created from Human constructor have a fullName method
Human.prototype.fullName = function () {
    return `${this.firstName} ${this.lastName}`;
};

// Create a Developer class
function Developer(firstName, lastName, type) {
    Human.call(this, firstName, lastName);
    this.type = type;
}

// Have Developer inherit from Human, by creating an object that inherits from Humans prototype
Developer.prototype = Object.create(Human.prototype);

// Make the constructor property point at Developer, not Human
Developer.prototype.constructor = Developer;

// Instances created from Developer constructor have a fullNameAndLanguage method
Developer.prototype.fullNameAndLanguage = function () {
    return `${Human.prototype.fullName.call(this)} develops ${this.type}`;
};

// Add static helper function to Developer
Developer.isJSdev = function(cody){
    return cody.language.toLowerCase() === 'javascript';
};

// Create an instance of Developer
const cody = new Developer('Cody', 'Lindley', 'JavaScript');

// Call fullNameAndLanguage() method
console.log(cody.fullNameAndLanguage()); // logs "Cody Lindley develops JavaScript"

// Call fullName() method
console.log(cody.fullName()); // logs "Cody Lindley"

// Call static type of Developer
console.log(Developer.isJSdev(cody)); // logs true    
</code></pre>

                <p><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">Using
                        ES2015
                        <code>class</code> syntax</a> the above can be re-written like so:</p>

                <pre class="line-numbers"><code class="language-js"> 
// Create a Human class, i.e. an object factory
class Human {
    constructor (firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    // Instances created from Human constructor have a fullName method
    fullName(){
        return `${this.firstName} ${this.lastName}`;
    }
}

// Create a Developer class
class Developer extends Human { // Have Developer inherit from Human
    constructor (firstName, lastName, type) {
        super(firstName, lastName); // call Human constructor but in this context
        this.type = type;
    }
    // Instances created from Developer constructor have a fullNameAndLanguage method
    fullNameAndLanguage(){
        return `${super.fullName()} develops ${this.type}`;
    }
    // Add static helper function to Developer
    static isJSdev (cody){
        return cody.language.toLowerCase() === 'javascript';
    }
}

// Create an instance of Developer
let cody = new Developer('Cody', 'Lindley', 'JavaScript');

// Call fullNameAndLanguage() method
console.log(cody.fullNameAndLanguage()); // logs "Cody Lindley develops JavaScript"

// Call fullName() method
console.log(cody.fullName()); // logs "Cody Lindley"

// Call static type of Developer
console.log(Developer.isJSdev(cody)); // logs true
</code></pre>

                <p>The details of a <code>class</code> object will be broken down in this chapter. For now, you should
                    observe
                    from the newer
                    <code>class</code> syntax the following:</p>

                <ol>
                    <li>The use of the <code>class</code>, <code>extend</code>, <code>constructor</code>, <code>super</code>,
                        and <code>static</code> keywords that were added to JavaScript to simplify prototypal
                        inheritance for
                        object-oriented
                        minded developers (i.e. cleaner, concealing prototypal nuances, less boilerplate).
                    </li>
                    <li>The use of shorthand method names within the <code>class</code> object. Which is the only
                        option!</li>
                    <li>No commas separating the <code>constructor</code> function, method functions, or <code>static</code>
                        method
                        functions in the class object.</li>
                    <li>Notice how <code>prototype</code> boilerplate is eliminated and referencing an inherited class
                        is
                        trivial using <code>super</code>.</li>
                </ol>

                <h3>6.2 : The <code>class</code> Expression v.s. <code>class</code> Declaration</h3>

                <p>A class can be defined using either a class declaration or class expression.</p>

                <p>A class declaration:</p>

                <pre class="line-numbers"><code class="language-js"> 
class Human {
    constructor (firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    // class name can be used to reference the class inside the class object
    classMethod (){
        console.log(Human); // logs out class object backing property function
    }
}

const jill = new Human();

// call classMethod and log to the console reference to class, from inside of the class
jill.classMethod();
                </code></pre>

                <p>A class expression:</p>

                <pre class="line-numbers"><code class="language-js"> 
const Human = class optionalClassNameForReferenceInClassMethods {
    constructor (firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    // the optional name can be used to reference the class inside the class object
    classMethod (){
        // logs out class object backing property function
        console.log(optionalClassNameForReferenceInClassMethods);
    }
}

const jill = new Human();

// call classMethod and log to the console reference to class, from inside of the class
jill.classMethod();
                </code></pre>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Class declarations are not hoisted.</li>
                        <li>Both class declarations and class expression bodies are executed in strict mode.</li>
                        <li>A class declaration can be declared once and any other declarations will throw a type
                            error.
                            A class expression can be re-defined to another class expression but not a class
                            declaration.
                            Doing so will also throw a type error.</li>
                        <li>A class can not be called without the <code>new</code> keyword.</li>
                        <li>When using class syntax the prototype of the class (e.g. <code>Human.prototype</code>) is
                            read-only.</li>
                        <li>Class definitions are first class citizens (i.e. you can pass them to functions, return a
                            class from a function, and assigned them to variables).</li>
                    </ol>
                </div>

                <h3>6.3 : Using a Class <code>constructor</code> Method</h3>

                <p>Each <code>class</code> definition can have exactly one <code>constructor</code> function that is
                    invoked
                    when an instance of the class is instantiated. Typically, the <code>constructor</code> function
                    will
                    define the initial properties for instances created from the class.</p>

                <pre class="line-numbers"><code class="language-js">
// create a Human class that expects a first and last name value when instantiated
class Human {
    constructor (firstName, lastName) {
        console.log('constructing');
        // the this keyword, used below, is the new object create when calling Human
        this.firstName = firstName; // create a firstName property and give it a value
        this.lastName = lastName; // create a lastName property and give it a value
    }
}

const may = new Human('May','Jones'); // logs 'constructing'

console.log(may); 
/* logs:
[object Object] {
    firstName: "May",
    lastName: "Jones"
  }
*/
                        </code></pre>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>A constructor function is optional. If you omit one, a blank constructor is created for you
                            (i.e.
                            <code>constructor(){}</code>).</li>
                        <li>The keyword <code>super()</code>, within the <code>constructor</code> is used to call the
                            parent
                            class (i.e. the class, a class inherits or is <code>extend</code>'ed from).</li>
                    </ol>
                </div>

                <h3>6.4 : Using a Class Method</h3>

                <p>Class methods can be called on instances of the class. When called, the method of the class uses the
                    values
                    defined on the instance via the <code>this</code> keyword.</p>

                <pre class="line-numbers"><code class="language-js">
// create a Human class that is passed a first and last name value when instantiated
class Human {
    constructor (firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    // Instances created from Human class have a fullName class method
    fullName(){
        // this inside a class method refers to the instance the method is called on
        return `${this.firstName} ${this.lastName}`;
    }
}

const may = new Human('May','Jones'); // may is an instance of the Human class
const bill = new Human('Bill','Jones'); // bill is an instance of the Human class

console.log(may.fullName()); // logs "May Jones"
console.log(bill.fullName()); // logs "Bill Jones"
    </code></pre>

                <p>The <code>fullName</code> class method is defined once for all instances.</p>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Class methods are non-enumerable by default.</li>
                        <li>Class methods are written using the shorthand method naming.</li>
                        <li>The keyword <code>super.[class method]</code> within a class method can reference and or
                            call
                            the methods of the parent class (i.e. the class, a class inherits or is <code>extend</code>'ed
                            from).
                        </li>
                        <li>Getters and Setters (aka Accessors descriptors or computed properties) can be used on class
                            methods
                            (i.e. <code>class MyClass { get MyMethod(){...} set MyMethod(x){...} }</code>).</li>
                        <li>Computed property names can be used within class definitions (i.e. <code>['method'+'Name'](){ ... })</code>.</li>
                    </ol>
                </div>

                <h3>6.5 : Using a <code>static</code> Class Method</h3>

                <p>While class methods are called on instances of a class, <code>static</code> class methods are called
                    from
                    the class itself. Don't over think this setup. This is the different between something like <code>Array.isArray()</code>
                    and
                    <code>[].forEach()</code>. <code>Array.isArray()</code> is a static method on the Array "class"
                    itself
                    while
                    <code>[].forEach()</code> is a "class" method called on instances of an Array</p>

                <pre class="line-numbers"><code class="language-js">
// Define a Human class with a static method
class Human {
    static isHuman(classInstance){
        // is the constructor of the classInstance the same as this class i.e. Human = Human,
        return classInstance.constructor === this;
    }
}

// create an instance of the Human class
var pat = new Human();

// call static method on Human class
Human.isHuman(pat); // logs true

    </code></pre>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Static methods are also inherited.</li>
                        <li>From within a static method, you can refer to other static methods with <code>this.staticMethodName</code>.
                            But inside a constructor or class method you will have to either use <code>ClassName.staticMethodName</code>
                            or
                            <code>this.constructor.staticMethodName</code>.</li>
                    </ol>
                </div>

                <h3>6.6 : Using <code>extend</code> to Inherit Methods from Another Class</h3>

                <p>A class can be sub-classed (i.e. Human &gt; Developer) when using the <code>extend</code> keyword
                    upon
                    definition. For example, in the code below when defining the <code>Developer</code> class we use
                    the
                    <code>extend</code> keyword to link/inherit the parent <code>Human</code> class to the child <code>Developer</code>
                    class.
                </p>

                <pre class="line-numbers"><code class="language-js">
// Create a Human class, i.e. an object factory
class Human {
    constructor (firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    // Instances created from Human constructor have a fullName method
    fullName(){
        return `${this.firstName} ${this.lastName}`;
    }
}

// Create a Developer class
class Developer extends Human {
    constructor (firstName, lastName, type) {
        super(firstName, lastName); // like calling Human.call(this, firstName, lastName);
        this.type = type;
    }
}

// Create an instance of Developer
let cody = new Developer('Cody', 'Lindley', 'JavaScript');

// Call fullName() method, inherited from Human Class
console.log(cody.fullName()); // logs "Cody Lindley"    
    </code></pre>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Built-in objects can be extended or sub-classed not just user-defined classes.</li>
                        <li>This inheritance link gives scope access to <code>Human</code> from <code>Developer</code>
                            using
                            the keyword <code>super</code>.</li>
                        <li>If a sub-class is missing a constructor, the parent constructor is called. If a sub-class
                            does
                            have a constructor, it will need to call <code>super()</code> with the expected arguments to
                            call
                            the parent's constructor.
                        </li>
                    </ol>
                </div>

                <h3>6.7 : Using <code>super</code> to Call the Inherited Constructor</h3>

                <p>The <code>super</code> keyword within a constructor method is used to invoke the parent class from
                    the
                    child class. This invocation setups the needed properties for inherited methods to run correctly.</p>

                <pre class="line-numbers"><code class="language-js">
// Create a Human class, that other class's will use as a parent class
class Human {
    constructor (firstName, lastName) {
        console.log('Super() called this constructor from child Class');
        this.firstName = firstName;
        this.lastName = lastName;
    }
    // Instances created from Human constructor have a fullName method
    fullName(){
        return `${this.firstName} ${this.lastName}`;
    }
}

// Create a Developer class, that is a child class of Human
class Developer extends Human {
    constructor (firstName, lastName, type) {
        // super has to be used first, if used
        super(firstName, lastName); // like calling Human.call(this, firstName, lastName);
        // the above, using a parent constructor, does this:
        // this.firstName = firstName;
        // this.lastName = lastName;

        this.type = type;
    }
}

// Create a Lawyer class, that is a child class of Human
class Lawyer extends Human {
    constructor (firstName, lastName, type) {
        // super has to be used first, if used
        super(firstName, lastName); // like calling Human.call(this, firstName, lastName);
        // the above, using a parent constructor, does this:
        // this.firstName = firstName;
        // this.lastName = lastName;
        
        this.type = type;
    }
}

// Create an instance of Developer, both the Developer and Human constructors are invoked.
const cody = new Developer('Cody', 'Lindley', 'JavaScript');
console.log(cody.fullName()) 
// works because Developer has a firstName and lastName setup by calling super()

// Create an instance of Lawyer, both the Lawyer and Human constructors are invoked.
const lisa = new Lawyer('Lisa', 'Lindley', 'Criminal');
console.log(lisa.fullName()) 
// works because Lawyer has a firstName and lastName setup by calling super()

    </code></pre>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>The <code>super</code> keyword should be the first expression in a constructor function
                            (i.e.
                            before the <code>this</code> keyword is used). </li>
                    </ol>
                </div>

                <h3>6.8 : Using <code>super</code> to reference Inherited Methods</h3>

                <p>The <code>super</code> keyword when used within a class method or static method will be a reference
                    to
                    the parent class's methods.
                </p>

                <pre class="line-numbers"><code class="language-js">
class Human {
    constructor (firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    fullName(){
        return `${this.firstName} ${this.lastName}`;
    }
}

class Developer extends Human { // Have Developer inherit from Human
    constructor (firstName, lastName, type) {
        super(firstName, lastName);
        this.type = type;
    }
    fullNameAndLanguage(){
        // use super keyword to reference parent class method, and invoke it.
        return `${super.fullName()} develops ${this.type}`;

        // Note referencing super alone will throw an error i.e. console.log(super);
    }
}

// Create an instance of Developer
const cody = new Developer('Cody', 'Lindley', 'JavaScript');

// Call fullNameAndLanguage() method
console.log(cody.fullNameAndLanguage()); // logs "Cody Lindley develops JavaScript"
    </code></pre>

                <h3>6.9 : Extending JavaScript Built-in's and Web API Constructors/Classes using <code>class</code>
                    Syntax.</h3>

                <p>Before ES2015 class syntax sub-classing/extending a built in constructor/class like <code>Array()</code>
                    had <a href="http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/">significant
                        limitations</a>.</p>

                <p>Today, extending the JavaScript <code>Array()</code> class is trivial using class syntax.</p>

                <pre class="line-numbers"><code class="language-js noRun">
class MyCustomArray extends Array{
    customEntriesMethod(){
        return Object.entries(this);
    }
}

let myCustomArrayInstance = new MyCustomArray('one', 'two', 'three');

myCustomArrayInstance.push('four');

console.log(myCustomArrayInstance.customEntriesMethod());
// logs [["0", "one"], ["1", "two"], ["2", "three"], ["3", "four"]]
    </code></pre>

                <p>Even, JavaScript web API's like the DOM can be extended.</p>


                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>If you run the above code through Babel is will break. Sub-classing constructors/classes
                            has to be supported natively. Transpiling and polyfilling
                            can't help and in fact, will break the code. The environment either supports extending
                            built-in classes/object or it does not. If you extend natives make sure you are not also
                            babel'ifying/transpiling the code.</li>
                    </ol>
                </div>


            </div>

            <div id="chapter7" class="chapter">

                <h2>Chapter 7 : ES2015 Promises</h2>


                <section class="sub">

                    <p>This chapter will examine the need for JavaScript Promises and then explain their usage.</p>
                </section>

                <h3>7.1 : Asynchronous Programming Basics</h3>

                <p>Code that does not run completely as part of a normal execution cycle is said to run asynchronously.
                    Asynchronously executed
                    code in this context basically means that one defines code now to occur later in the future while
                    not blocking other code from running synchronously. The
                    simplest
                    example of this is <code>setTimeout()</code>.</p>

                <pre class="line-numbers"><code class="language-js">
// execute the passed function in 10'ish seconds in the future
setTimeout(() => console.log('Ten seconds ago, you ask me to run this code'), 10000);

// But keep executing code, don't wait for 10secs, and block all code execution
console.log('I am not delayed by 10 seconds from running');
        </code></pre>

                <p>The function passed to <code>setTimeout()</code> is known as an asynchronous callback function. This function will
                    run
                    10'ish seconds in the future without blocking other code from running. Consider that the <code>setTimeout()</code> function argument is not all that different from a callback function for a click event or a callback function used to capture the response from an <code>XMLHttpRequest</code> network request.</p>

                <p>Basically, when you ask JavaScript to wait to run some code, while not blocking the rest of the program from running, you are dealing with asynchronous code.</p>

                    <div class="notes">

                        <p>
                            <strong>Notes:</strong>
                        </p>
                        <ol>
                            <li>An in-depth understanding of asynchronous programming in JavaScript requires an understanding of the call stack and the event-loop. Here is a simple and concise review of these parts, <a href="https://vimeo.com/96425312">"Help, I'm stuck in an event-loop."</a>. If you've struggled in the past with understanding promises it is likly because you lack the foundational information found in the aforementioned video.</li>
                        </ol>
                    </div>

                <h3>7.2 : Asynchronous Programming Before ES2015 (Or, Why Promises?)</h3>

                <p>Callback functions
                    before
                    ES2015 were the typical means in which one dealt with asynchronous programming situations. And even
                    today, a
                    simple
                    callback function works just fine in many situations (e.g. the user clicks on a button and the
                    corresponding
                    callback function is run asynchronously).</p>

                <p>However, asynchronous situations do exits that make using callback functions buggy and laborious.
                    These
                    situations can involve complex network exchanges found between a client and a server. Imagine
                    you
                    need
                    to make five different requests to the server from the client and the requests have a complex relationship with each other. For example, imagine
                    that the
                    first
                    request has to finish before the second and third request can begin. And both the second and third
                    request
                    have to finish before the fourth and fifth request can begin. And, the fourth and fifth request
                    are not both required to be finished, you only need one to finish, whichever one is first. Also imagine, for each
                    request you
                    have to create an
                    error
                    handling situation. </p>
                    
                    <p>I hope you can see that using callbacks alone, to complete the task just mentioned, using something like the <code>XMLHttpRequest</code>
                    web
                    API will either lead to a pyramid of callback functions:
                    
<pre class="line-numbers"><code class="language-js noRun">
// A function within a function within a function within a function etc... 

getData1(function(x){
    ...
    getMoreData2(x, function(y){
        ...
        getMoreData3(y, function(z){ 
            // on and on it could go
        });

    });

})();

// oh no the pyramid of doom!

</code></pre>
                    
                    <p>Or, a long
                    list of
                    linked callback functions: 

<pre class="line-numbers"><code class="language-js noRun">
// function 1 calls function 2, function 2 calls function 3 etc...

getData1(function(x){
    ...
    getMoreData2(x)
})();

getData2(function(y){
    ...
    getMoreData3(y)
});

getData3(function(z){
    // on and on it could go
});

</code></pre>
                    
                    <p>Either way, many consider this situation, callback hell.</p>

                <p>To combated the complexity of complicated asynchronous programming and avoid callback hell ES2015 provided the native
                    Promise API as an alternative to callback functions alone. The remainder of this chapter will cover the new Promise API in further detail.</p>


                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Originally, promises were called "Futures" and were a part of the DOM spec. Thankfully, in the end it ended up in the ECMAScript specification so all JavaScript runtimes could use Promises
                            for asynchronous programming.</li>
                        <li>Unfortunately, IE does not support promises and it will have to be <a href="https://github.com/zloirock/core-js#ecmascript-promise">polyfilled</a> if you need IE support. However the Edge browser (12+) does have support.</li>
                    </ol>
                </div>

                <h3>7.3 : Producing & Consuming a <code>Promise</code></h3>

                <p>An instance of a <code>Promise</code> is basically a function that typically houses asynchronous routines with two special functions to be called once the asynchronous work either completes or fails (i.e. <code>resolve()</code> or <code>reject()</code>). In short, a Promise provides the boilerplate around asynchronous code which results in an interface/methods for working with asynchronous code. Consider the methods and static methods provided by Promises:</p>

                <ul>
                    <li><code>Promise.all()</code></li>
                    <li><code>Promise.prototype.then()</code></li>
                    <li><code>Promise.prototype.catch()</code></li>
                    <li><code>Promise.prototype.finally()</code> (<a href="http://kangax.github.io/compat-table/es2016plus/#test-Promise.prototype.finally">ES2018</a>)</li>
                    <li><code>Promise.race()</code></li>
                    <li><code>Promise.reject()</code></li>
                    <li><code>Promise.resolve()</code></li>
                </ul>

                <p>These methods and static methods provide a cleaner API when dealing with complicated relationships among asynchronous code.</p>

                <p>To produce a promise one only need to construct an instance of a promise from the <code>Promise</code> constructor passing the constructor one argument known as the executor function. The executor function is passed two argument functions, the first is called <code>resolve</code>, and the second argument is called <code>reject</code>.</p>

<pre class="line-numbers"><code class="language-js">
// Create a Promise called myPromise
const myPromise = new Promise(
    (resolve, reject) => { // this is an executor function
        try{ 
            // do some async work, like an XHR request or a setTimeout()
            // ...
            // then call resolve() when done, pass it some data
            setTimeout(function(){resolve('foo');}, 1000);
            // comment out the line above and un-comment line below to see error thrown
            // foo;
        }catch(error){
            // if an error occurred, call reject()
            reject(error);
        }
    }
);

// Consume myPromise
myPromise.then( // takes two functions, 
    // if promise calls resolve() this first function is called
    (data) => { console.log(data); }, // logs 'foo'
    // if promise calls reject() this second function is called
    (error) => { console.log(error.toString()) } // logs Error
);

</code></pre>

                <p>Let's take the promise API for a spin. In the code example below I am wrapping a <code>Promise</code> around the older <code>XMLHttpRequest</code> object and concealing its older callback function API in order to create a mini Github Promise based API.</p>


<pre class="line-numbers"><code class="language-js">
// Create a function that will return a Promise

const getGitHubData = (gitHubRESTPath) => {
    // return a Promise so the .then() method can be called on returned value
    return new Promise((resolve, reject) => { // this is the executer function
        // start asynchronous work
        const xhr = new XMLHttpRequest();
        xhr.onload = function () { // callback function
            if (this.status === 200) {
                // call resolve() with async results when async work is done
                resolve(this.response);
            } else {
                // call reject() with statusText if server returns anything but a 200
                reject(this.statusText);
            }
        };
        xhr.onerror = function () { // callback function
            // call reject() with error message if XHR errors occur
            reject('XHR Error:');
        };
        xhr.open('GET', 'https://api.github.com/' + gitHubRESTPath);
        xhr.send();
    });
    
};

// Now call getGitHubData() and consumer the Promise wrapped around XMLHttpRequest

// Get number of stars for React on github
getGitHubData('repos/facebook/react').then( // use then() to consume the eventual results
    //resolve function
    (response) => {
        // convert the JSON string response to a JS object
        console.log(JSON.parse(response).stargazers_count); // logs 11XXXX
    },
    //reject function
    (error) => {
        console.log(error);
    }
);

// Send a bad URL, to see reject function run
getGitHubData('repos/nothing/nothing').then( // use then() to consume the eventual results
    //resolve function
    (response) => {
        // convert the JSON string response to a JS object
        console.log(JSON.parse(response).stargazers_count);
    },
    //reject function
    (error) => {
        console.log(error); // logs 'Not Found'
    }
);

</code></pre>

<p>By wrapping the <code>Promise</code> itself with the <code>getGitHubData</code> function I can call the <code>getGitHubData</code> function like an API. The "mini api" provides a cleaner interface for working with asynchronous HTTP requests to the Github REST API because a Promise is used/returned.</p>
                    
                    <p>To consume the returned promise the <code>then()</code> method is used to capture both the resolution of the asynchronous code and potentially any resulting errors (i.e. <code>then()</code> takes two arguments. First argument is resolution function, called when promise is resolved, second is a rejection function, called if the promise is rejected).</p>


<div class="notes">

    <p>
        <strong>Notes:</strong>
    </p>
    <ol>
        <li>The executor function pass to <code>Promise()</code> is called before the Promise constructor returns the created object.</li>
        <li>If an error is thrown in the executor function the promise is rejected.</li>
        <li>Promises have three states or life cycles (pending > resolved || rejected > settled). The promise starts in a pending state. Then it either moves to a fulfilled (i.e. resolved) or rejected state. Once in a fulfilled or rejected state the promise is considered to be settled. Once settled, a promise can't change its state. Settled means, settled.</li>
        <li>One should consider a Promise as a stand-in for a value that has yet to be determined. In short, you use a promise to wrap asynchronous routines and then use promise methods to provide callback functions for the routines.</li>
    </ol>
</div>

                <h3>7.4 : Consuming Promises</h3>

                <p>Since promises are native to the language several JavaScript runtimes can make use of Promises. For example, the new <a  href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>, which replaces the older <code>XMLHttpRequest</code> API returns a promise by default. Thus, instead of having to create a promise, all you have to do is consume the promise returned from calling <code>fetch()</code>.</p>

                <p>I've re-written the code from the previous section to use the new <a  href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>. By using the <a  href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a> I don't need to produce a <code>Promise</code> object manually, one is simply given to me by the web platforms <a  href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>. As you can see in the code example below when a promise is returned all that is left to do is to consume the promise using promise methods (e.g. <code>then()</code> method)</p>

<pre class="line-numbers"><code class="language-js">
// Get number of stars for React on github
fetch('https://api.github.com/repos/facebook/react')
    .then( // use then() to consume the eventual results
        //resolve function
        (response) => {
            // note that calling response.json() is itself a promise
            response.json().then(json => console.log(json.stargazers_count)); // logs 11XXXX
        },
        //reject function
        (error) => {
            console.log(error.toString()); // logs "undefined"
        }
    );

// Send a bad URL, to see reject function run
fetch('htttps://www.badnogoodurl.com')
    .then( // use then() to consume the eventual results
        //resolve function
        (response) => {
            // note that calling response.json() is itself a promise
            response.json().then(json => console.log(json.stargazers_count)); // logs 11XXXX
        },
        //reject function
        (error) => {
            console.log(error.toString()); // log "undefined"
        }
    );

</code></pre>

<h3>7.5 : Producing an already Resolved or Rejected <code>Promise</code></h3>

<p>The <code>Promise</code> API offers the <code>Promise.resolve()</code> and <code>Promise.reject()</code> static methods that will produce an instance of a <code>Promise</code> that has either been resolved or rejected with a given value. This can be handy when needing to quickly create a promise in a specific state without dealing with an executor function.</p>

<p>The <code>Promise.resolve()</code> static method returns a resolved promise with a specific value passed to it:</p>

<pre class="line-numbers"><code class="language-js">
Promise.resolve('value1')
    .then(value => console.log(value)); // logs "value1"

// The above is a shortcut for this:
new Promise(resolve => resolve('value2'))
    .then(value => console.log(value)); // logs "value2"

</code></pre>

<p>The <code>Promise.reject()</code> static method returns a rejected promise with a specific value passed to it:</p>

<pre class="line-numbers"><code class="language-js">
Promise.reject('error1')
    .then(() => {}, error => console.log(error)); // logs "error1"
  
// The above is a shortcut for this: 
new Promise((resolve, reject) => {reject('error2');})
    .then(() => {}, error => console.log(error)); //logs "error2"
        
</code></pre>

<p>Don't over think these two static methods they simply side step the executor function and return a promise in a specific state.</p>

<div class="notes">

        <p>
            <strong>Notes:</strong>
        </p>
        <ol>
            <li>The <code>Promise.resolve()</code> static method is typically used to wrap a Promise around a value.</li>
        </ol>
    </div>

<h3>7.6 : Chaining Promises with <code>then()</code></h3>

<p>The <code>then()</code> method is used to provide a resolution and rejection function for a promise. Remember, a promise runs/contains asynchronous code. This asynchronous code when complete can call one of two functions either <code>resolve()</code> or <code>reject()</code>. The <code>then()</code> method accounts for both of these calls. If <code>resolve()</code> is called then the first function to <code>then()</code> is invoked. If <code>reject()</code> is called then the second function pass to <code>then()</code> is called.</p>

<p>In the code example below I am using <code>then()</code> to extract the commits on Github for React, then extract the author of the last commit, then log that author to the console.</p>

<pre class="line-numbers"><code class="language-js">
// get the name of the last person to commit to the React github repository

// fetch all commits for React
fetch('https://api.github.com/repos/facebook/react/commits')
    // handle response, pass json to next then()
    .then(response => response.json(), error => console.log(error))
    // fetch user from Github API
    .then((json) => {
        // use commit data to get user name of last person to commit
        // use user name to get author data 
        // pass response to next then()
        return fetch('https://api.github.com/users/'+json[0].author.login);
    }, error => console.log(error))
    // handle response pass json to next then()
    .then(response => response.json(), error => console.log(error))
    // get name, pass it to the next then(), note I am not passing a promise but just a simple value
    .then(user => user.name, error => console.log(error))
    // log the name of the last person to commit code to the react repository
    .then(name => console.log(name + ' is the last person to commit to React repository'));

</code></pre>

<p>It is important to remember, and you may have noticed in the previous code example, that the <code>then()</code> method can be used to chain any value not just promises. In the code example below I demonstrate using the promise API to simply transfer data through a promise chain.</p>
    
<pre class="line-numbers"><code class="language-js">
// create a promise that is already resolved with a specific 'foo' value.
var myPromise = Promise.resolve('foo');

// show how a promise can chain any value indefinitely.
myPromise.then((data)=>{
    return data;
}).then((data)=>{
    return data;
}).then((data)=>{
    console.log(data); // logs 'foo'
});

</code></pre>
    
<p>However, the <code>then()</code> method was specifically designed to chain promises that are doing asynchronous activities. In the following code example I use the promise chain to verify all the starwars API endpoints are functioning.</p>

<pre class="line-numbers"><code class="language-js">

let starWarsAPICheck = [];

console.log('Wait for it...! Data from another Galaxy yo!');

// chain a set of promise to occur one after the other
// check the starwars api to see if all endpoints are working.
fetch('https://swapi.co/api/people')
.then((response)=>{
    starWarsAPICheck.push(response.ok);
    return fetch('https://swapi.co/api/planets');
}).then((response)=>{
    starWarsAPICheck.push(response.ok);
    return fetch('https://swapi.co/api/films');
}).then((response)=>{
    starWarsAPICheck.push(response.ok);
    return fetch('https://swapi.co/api/species');
}).then((response)=>{
    starWarsAPICheck.push(response.ok);
    return fetch('https://swapi.co/api/vehicles');
}).then((response)=>{
    starWarsAPICheck.push(response.ok);
    return fetch('https://swapi.co/api/starships');
}).then(()=>{
    console.log(starWarsAPICheck); // logs [true, true, true, true, true, true]
});

// Note the previous chain all happen sequentially
// To make all the calls run in parallel, Promise.all() could be used.

</code></pre>
    
<p>One should note that any error returned within the first function passed to <code>then()</code> will result in the next <code>then()</code> running the rejection function (i.e. the second function padded to <code>then()</code>).</p>  
    
<pre class="line-numbers"><code class="language-js">
// create a promise that is already resolved with a specific a 'foo' value.
var myPromise = Promise.resolve('foo');

// show how error returned in the second then(), calls reject callback function, but chain goes on
myPromise.then((data)=>{
    return data;
}).then((data)=>{
    throw Error('yo this then() is no good');  // will cause reject callback in next then() to run
}).then(
    (data)=>{console.log(data)}, // does not run
    (error)=>{console.log(error.toString())}, //logs 'yo this then() is no good'
).then((data)=>{
    console.log('note this still runs');
    console.log(data); // logs undefined, foo is undefined
});

</code></pre>
    
    <p>Basically, using <code>then()</code> allows a developer to push data through a set of functions that can deal with both synchronous and asynchronous results interchangeable. When an error occurs, the chain does not stop, the next <code>then()</code> simply captures the error and runs the second function passed to it.</p>

<div class="notes">

    <p>
        <strong>Notes:</strong>
    </p>
    <ol>
        <li>If you don't provide <code>then()</code> a resolve function or provide a non-function, no error will occur. The next <code>then()</code> resolve function is passed an <code>undefined</code> value.</li>
    </ol>
</div>

<h3>7.7 : Catching Rejections in the Chain with <code>catch()</code></h3>

<p>When rejection errors occur within a promise chain the <code>catch()</code> method can be used to capture the rejection. This can be handy for two reasons. First off, you can write a single error handle for a long list of chained promises and the first rejection in the chain will get passed on to the <code>catch()</code>. Secondly, because <code>catch()</code> returns a promise, just like <code>then()</code>, you can keep chaining with more <code>then()</code>'s or <code>catch()</code>'s. Basically, one could perform several asynchronous routines and use one <code>catch()</code> if any errors occur, then continue on with more <code>then()</code>'s or <code>catch()</code>'s' at will.</p>

<p>In the code example below a broken API call is kicked off and a <code>catch()</code> method at the end of the chain captures the error.</p>

<pre class="line-numbers"><code class="language-js">

fetch('https://api.github.com/repos/fanebook/react/commits') // broken URL, facebook not fanebook
    .then(response => response.json())
    .then((json) => {
        // this throws an error because the json passed in is bad
        // it is bad because the original URL is wrong facebook, not fanebook
        // so json[0].author.login is a bad reference
        // so this function throws an error which is caught in the first catch() in the chain
        return fetch('https://api.github.com/users/'+json[0].author.login);
    })
    .then(response => response.json()) // response.json() returns a promise
    .then(data => console.log(data.name + ' is the last person to commit to React repository')) // never logs
    .catch(error => { // any error issue in the previous then()'s are trapped here
        console.log(error.toString());
    })
    .then(() => {
        console.log('yup you can still chain after a catch()');
    });
    
</code></pre>

        <div class="notes">

            <p>
                <strong>Notes:</strong>
            </p>
            <ol>
                <li>The <code>catch()</code> method is typically used over providing each <code>then()</code> with a rejection parameter.</li>
                <li> Notice how readable the code in this section becomes once a single rejection function was used via a <code>catch()</code> over providing a rejection function for each <code>then()</code>.</li>
                <li>The <code>catch()</code> method is simply a short-hand for, <code>.then(null, error => { // do something with error })</code>.</li>
            </ol>
        </div>
        

<h3>7.8 : Running a Final Function, Regardless of Promise Fulfillment State with <code>finally()</code></h3>

<p>When a situation exists that you'd like to run a function regardless of if a promise is resolved or rejected you can use the <code>finally()</code> method. This method makes it possible to run code no matter what occurs previously in the promise chain.</p>

<p>In the code example below I demonstrate how the <code>finally()</code> method is invoked regardless of the fulfillment paths through the promise chain.</p>

<pre class="line-numbers"><code class="language-js">
let stateOfLoading = 'Not Loading'; // this is the default state

fetch('https://swapi.co/api/peoples/') // breaks because the URL is people not peoples
    .then((response) => {
        if(!response.ok){ // run if fetch fails
            throw Error('api call broke'); // catch() is called
        }
        stateOfLoading = 'Loaded';
        return stateOfLoading; // passed from finally() to the last then() in chain
    })
    .catch(error => {
        stateOfLoading = 'Loading Error';
        return stateOfLoading; // passed from finally() to the last then() in chain
    })
    .finally(() => { // finally does not take in parameters
        // runs no matter what, because we want to return state to default
        // regardless of if the catch or then is fulfilled
        stateOfLoading = 'Not Loading';
    })
    /* Basically a finally() eliminates redundant functions in a then()
    
    The above finally is just shorthand for using a then() like so:
    .then(
        () => { // finally does not take in parameters
        // runs no matter what
        stateOfLoading = 'Not Loading';
        },
        () => { // finally does not take in parameters
        // runs no matter what
        stateOfLoading = 'Not Loading';
        },
    )
    */
    .then((data) => { // get value from previous catch() or then()
        // change the initial api call from /people to /peoples to get different values
        console.log(data); // either 'loaded' or 'loading error'
        console.log(stateOfLoading); // verify finally statement returned state to default
    });

</code></pre>

<div class="notes">

    <p>
        <strong>Notes:</strong>
    </p>
    <ol>
        <li>The <code>finally()</code> method was added in <a href="http://kangax.github.io/compat-table/es2016plus/#test-Promise.prototype.finally">ES2018</a>.</li>
        <li>This method is typically used to clean up things that might have been changed while a chain of Promises are being resolved (i.e. turn a loader UI off and return either data or an error in place of the loading UI).</li>
    </ol>
</div>

<h3>7.9 : Waiting for a List of Parallel Promises to Complete with <code>Promise.all()</code></h3>

<p>If you want to kick off several asynchronous activities simultaneously using promises and get notified when they are all complete the Promise API offers <code>Promise.all()</code>. The <code>Promise.all()</code> static method takes an array of promises and will return a single promise when all the promises in the Array are fulfilled.</p>

<pre class="line-numbers"><code class="language-js">

Promise.all([
    fetch('https://api.github.com/repos/facebook/react/commits'),
    fetch('https://api.github.com/repos/facebook/react/stargazers')
])
.then(([commits, stargazers]) => {
    console.log(commits.ok, stargazers.ok); // logs true, true
});
        
</code></pre>

<h3>7.10 : Waiting for the First, of a List, of Parallel Promises to Complete with <code>Promise.race()</code></h3>

<p>If you want to kick off several asynchronous activities simultaneously using promises and get notified when the first promise fulfills the Promise API offers <code>Promise.race()</code>. The <code>Promise.race()</code> static method takes an Array of promises and will return only the first promise that is fulfilled.</p>

<pre class="line-numbers"><code class="language-js">
    
Promise.race([
    fetch('https://api.github.com/repos/facebook/react/commits'),
    fetch('https://api.github.com/repos/facebook/react/stargazers'),
])
.then(response => {
    console.log(response.url); // logs whichever one finishes first
});

</code></pre>     


            </div>

            <div id="chapter8" class="chapter">

                <h2>Chapter 8 : ES2017 Async Functions & await operator</h2>

                <section class="sub">

                        <p>This chapter covers asynchronous functions (i.e <code>(async () => {})();</code>) and the use of the <code>await</code> operator with <code>async</code> functions so that asynchronous code can be written to look more like synchronous/procedural code.</p>
                    </section>

                <h3>8.1 : The <code>async</code>/<code>await</code> syntax is not a replacement for promises</h3>

                <p>It would be a mistake thinking <code>async</code> functions and the <code>await</code> operator completely replaces the use of promises. Or, that one need not clearly understand promises before using <code>async</code> functions and the <code>await</code> operator. Thus, an in-depth reading of the previous chapter is necessary to comprehend this chapter.</p> 
                    
                    <p>An <code>async</code> function returns a promise that is typically resolved using the <code>await</code> operator. Think of an <code>async</code> function as a syntactical replacement for an executor function and the <code>await</code> operator as an inline syntactical replacement for <code>then()</code>.</p>

                    <p>Ultimately what you need to keep in mind is that the async/await syntax enhances promises, it does not replace promises!</p>
    
                <h3>8.2 : The benefits of using <code>async</code> functions and the <code>await</code> operator</h3>

                <p>Using <code>async</code> functions and the <code>await</code> operator to handle asynchronous code is a stylistic choice with some subjective benefits over traditional promises.</p>

                <p>In the code example below I've augmented the Github promise code from the previous chapter creating a utility function that uses an <code>async</code> function and the <code>await</code> operator instead of a long <code>.then()</code> promise chain.</p>

<pre class="line-numbers"><code class="language-js">
let stateOfLoading = 'Not Loading'; // this is the default state

// add async keyword to arrow function, now this function returns a promise and can use await operator
const getLastGitHubCommitAuthor = async (owner, repo) => {
    try {
        stateOfLoading = "Loading";
        // await pauses this function until the promise from fetch is fulfilled
        const commits = await fetch(`https://api.github.com/repos/${owner}/${repo}/commits`);
        // await pauses this function until the promise from .json() is fulfilled
        const jsonCommits = await commits.json(); // json() returns a promise
        // await pauses this function until the promise from fetch is fulfilled
        const author = await fetch(`https://api.github.com/users/${jsonCommits[0].author.login}`);
        // await pauses this function until the promise from .json() is fulfilled
        const jsonAuthor = await author.json(); // json() returns a promise
        return jsonAuthor.name; // a string is returned, but it is wrapped in a Promise
    } catch (error) { // any and all errors from the try and caught here, sort of like .catch()
        stateOfLoading = 'Error Loading';
        throw new Error(error); // throw error so async function will return rejected promise.
    } finally { // can replace the .finally() method functional from a promise chain
        stateOfLoading = 'Not Loading';
    }
};

// Now consume the async function, which returns a promise, with promise methods.
getLastGitHubCommitAuthor('facebook', 'react')
    .then(name => console.log(name + ' is the last person to commit to the React repository'))
    .catch(error => console.log(error.toString()));

</code></pre>

<p>Now compare the async/await solution you just looked at to the promise only solution:</p>

<pre class="line-numbers"><code class="language-js">
let stateOfLoading = 'Not Loading'; // this is the default state

const getLastGitHubCommitAuthor = (owner, repo) => {
    // explicitly return a promise from the end of the chain
    return fetch(`https://api.github.com/repos/${owner}/${repo}/commits`)
        .then(response => response.json()) // json() returns a promise
        .then(jsonCommits => fetch(`https://api.github.com/users/${jsonCommits[0].author.login}`))
        .then(response => response.json()) // json() returns a promise
        .then(jsonAuthor => jsonAuthor.name )
        .catch((error) => {
            stateOfLoading = 'Error Loading';
            throw new Error(error); 
        })
        .finally(() => {
            stateOfLoading = 'Not Loading';
        });
};

// Now consume the async function, which returns a promise, with promise methods.
getLastGitHubCommitAuthor('facebook', 'react')
    .then(name => console.log(name + ' is the last person to commit to the React repository'))
    .catch(error => console.log(error.toString()));

</code></pre>

                <p>You should note the async/await solution offers the following subjective benefits:</p>

                <ul>
                    <li>Notice how asynchronous code has moved closer to a synchronous/procedural style (i.e. do this, then do this, then do this). Many people find this easier to read and maintain than using method chaining boilerplate.</li>
                    <li>Notice the reduction of chaining boilerplate (i.e. only used one <code>then()</code> not a long chain of them).</li>
                    <li>Notice the efficiency of using a <code>try</code>, <code>catch</code>, and <code>finally</code> to capture both asynchronous and synchronous errors and run code regardless of where the error occurs. (i.e. similar to how <code>.catch()</code> and <code>.finally()</code> works for long promise chains). In general, avoiding callback functions passed to <code>then()</code> means less cruft around errors being thrown.</li>
                    <li>Consider also that using the async/wait syntax could flat out potential child chains (i.e. <code>then()</code> chains inside of <code>then()</code> chains) and simplify conditional asynchronous activity.</li>
                </ul>

                <p>The benefits just mentioned are often touted as the benefits for using <code>async</code> functions and the <code>await</code> operator over promise chaining. In short, many simply consider the async/await syntax an intuitive and cleaner replacement for promise chaining. Personally, I simply consider the use of async/await as a way to avoid chaining hell which is simply a hell wrapped around callback hell.</p>

                <div class="notes">

                        <p>
                            <strong>Notes:</strong>
                        </p>
                        <ol>
                            <li>The async keyword works with all functions; function expressions (e.g. <code>const foo = async function () {};</code>), function declarations <code>(e.g. async function foo() {}</code>), method definition (e.g. <code>let obj = { async foo() {} }</code>), and the arrow function (e.g. <code>const foo = async () => {}</code>).</li>
                            <li>Don't forget, the <code>await</code> keyword only works inside a <code>async</code> function and is used to pause a function until a promise is fulfilled.</li>
                            <li>The async keyword placed in front of a function creates a special kind of function object called, "AsyncFunction". The AsyncFunction constructor is not a global object but you can obtain a reference to the constructor using <code>Object.getPrototypeOf(async function(){}).constructor</code>.</li>
                        </ol>
                    </div>


                <h3>8.3 : Asynchronous functions return an implicit <code>Promise</code></h3>

                <p>If a promise is not explicitly returned from an async function then one is implicitly returned. The result is that a promise is always returned from an <code>async</code> function.</p>

<pre class="line-numbers"><code class="language-js">
// an async function that returns the value 5
var myAsyncFunction = async () => {
    return 5;
}

// verify async returns an implicit promise, wrapping the value 5
console.log(myAsyncFunction() instanceof Promise); // logs true

// use then() to get value returned from myAsyncFunction
myAsyncFunction().then((value) => { console.log(value) }); // logs 5

</code></pre>             

                <h3>8.4 : The <code>await</code> operator awaits a Promise or creates an implicit <code>Promise</code></h3>

                <p>Any value <code>await</code>'ed for that is not a <code>Promise</code> is implicitly converted to a resolved promise. (e.g. <code>Promise.resolve(value)</code>).</p>

<pre class="line-numbers"><code class="language-js">
// an async function that returns the value 5
var myAsyncFunction = async () => {
    const awaitedPromiseValue = await 5;
    // The above is like explicitly writing: 
    // const awaitedPromiseValue = await Promise.resolve(5);
}

// use then() to get value returned from myAsyncFunction
myAsyncFunction().then((value) => { console.log(value) }); // logs undefined
// nothing was returned so implicitly undefined is returned
// i.e. Promise.resolve(undefined);

</code></pre>

<div class="notes">

        <p>
            <strong>Notes:</strong>
        </p>
        <ol>
            <li>If a promise that is being <code>await</code>'ed for is rejected the await expression throws the rejected value.</li>
        </ol>
    </div>

                <h3>8.5 : The <code>await</code> operator is sequential</h3>

                <p>It might be obvious but just like the <code>then()</code> method the <code>await</code> operator waits for promise resolution/fulfillment before moving on to the next line of code so to speak. This means to run parallel asynchronous routines instead of sequential routines the static <code>Promise</code> methods <code>Promise.all()</code> and <code>Promise.race()</code> can be used.</p>

<pre class="line-numbers"><code class="language-js">
(async () => { // create async function that is immediately invoked

    // sequential fetch's
    const responsePlants = await fetch('https://swapi.co/api/planets');
    // API call above has to finish before the API below can start
    const responseFilms = await fetch('https://swapi.co/api/films');

    console.log(responsePlants.ok, responseFilms.ok) // logs true true

    // parallel fetch's, faster than sequential fetch's using Promise.all()
    const [parallelResponsePlanets, parallelResponseFilms] = await Promise.all([
        fetch('https://swapi.co/api/planets'),
        fetch('https://swapi.co/api/films')
    ]);

    console.log(parallelResponsePlanets.ok, parallelResponseFilms.ok) // logs true true

    // parallel fetch's, return first one to finish, using Promise.race()
    const fastestResponseFromStarWarsApi = await Promise.race([
        fetch('https://swapi.co/api/species'),
        fetch('https://swapi.co/api/vehicles'),
        fetch('https://swapi.co/api/starships')
    ]);

    console.log(fastestResponseFromStarWarsApi.ok); // logs true

})()

</code></pre>


            </div>

            <div id="chapter9" class="chapter">

                <h2>Chapter 9 : Using ES2015 Modules Today</h2>

                <section class="sub">

                    <p>This chapter will focus on defining the need for modules in general, the difference between module syntax and the module loading API, and then briefly explore the browsers module loading API.</p>
                </section>

                <h3>9.1 : Why JavaScript Modules (aka EcmaScript Modules)?</h3>

                <p>Before ES2015 JavaScript didn't offer native modules. Oh, everyone faked it for years in all sorts
                    of <a href="https://requirejs.org/">amazing</a> <a href="http://browserify.org/">ways</a> but all
                    of these solutions were temporary fixes to a significant deficit with the
                    language. What was needed was a native module syntax built into the language and a runtime loading
                    system that
                    offered the
                    following:</p>

                <ul>
                    <li>Modules with a native private scope that did not have to reach into the
                        global scope
                        to talk to other modules (i.e. the ability to import and export modules from within modules
                        without reaching into the global scope).</li>
                    <li>Explicitly defined dependencies within a module (i.e. <code>import</code>).</li>
                    <li>Explicitly defined values within a module that can be shared with other modules (i.e. <code>export</code>).</li>
                    <li>A runtime loading API with a native runtime dependency tree.</li>
                </ul>

                <p>All of the above requirements as of today have been satisfied by:</p>

                <ul>
                    <li>The JavaScript module syntax (e.g. <code>import</code> and <code>export</code>)</li>
                    <li>Runtime module loading API's. As an example, the web platforms Javascript module loading API
                        that
                        loads module files (i.e.
                        <code>&lt;script type="module" src="myModule.js" /&gt;</code>)</li>
                </ul>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>JavaScript modules are based on <a href="https://nodejs.org/docs/latest-v10.x/api/modules.html">CommonJS
                                modules (aka Node.js modules)</a>. In the future, JavaScript modules will likely replace
                            commonJS modules. In fact, JavaScript module syntax was introduced experimentally into
                            Node.js v8.5.0. But keep in mind imported values in CommonJS are copies of values while
                            imported values in ES modules are live read-only values.</li>
                    </ol>
                </div>

                <h3>9.2 : Understanding Module Syntax V.S. the Module Loader API</h3>

                <p>JavaScript modules require two separate parts/specifications working together. The first part
                    specifies how the module is defined and the implications of this definition within the language.
                    (e.g. <code>import</code> and <code>export</code>). The second part is how the module is loaded
                    (e.g. The browser module loader API e.g. <code>&lt;script type="module" src="myModule.js" /&gt;</code>
                    and the <a href="https://nodejs.org/api/esm.html">Node ES module Loading API</a>).</p>

                <p>The module syntax is what is defined by the <a href="https://tc39.github.io/ecma262/#prod-Module">ECMAScript
                        standard</a>. The loader
                    API is not defined by the ECMAScript standard. The details on how a module is loaded are details
                    that JavaScript runtimes have to iron out (e.g. Browsers and Node.js).</a> </p>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>Still, as of 2019, it is common to see
                            module bundlers (e.g. Webpack and Parcel) used in place of a native module loading API
                            (e.g. developers use bundlers today to transform ES module syntax into historical ES5 script
                            files and these files don't use the native web module
                            loading API).</li>
                    </ol>
                </div>

                <h3>9.3 : Loading/Running Static Modules in a Browser using <code>&lt;script type="module"&gt;</code></h3>

                <p>Before examining how static modules are loaded by browsers lets recap how the <code>&lt;script&gt;</code>
                    element was used historically to load/run non-ES2015
                    JavaScript
                    modules (aka script files, classic script files, or historical script files instead of ES
                    modules).</p>

                <p>Below three external <code>&lt;script src=&quot;&quot;&gt;&lt;/script&gt;</code>'s' and one inline
                    <code>&lt;script&gt;&lt;/script&gt;</code> are run in the the HTML document:</p>

                <pre class="line-numbers"><code class="language-markup">
&lt;!DOCTYPE html&gt;&#10;&lt;html&gt;&#10;&#10;&lt;head&gt;&#10;    &lt;meta charset=&quot;utf-8&quot; /&gt;&#10;&lt;/head&gt;&#10;&#10;&lt;body&gt;&#10;&#10;    &lt;script src=&quot;script1.js&quot;&gt;&lt;/script&gt;&#10;    &lt;script src=&quot;script2.js&quot;&gt;&lt;/script&gt;&#10;    &lt;script src=&quot;script3.js&quot;&gt;&lt;/script&gt;&#10;    &lt;script&gt;console.log(this) // logs window object&lt;/script&gt;&#10;&#10;&lt;/body&gt;&#10;&lt;/html&gt;
    </pre></code>

                <p>Note the following about the above loading/running of the <code>script1.js</code>, <code>script2.js</code>,
                    and <code>script3.js</code> files:</p>

                <ol>
                    <li>Values define in script files loaded into an HTML document are defined in the global
                        scope (except for function and block scoped values contained in the script files).</li>
                    <li>By default, the <code>script1.js</code> is loaded/parsed by the browser engine before moving on
                        to
                        <code>script2.js</code> (unless the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script"><code>async</code></a>
                        attribute is used). By default, scripts are loaded/parsed synchronously.</li>
                    <li>By default all <code>&lt;script&gt;</code>'s' block the HTML parser (unless the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script"><code>defer</code></a>
                        attribute is used).</li>
                </ol>

                <p>The new browser module loading API offers a new system for loading JavaScript modules that use ES
                    module syntax. The HTML
                    document
                    below is evaluating modules instead of historical script files (Consider <code>module1.js</code>,
                    <code>module2.js</code>, <code>module3.js</code> to be files
                    in the same directory as the HTML file).</p>

                <div class="codesandboxlinkNotDynamic"><a href="https://codesandbox.io/s/5395rj8p0p">run/edit in
                        codesandbox.io (Only runs in: Edge 17+, Firefox 61+, Chrome 63+, Safair 11.1+, iOS Safari
                        11.2+, Chrome Android 69+)</a></div>

                <pre class="line-numbers"><code class="language-markup">
&lt;!DOCTYPE html&gt;&#10;&lt;html&gt;&#10;&#10;&lt;head&gt;&#10;    &lt;meta charset=&quot;utf-8&quot; /&gt;&#10;&lt;/head&gt;&#10;&#10;&lt;body&gt;&#10;&#10;    &lt;!--  Entry module is module1.js, dependency graph starts here --&gt;&#10;    &lt;script type=&quot;module&quot; src=&quot;./module1.js&quot;&gt;&lt;/script&gt;&#10;    &lt;!--  module1.js imports and uses module2.js --&gt;&#10;&#10;    &lt;!-- module1.js&#10;        import text from &quot;./module2.js&quot;;&#10;        console.log(text); // logs &quot;Hello from module 2&quot;;&#10;    --&gt;&#10;&#10;    &lt;!-- module2.js&#10;        const text = &quot;Hello from module 2&quot;;&#10;        export default text;&#10;    --&gt;&#10;&#10;    &lt;!--  Entry module is inline script, dependency graph starts here --&gt;&#10;    &lt;!--  inline script below imports and uses module3.js --&gt;&#10;    &lt;script type=&quot;module&quot;&gt;&#10;        import text from &apos;./module3.js&apos;;&#10;        console.log(text) // logs &quot;Hello from module 3&quot;;&#10;    &lt;/script&gt;&#10;&#10;    &lt;!-- module3.js&#10;        const text = &quot;Hello from module 3&quot;;&#10;        export default text;&#10;    --&gt;&#10;&#10;&lt;/body&gt;&#10;&#10;&lt;/html&gt;
    </pre></code>

                <p>The implications of loading JS modules using the browser module loading API are as follows:</p>

                <ol>
                    <li>The <code>type="module"</code>
                        attribute is required so the browser will use the
                        native browser module loading API to parse/load each module.</li>
                    <li>Each <code>&lt;script&gt;</code>
                        has its own entry file and <a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">dependency
                            graph</a>. </li>
                    <li>An ES module can be written inline or be written in a separate file and pulled into the current
                        HTML
                        file using the <code>src</code> attribute.</li>
                    <li>An ES module runs code in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict
                            mode</a>
                        by default.</li>
                    <li>Values defined in an ES module that are not <code>export</code>'ed are scoped only to that
                        module,
                        these values
                        don't leak into the
                        global scope.</li>
                    <li>ES modules are singletons in the sense that only a single instance of it
                        exists. Basically, only one instance of it is used no
                        matter how many times it is <code>import</code>'ed.</li>
                    <li>ES Modules still have access to the global context (i.e. the top level runtime scope). In a
                        browser this would be the global <code>window</code> context. However, the use of the keyword
                        <code>this</code> will not work inside of a module to reference the global runtime scope.</li>
                    <li>The use of the <code>import</code> and <code>export</code> syntax can be used within the module
                        to import other modules and export values, so other modules can import those values. By doing
                        this you create a graph of dependencies between modules that the loading API uses to figures
                        out
                        how to run the JavaScript (i.e. managed dependencies).</li>
                    <li>Exports from an ES module are static. Meaning, once they have been defined and imported they can
                        not be
                        changed
                        later.</li>
                    <li>ES Modules and their dependencies (i.e. imported modules) are fetched with <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>.</li>

                    <li>ES Module <code>&lt;script type="module"&gt;</code>'s' use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script"><code>defer</code></a>
                        by default.</li>
                </ol>


                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>The following web browsers all support loading modules using the <code>&lt;script type="module"&gt;</code>:
                            <a href="https://caniuse.com/#feat=es6-module">Edge 17+, Firefox 61+, Chrome 63+, Safair
                                11.1+, iOS Safari 11.2+, Chrome Android 69+</a>.</li>
                        <li>Paths to modules can be full URLs, or relative URLs starting with <code>/</code>, <code>./</code>,
                            or <code>../</code>. As of today, what won't work unless using an asset bundler, is
                            specifying a module by name of module
                            package (i.e. <code>import {React} from 'react'</code>). In other words, if you NPM install
                            React you
                            will have to import that module using a relative URL not the name of the package installed
                            in node_modules.</li>
                        <li>The file extension <code>.js</code> can be omitted from the URL specifier string.</li>
                        <li>ES modules are static meaning they can't be changed at runtime. This allows things like
                            static checking and optimizations when importing and bundling.</li>
                        <li>You can request a module hosted on another domain if it uses <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>
                            (e.g. <code>import value from 'https://otherdomain.com/modules/module1.js';</code>).</li>
                        <li>Using the native web browser module loading API for systems that have more than 100+
                            modules could come at a performance cost (depends upon the size of dependency graph) and thus
                            asset bundlers are in common use today to avoid performance related issues in production.</li>
                        <li>All static module dependencies have to be downloaded and executed before the code will run.
                            If you are wondering how you conditionally import a module you will have to use a dynamic
                            import (i.e. <code>import('module1.js')</code>). </li>
                        <li>Inside a module the statement <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta"><code>import.meta</code></a>
                            will return an object containing a <code>url</code> property housing the location the
                            module was imported from (e.g. <code>console.log(import.meta); //logs { url: "file:///home/user/module1.js" }</code>).</li>
                    </ol>
                </div>

                <h3>9.4 : Conditionally loading a Module using <code>import()</code></h3>

                <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code></a>
                    statement has a dual purposed. It can be used to import other modules statically as well as
                    dynamically. When the import statement is used as
                    a function, and the module path/specifier is passed to it as an argument, a module can be loaded
                    dynamically (e.g. <code>import('./module1.js')</code>)
                    ). The return value from using <code>import</code> as a function is a <code>Promise</code>.
                    Essentially
                    this means you can
                    asynchronously load ES modules after all the static modules have been loaded into the runtime.</p>

                <p>In the code below after clicking anywhere on the HTML document, in the browser window, the lodash
                    <code>forEach</code>
                    <a href="https://unpkg.com/lodash-es@4.17.11/forEach.js">ES module</a> is loaded from the <a href="https://unpkg.com">unpkg.com</a>
                    CDN and used to log out the context of an array.</p>


                <div class="codesandboxlinkNotDynamic"><a href="https://codesandbox.io/s/lx800k8pym">run/edit in
                        codesandbox.io (only runs in : Chrome 63+, Safari 11.1+, iOS Safari 11.2+, Chrome Android 69+)</a></div>

                <pre class="line-numbers"><code class="language-markup">
&lt;html&gt;&#10;&lt;head&gt;&#10;    &lt;meta charset=&quot;UTF-8&quot; /&gt;&#10;    &lt;style&gt;&#10;        body {&#10;            cursor:pointer;&#10;        }&#10;        p {&#10;            position: relative;&#10;            height: 100%;&#10;            text-align: center&#10;            }&#10;        strong {&#10;            position: absolute; top: 50%; &#10;            left: 50%; &#10;            transform: translate(-50%, -50%);&#10;            font-weight: normal;&#10;        }&#10;    &lt;/style&gt;&#10;&lt;/head&gt;&#10;&#10;&lt;body&gt;&#10;    &lt;p&gt;&#10;        &lt;strong&gt;&#10;        Click anywhere in this window &lt;br&gt;&#10;        to load a module dynamically.&lt;br&gt; &#10;        Then view console.&#10;        &lt;/strong&gt;&#10;    &lt;/p&gt;&#10;    &lt;script type=&quot;module&quot;&gt;&#10;        const getModule = () =&gt; {&#10;            (async () =&gt; { &#10;                // I am in an inline module, using import(&apos;module&apos;)&#10;                const module = await import(&apos;https://unpkg.com/lodash-es@4.17.11/forEach.js&apos;); &#10;                const forEach = module.default;&#10;                forEach([&apos;one&apos;,&apos;two&apos;], console.log); &#10;            })()&#10;        }&#10;        // still have access to window from module (no this however)&#10;        // run getModule when the body is clicked&#10;        window.document.body.onclick = getModule;&#10;    &lt;/script&gt;&#10;&lt;/body&gt;&#10;&lt;/html&gt;
    </pre></code>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>The following web browsers all support dynamic imports:
                            <a href="https://caniuse.com/#feat=es6-module">Chrome 63+, Safari
                                11.1+, iOS Safari 11.2+, Chrome Android 69+</a>.</li>
                        <li>Paths to dynamic modules can be full URLs, or relative URLs starting with <code>/</code>,
                            <code>./</code>, or <code>../</code>.</li>
                    </ol>
                </div>

                <h3>9.5 : Parsing JS Module Syntax with Asset Bundlers</h3>

                <p>Asset bundlers like <a href="https://webpack.js.org/">Webpack</a> and <a href="https://parceljs.org/">Parcel</a>
                    are in wide use today. These asset
                    bundlers are used because they provide a system that will modularize and load many different asset
                    types and formats. Not just JavaScript Modules! For
                    example,
                    <a href="https://webpack.js.org/">Webpack</a> and <a href="https://parceljs.org/">Parcel</a> can
                    treat things like JavaScript, HTML, CSS, and Image files like modules, that can be imported into
                    each other,
                    and then bundle these differing assets/formats into a production state.</p>

                <p>Bundlers like <a href="https://webpack.js.org/">Webpack</a> and <a href="https://parceljs.org/">Parcel</a>
                    can also analyze
                    JavaScript files
                    written using ES module syntax and create from these files a dependency graph that is
                    then used to output one or many (aka code splitting) production runnable ES5 files. The
                    outputted JavaScript won't typically use the web browser module loading API or module syntax but
                    instead will load as an ES5 script file would
                    have before ES modules.</p>

                <p>Basically asset bundlers when dealing with ES modules can read ES2015 module syntax and
                    convert it to runnable bundled ES5 code in the form of a historical script file. Then these files
                    are loaded into a
                    browser using the
                    historical
                    <code>&lt;script&gt;</code> element.</p>

                <p>Today, most developers use an asset bundler. The reason most developers choose a bundler over the
                    browser
                    loading API is a combination of
                    performance concerns, browser support concerns, and the fact that bundlers will bundle not only
                    JavaScript files, but also other collaborating assets (i.e. <a href="https://parceljs.org/assets.html">treating
                        HTML, CSS,
                        and image files
                        like importable
                        modules</a>).</p>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>ES module syntax and semantics are lost when bundled by modern day assert bundlers.</li>
                        <li>Asset bundlers can do much more than simply convert ES6
                            module syntax into runnable ES5 code. Fundamental to modern
                            day
                            bundlers is the process of taking ES modules syntax and JavaScript 2015+ code (via Babel)
                            and
                            converting it to script files that
                            can be run in ES5
                            environments.</li>
                        <li>Asset bundlers don't yet leverage the JavaScript module API found in modern web browsers
                            (i.e.
                            <code>&lt;script type="module" /&gt;</code>).</li>
                        <li>Using a package name to load a module won't work when using the browser module loading API.
                            However, when using an asset bundler it is possible to use a packages name because the
                            bundler can be configured to correctly find the path to the module identified by a
                            name (e.g. <code>import _ from 'lodash';</code>).</li>
                        <li><a href="https://rollupjs.org/guide/en">Rollup.js</a> is a bundler just for JavaScript
                            modules.</li>
                        <li>Asset bundlers will typically <a href="https://parceljs.org/javascript.html">accept
                                CommonJS syntax or ES module syntax</a>.</li>
                    </ol>
                </div>

            </div>

            <div id="chapter10" class="chapter">

                <h2>Chapter 10 : Writing ES2015 Module Syntax</h2>

                <section class="sub">

                    <p>This chapter will focus on ES modules syntax itself. ES Module syntax is commonly used by asset
                        bundlers or more recently by the web browsers <code>&lt;script type="module"&gt;</code> module loading API.</p>
                </section>

                <h3>10.1 : Module Syntax Overview</h3>

                <p>A lot of details and stylistic choices exist around the importing and exporting of values in
                    JavaScript modules. However,
                    fundamentally JS module syntax basically boils down to these two concepts:</p>

                <ol>
                    <li>A module can export multiple values and or a single default value from within a
                        module
                        using
                        the keywords <code>export</code>
                        and <code>default</code>:</li>
                    <br>

                    <pre class="line-numbers"><code class="language-js noRun"> 
// myModule.js

const value1 = 'value1';
const value2 = 'value2';

// export specific named values using export keyword
export {value1, value2}; // named exports
// Note export syntax, looks like destructuring syntax but is not destructuring

// inline export
export const value3 = 'value3';

// default export, using default keyword
export default value4 = 'value4';
    </code></pre><br>
                    <li>A module can simultaneously import multiple values and a single default value from other
                        modules
                        using the keywords <code>import</code> and <code>from</code>
                        along with a URL
                        specifier string identifier (i.e. the relative or full URL file path to the module whose values are being
                        imported):</li>
                    <br>

    <pre class="line-numbers"><code class="language-js noRun">
// some other module that imports values from myModule.js

// import the default value and three named values from myModule.js
import nameGivenToDefaultValue, {value1, value2, value3} from './myModule.js';
// Note how the default value along with named values are imported together
// Note export syntax, looks like destructuring syntax but is not destructuring

// This module now has access to the imported values above
console.log(nameGivenToDefaultValue, value1, value2, value3); 
//logs value4, value1, value2, value3
    </code></pre>
                    <br>
                </ol>

                <p>The rest of this chapter will break down some additional details about modules and the differing
                    <code>export</code>'ing
                    and <code>import</code>'ing
                    styles that can be used when authoring JavaScript using ES module syntax.</p>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>An URL specifier must be a path to a module using full URLs, or relative URLs starting with
                            <code>/</code>, <code>./</code>, or <code>../</code>. However, if one is using an asset
                            bundler (e.g. webpack) the URL specifier can also be the
                            name of the module package (i.e.<code> import {React} from 'react'</code>) if the asset
                            bundler has been configured to sort out the path to the module by package name.</li>
                        <li>The file extension <code>.js</code> can be omitted from the URL specifier string.</li>
                        <li>Imports are hoisted to the top of the scope regardless of where they appear in the module.
                            Thus, most people place all imports at the start of a module.</li>
                        <li>Where exporting happens (i.e. inline or end of the module) is subjective preference based
                            on exporting styles.</li>
                        <li>Imports and exports can't natively be conditionally imported or exported without the use of a
                            <a href="https://developers.google.com/web/updates/2017/11/dynamic-import">
                                dynamic
                                <code>import()</code>
                            </a> (i.e. don't think you can place imports in <code>conditional</code>
                            statements without using a dynamic <code>import()</code>).</li>
                        <li>ES modules are in <code>strict mode</code> by default.</li>
                        <li>ES modules have access to the global scope (e.g. <code>window</code>) but not using <code>this</code>
                            value. The global scope has to be reference with a point to the global scope (e.g. <code>window</code>).</li>
                        <li>Circular dependencies are supported (e.g. module 1 can import a value from modules 2, and at the same time module 2 can import value from module 1.). These modules depended upon each other and because modules are static this circular
                            dependency is resolved before either module is executed.</li>
                    </ol>
                </div>

                <h3>10.2 : Importing and Exporting Named values</h3>

                <p>The <code>export</code> keyword can be used to export an unlimited number of named values from a
                    module.</p>

                <p>Three styles are available when exporting named values from a module:</p>

                <p><strong>1. Exporting values inline when expressed/declared:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun">
// module1.js
                
// exporting values inline, when defining
export const simpleString = 'simpleString';
export const simpleFunction = () => {};
export const simpleNumber = 5;
export class myClass {};
export function myFunction(){};

// Note these won't work
// this will throw an error an expression or declaration is expected
export 5;
export simpleString;

</code></pre>

                <p><strong>2. Exporting values by reference:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun">
// module1.js
                
const simpleString = 'simpleString';
const simpleFunction = () => {};
const simpleNumber = 5;
class myClass {};
function myFunction(){};

// style for multiple references
export {simpleString, simpleFunction, simpleNumber, myClass, myFunction};
      
</code></pre>

                <p><strong>3. Exporting renamed referenced values:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun">
// module1.js

const sF = 'simpleString';
const sS = () => {};
const sN = 5;
class mC {};
function mF(){};

// exporting multiple renamed references
export {sF as simpleFunction, sS as simpleString, sN as simpleNumber, mC as myClass, mF as myFunction}

</code></pre>

                <p>Four styles are available when importing the above named exported values into another
                    module:</p>

                <p><strong>1. Importing a single named export:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun">
// This is module2.js, import a single value into this module from module1.js
                
import {simpleString} from './module1.js';

console.log(simpleString);

</code></pre>

                <p><strong>2. Importing multiple named exports:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun">
// This is module2.js, import multiple values into this module from module1.js
    
import {simpleString, simpleFunction, simpleNumber, myFunction} from './module1.js';

console.log(simpleString, simpleFunction, simpleNumber, myFunction);

</code></pre>

                <p><strong>3. Importing multiple named exports using an import namespace (i.e. importing an entire
                        module):</strong></p>

                <pre class="line-numbers"><code class="language-js noRun">
// This is module2.js, import all values into this module from module1.js

import * as m1 from './module1.js';

console.log(m1.simpleString, m1.simpleFunction, m1.simpleNumber, m1.myClass, m1.myFunction);

</code></pre>

                <p><strong>4. Importing multiple named exports, renamed:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun">
// This is module2.js, import renamed values into this module from module1.js

import {simpleString as sS, myClass as mF } from './module1.js';

console.log(sS, mF);

</code></pre>


                <h3>10.3 : Importing and Exporting a Default Value</h3>

                <p>A module can export one default value using the <code>default</code> keyword in combination
                    with the <code>export</code> keyword.</p>

                <p>Two styles are available when exporting a <code>default</code> value from a module:</p>

                <p><strong>1. Inline default exporting:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun">
// moduleA.js 
// Of course only one default can be used per module. 
// Each export below would not live in the same file, it would throw an error
// Consider each line below to be in its own module

// literal values (no const or let used)
export default 'string';
export default 5;
export default true;
export default {};
export default [];
   
// expressions
const simpleString = 'simpleString';
const simpleNumber = 5;
export default simpleString;
export default simpleNumber;
export default (() => {});

// declarations
export default class myClass {} // semicolon optional with this style 
export default function myFunction(){} // semicolon optional with this style

// unnamed declarations
export default class {} // semicolon optional with this style
export default function(){} // semicolon optional with this style

</code></pre>

                <p><strong>2. Renamed to default exporting</strong></p>

                <pre class="line-numbers"><code class="language-js noRun">
// moduleA.js

const simpleString = 'simpleString'; // No default keyword here

export {simpleString as default}; // Exporting as default

</code></pre>

                <p>One style is available when importing the above default exports into another module:</p>

                <p><strong>1. Renamed default</strong></p>


                <pre class="line-numbers"><code class="language-js noRun">
// This is moduleB.js, import default from moduleA.js
    
// assumes you know that moduleA.js exports one default value
// the default is imported and renamed where it is imported
import nameGivenHereToDefault from './moduleA.js';

console.log(nameGivenHereToDefault);

</code></pre>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>In the end, default exports are just values, renamed to the word <code>default</code>. For this reason <a href="https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad?gi=7ebe9d8b07d7">many avoid default exports and just use named exports</a>.</li>
                        <li>The word <code>default</code>, just like the word <code>new</code>, can't be used as a
                            variable name.</li>
                    </ol>
                </div>

                <h3>10.4 : Combining a Default and Named Exports When Exporting and Importing</h3>

                <p>Modules can export both a single default value, along with other named values:</p>

                <pre class="line-numbers"><code class="language-js noRun">              
// moduleA.js
const myString = 'myString';
export default myString;
const myFunction = () => { };
export const myNumber = 5;

export { myFunction };

</code></pre>

                <p>All the values export from moduleA.js above can be imported together using the following two
                    styles:</p>

                <p><strong>By name:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun"> 
// moduleB.js

import nameGivenHereToDefault, {myFunction, myNumber} from './moduleA.js';

console.log(nameGivenHereToDefault, myFunction, myNumber);

</code></pre>

                <p><strong>Using a single namespace:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun"> 
// moduleB.js                    

import * as namespace from './moduleA.js';

console.log(namepsace.default, namespace.myFunction, namespace.myNumber);

</code></pre>

                <h3>10.5 : Imported Values Are Live References, Not Copies</h3>

                <p>ES modules do not create copied values when importing values. Instead, ES
                    modules create pointers/references to live values.</p>

                <p>In the code example below the <code>counter</code> and <code>addToCounter()</code> values are
                    imported into module1.js, from module2.js. From module1.js I call
                    the <code>addToCounter()</code> function, imported from module2.js, which changes the value of <code>counter</code>
                    in module2.js and thus
                    module1.js also. This is because the values imported are live values not copies of values.</p>

                <div class="codesandboxlinkNotDynamic"><a href="https://codesandbox.io/s/vyjp03v0j7">run/edit in
                        codesandbox.io (Only runs in: Edge 17+, Firefox 61+, Chrome 63+, Safair 11.1+, iOS Safari
                        11.2+, Chrome Android 69+)</a></div>

                <pre class="line-numbers"><code class="language-markup">
<!DOCTYPE html>
&lt;html&gt;&#10;&lt;head&gt;&#10;    &lt;meta charset=&quot;utf-8&quot; /&gt;&#10;&lt;/head&gt;&#10;&#10;&lt;body&gt;&#10;&#10;    &lt;!--  Entry module is module1.js, dependency graph starts here --&gt;&#10;    &lt;script type=&quot;module&quot; src=&quot;./module1.js&quot;&gt;&lt;/script&gt;&#10;    &lt;!--  module1.js imports and uses module2.js --&gt;&#10;&#10;    &lt;!-- module1.js&#10;        import { counter, addToCounter } from &quot;./module2.js&quot;; &#10;        console.log(counter); // logs 0 &#10;        addToCounter(10); &#10;        console.log(counter); // logs 10&#10;&#10;&#10;        // Note, can&apos;t do this:&#10;        // counter = 10;&#10;    --&gt;&#10;&#10;    &lt;!-- module2.js&#10;        export let counter = 0; &#10;        &#10;        export const addToCounter = function(amountToAdd) { &#10;            counter = counter + amountToAdd; &#10;        };&#10;&#10;        export const foo = &quot;foo&quot;;    &#10;    --&gt;&#10;&#10;&lt;/body&gt;&#10;&lt;/html&gt;
    </pre></code>

                <p>Keep in mind that imported values can't directly be changed. In other words, in the code example
                    above directly changing the <code>counter</code> value from module1 will throw an error.</p>

                <div class="notes">

                    <p>
                        <strong>Notes:</strong>
                    </p>
                    <ol>
                        <li>In contrast to ES modules, CommonJS modules import copied values instead of live read-only
                            values.</li>
                    </ol>
                </div>


                <h3>10.6 : Re-exporting imports</h3>

                <p>While not commonly done it's possible to re-export, imported values, using the URL string specifier.
                    When re-exporting, the values never enter the scope of the module that is re-exporting them. Values
                    simply pass through to the scope where they are not re-exported.</p>

                <p>Re-exporting imported values can be done using the following styles:</p>

                <p><strong>Single namespace:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun"> 
export * from 'myModule.js';         
    </code></pre>

                <p><strong>Named values:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun"> 
export {value1FromMyModule, value2FromMyModule} from 'myModule.js';           
    </code></pre>

                <p><strong>Re-named values:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun"> 
export {value1FromMyModule as renamed1, value2FromMyModule as renamed2} from 'myModule.js';                 
    </code></pre>

                <p><strong>As a default value:</strong></p>

                <pre class="line-numbers"><code class="language-js noRun"> 
export {default} from 'myModule.js';

// or

export {value1FromMyModule as default} from 'myModule.js';
    </code></pre>

            </div>

        </div>
    </div>

    <script src="assets/slideout.min.js "></script>
    <script src="assets/jquery-3.3.1.slim.min.js "></script>

    <script>
        // Create slide out TOC
        var slideout = new Slideout({
            'panel': document.getElementById('panel'),
            'menu': document.getElementById('menu'),
            'padding': 356,
            'tolerance': 70
        });
        
        // Create TOC dynamically from content
        jQuery('.chapter').each(function (index) {

            jQuery('h2', '#chapter' + (index + 1)).each(function (i) {
                $(this).attr('id', (index + 1));
                $('#toc').append('<h5><a href="#' + (index + 1) + '">' + $(this).html() + '</a></h5>');
            });

            jQuery('h3', '#chapter' + (index + 1)).each(function (i) {
                $(this).attr('id', (index + 1) + '.' + (i + 1));
                $('#toc').append('<h6><a href="#' + (index + 1) + '.' + (i + 1) + '">' + $(this).html() + '</a></h6>');
            });

        });
        

        jQuery('#panel').on('click', 'a:not(.codesandboxlink a, .toolbar a)', function () {
            window.open($(this).attr('href'));
            return false;
        });
        
        // create link to codesandob
        jQuery('.line-numbers:has(.language-js)').not(':has(.noRun)').before('<div class="codesandboxlink"><a href="#">run/edit in codesandbox.io</a></div>');
        
        // create event handler for codesandbox link
        jQuery('#panel').on('click', '.codesandboxlink a', function (e) {
            const code = $(this).parent().next('.code-toolbar:has(.language-js)').find('code').text();
            var newWindow = window.open("", "_blank");
            fetch("https://codesandbox.io/api/v1/sandboxes/define?json=1", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Accept: "application/json"
                },
                body: JSON.stringify({
                    files: {
                        "index.js": {
                            content: code
                        },
                        "index.html": {
                            content: '<script src="https://unpkg.com/core-js-bundle@3.0.0-beta.3/index.js"><\/script><script src="index.js"><\/script>'
                        },
                        ".babelrc": {
                            "content": {
                                "presets": ["env", "stage-0"]
                            }
                        },
                        "package.json": {
                            "content": {
                                "name": "ES2015+ Enlightenment Code Example",
                                "version": "1.0.0",
                                "description": "Simple Parcel/Babel Sandbox",
                                "main": "index.html",
                                "scripts": {
                                    "start": "parcel index.html --open",
                                    "build": "parcel build index.html"
                                },
                                "devDependencies": {
                                    "parcel-bundler": "^1.9.7",
                                    "babel-preset-env": "^1.7.0",
                                    "babel-preset-stage-0": "^6.24.1"
                                }
                            }
                        }
                    }
                })
            })
                .then(x => x.json())
                .then(data => {
                    newWindow.location.href = 'https://codesandbox.io/embed/' + data.sandbox_id + '?forcerefresh=1&eslint=1&expanddevtools=1&hidenavigation=1&module=%2Findex.js';
                }
                );
            e.preventDefault();
        });
        
        // toggle TOC from hamburger icon
        document.querySelector('#menuButton').addEventListener('click', function () {
            slideout.toggle();
        });
        
        // restore slideout state after clicking nav link
        jQuery("#menu").on("click", "a[href^='#']", function() {
          actualResizeHandler();
        })
        
        // toggle TOC on window resize
        window.addEventListener("resize", resizeThrottler, false);
        var resizeTimeout;
        function resizeThrottler() {
        // ignore resize events as long as an actualResizeHandler execution is in the queue
        if ( !resizeTimeout ) {
            resizeTimeout = setTimeout(function() {
            resizeTimeout = null;
            actualResizeHandler();
        
            // The actualResizeHandler will execute at a rate of 15fps
            }, 66);
        }
        }
        function actualResizeHandler() {
            if (window.innerWidth > 1036){
                slideout.open();
            }else{
                slideout.close();
            }
        }
        
        // open TOC on load if window is wide enough
        window.addEventListener("load", function(event) {
            if (window.innerWidth > 1036){
                slideout.open();
            }else{
                slideout.close();
            }
        });

    </script>
</body>

</html>