hemanth / paws-on-es6

Minimalist examples of ES6 functionalities.

Minimalist examples of ES6 functionalities.

You might like jsfeatures.in

Includes:

• arrow

• block-scope

• class

• computed-property-names

• default-params

• destructuring

• direct-proxy

• for-of

• generators

• maps

• modules

• object-literal

• object-observe

• promise

• property-method-assignment

• rest-params

• sets

• spread

• symbols

• tail-recursion

• template-literals

• unicode-regex

• weakmaps

• weaksets

paws-on-es6's Issues

No need for strict mode

https://github.com/hemanth/paws-on-es6/blob/master/tail-recursion.js#L2

Module block syntax deprecated

​

Promise example missing

Was looking for example on promises that was introduced in ES6

block scope

function aboutme(){
  {
    let wife = 1;
    var gfs = 10;
  }
  console.log(wife,gfs); // 1, undefined.
}

Shouldn't that be:

function aboutme(){
  {
    let wife = 1;
    var gfs = 10;
  }
  console.log(wife,gfs); // undefined, 10
}

as variables with let are block scoped so wife is not visible to console right?

Array comprehensions were dropped from ES6

​

misleading arrow example

I'm not sure the constructor-like example in arrow.js from 844241b is correct.

According to @lukehoban's ES6 Features document cited by the Babel team:

arrows share the same lexical this as their surrounding code

According to @sebmck in a comment before closing babel/babel#730:

Top level this is undefined ES6 modules as they're implicitly strict mode.
Arrow functions inherit the outer this.

The practical upshot of which is that your Person example isn't the constructor you might think it is. Inside the function, this cannot refer to a constructed object. Instead, this is undefined. As Babel transpiles it:

var Person = function (fname, lname, age) {
   undefined.fname = fname;
   undefined.lname = lname;
   undefined.age = age;
   undefined.yo = function () {
      return "Yo! I'm " + undefined.fname + "!";
   }; // `this` reffers to Person.
};

Make Person an ES6 class or ES5 constructor function, and yo works as you expect:

// ES6
class Person {
    constructor(fname, lname, age) {
       this.fname= fname;
       this.lname = lname;
       this.age = age;
       this.yo = () => `Yo! I'm ${this.fname}!`; // `this` refers to Person.
    }
}

// ES5
function Person(fname, lname, age) {
   this.fname= fname;
   this.lname = lname;
   this.age = age;
   this.yo = () => `Yo! I'm ${this.fname}!`; // `this` refers to Person.
}