Demo of ES6 arrow functions

// Fat arrows change how `this` is handled. // ES6 Arrows bind `this` to the immediate enclosing lexical scope // I.e. the value of `this` inside an arrow function is the same as the value of `this` in the arrow’s enclosing function

by Frank Liu

HTML

<h1>ES6 arrow functions</h1>
<pre>
// Fat arrows change how `this` is handled.
// ES6 Arrows bind `this` to the immediate enclosing lexical scope
// I.e. the value of `this` inside an arrow function is the same as the value of `this` in the arrow’s enclosing function
</pre>

<p>
        <ul>
            <li>foo</li>
            <li>bar</li>
        </ul>
<button id="b1">function</button>
<p>
<button id="b2">arrow function</button>

JavaScript

$("#b1").click(function () {
    $("li").each(function () {
        console.log(this);
    });
});

$("#b2").click(function () {
    $("li").each(
       () => console.log(this)
    );
});
console.log( myConcat('#') );
function myConcat(separator) {
   var result = ''; // initialize list
   var i;
   console.log(arguments.length);
   // iterate through arguments
   for (i = 0; i < arguments.length; i++) {
      result += arguments[i] + separator;
   }
   return result;
}