ES6 features

1. Difference between let/ const/ var and its usage. 2. Usage of Arrow functions and how is it differ from normal ES5 functions. 3. Object/ Array destructuring. 4. Spread/ Rest operators and its usage. 5. Difference between map/ filter and reduce. 6. New Array methods. 7. Difference between Promise/ Observables/ Async- await. 8. Interfaces and its usage. How is it differ from inheritance. 9. Inheritance in ES6/ Typescript

by Tessy Thomas

HTML

<h1>ES6 Features</h1>
<main>
   <ul class="no-bullets">
      <li>
         <h2>1. Difference between var, let and const</h2>
         <ul>
            <li>
               <h4>Scoping</h4>
               let and const are block-scoped binding constructs. The scope is confined for both let and const to the block in which the
               variable is defined. var is global scoped.The scope of a var variable is the entire enclosing function.
            </li>
            <li>
               <h4>Value Assignment</h4>
               let and var can be reassigned with a different value. const is restricted to single assignment. 
            </li>
            <li>
               <h4>
                  Variable Declarations
               </h4>
               let - It is possible to declare a variable without assigning a value. It will be assigned an undefined as value. const -
               It is not possible to declare const without assigning a value. This will throw error.
            </li>
            <li>
               <h4>Variable hoisting</h4>
               let - let variables are not initialized until their definition is evaluated. So, if you refer let variable before its initialization,
               it will throw a reference error. var - If you refer var variable before its initialization, it will take
               undefined as value.
            </li>
            <li>
               <h4>Redeclarations</h4>
               For both let and const, it is not possible to redeclare same variable again in the same block. This will throw an error.
               But, this is possible for var.
            </li>
            Example:
         </ul>
         <pre>
            <code>
              function bindingConstructs() {
                //Variable Hoisting
                print(v);
                //print(x); This line will error out.
                let x; 
                const z = 'well';
                var v;
                {
                  let w;
 ...

CSS

ol li {
      -webkit-margin-before: 1.33em;
    -webkit-margin-after: 1.33em;
}
#log {
  border: 1px solid gray;
  min-height: 400px;
  min-width: calc(100% - 20px);
  margin: 10px; 
  float: left;
  word-break: break-word;
}
ul.no-bullets {
  list-style: none;
}
main {
  width: 70%;
  order:1;
  float: left;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 400px;
}
aside {
  width: 30%;
  order: 2;
  float: right;
}
body {
  overflow: hidden;
}
#clearBtn {
  float: right;
}

JavaScript

var bindingConstructDemoBtn = document.getElementById('bindingConstructDemo');
var arrowFunctionsDemoBtn = document.getElementById('arrowFunctionsDemo');
var normalFunctionsDemoBtn = document.getElementById('normalFunctionsDemo');
var normalFunctionsBindDemoBtn = document.getElementById('normalFunctionsBindDemo');
var arrayMethodsDemoBtn = document.getElementById('arrayMethodsDemo');
var fromDemoBtn = document.getElementById('fromDemo');
var ofDemoBtn = document.getElementById('ofDemo');
var findDemoBtn = document.getElementById('findDemo');
var fillDemoBtn = document.getElementById('fillDemo');
var findAndFillDemoBtn = document.getElementById('findAndFillDemo');
var findIndexDemoBtn = document.getElementById('findIndexDemo');
var swapDemoBtn = document.getElementById('swapDemo');
var extractEmailBtn = document.getElementById('extractEmail');
var parseVersionsBtn = document.getElementById('parseVersions');
var logger = document.getElementById('log');
var clearBtn = document.getElementById('clearBtn');
var varTestBtn = document.getElementById('varDemo');
var letTestBtn = document.getElementById('letDemo');
var spreadDemo1Btn = document.getElementById('spreadDemo1');
var spreadDemo2Btn = document.getElementById('spreadDemo2');
var filterDemoBtn = document.getElementById('filterDemoBtn');
var mapDemoBtn = document.getElementById('mapDemoBtn');
var reduceDemoBtn = document.getElementById('reduceDemoBtn');

var print = function(message) {
    if (typeof message == 'object') {
        logger.innerHTML += '<br />' + (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
    } else {
        logger.innerHTML += '<br />' + message + '<br />';
    }
}

var clearLog = function() {
    logger.innerHTML = "";
}

function bindingConstructs() {
    //Variable Hoisting
    print(v);
    //print(x); This line will error out.
    let x;
    const z = 'well';
    var v; {
        let w;
        // okay, block scoped name
        const x = "don't be";
     ...