According to [this](https://babeljs.io/blog/2015/06/07/react-on-es6-plus) babel documentation, the correct way to use ES6+ with React is to initial components like this:

    class Video extends React.Component {
      static defaultProps = {
        autoPlay: false,
        maxLoops: 10,
      }
      static propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
      }
      state = {
        loopsRemaining: this.props.maxLoops,
      }
    }

But some official examples, like Dan Abramov&#39;s own [React DnD](https://github.com/gaearon/react-dnd/blob/master/examples/04%20Sortable/Simple/Container.js) module, uses ES6+ but still defines state within the constructor:

    constructor(props) {
        super(props);
        this.moveCard = this.moveCard.bind(this);
        this.state = {
           // state stuff
        }
    }

Now Dan Abramov, being a significant contributor to React, probably knows that he can define state outside the constructor, yet still opts to do it within the constructor. 

So I&#39;m just wondering which way is better and why?

Is it better to define state in constructor or using property initializers?

There is a proposal for introducing C# style `async-await`. I know Babel.js transpiles ES6 to ES5, but is there any way to make it transpile async-await to `ES5`?

Transpile Async Await proposal with Babel.js?

I am using ReactJS with Babel and Webpack and using ES6 as well as the [proposed class fields][1] for arrow functions. I understand that arrow functions make things more efficient by [not recreating the functions each render][2] similar to how binding in the constructor works. However, I am not 100% sure if I am using them correctly. The following is a simplified section of my code in three different files.

**My code:**

Main.js

    prevItem = () =&gt; {
	    console.log(&quot;Div is clicked&quot;)
    }
    
    render(){
        return (
             &lt;SecondClass prevItem={this.prevItem} /&gt;
        )
    }

SecondClass.js

    &lt;ThirdClass type=&quot;prev&quot; onClick={()=&gt;this.props.prevItem()} /&gt;

ThirdClass.js

	&lt;div onClick={()=&gt;{this.props.onClick()}}&gt;Previous&lt;/div&gt;

**Question:**

Is my code above using the arrow functions correctly? I noticed that for SecondClass.js I could have also used:

    &lt;ThirdClass type=&quot;prev&quot; onClick={this.props.prevItem} /&gt;

Is there a difference between one method or the other since I used an ES6 arrow function in my original function definition? Or should I be using the arrow syntax all the way through until my last div?


  [1]: https://github.com/tc39/proposal-class-fields
  [2]: https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

Correct use of arrow functions in React

I see that babel.js decorators (available in &quot;stage 1&quot;) implement the spec at https://github.com/wycats/javascript-decorators. It appears that decorators are limited to (1) classes, (2) accessors, and (3) methods. In my case, I want to use decorators on plain old **functions**, as in 

    @chainable
    function foo() { }

where (just an example)

    function chainable(fn) {
      return function() {
        fn.apply(this, arguments);
        return this;
      };
    }

I don&#39;t see any logical reason why decorators should not be able to apply to functions. My question is, is there some way to accomplish this? Or is there some good reason why functions cannot be decorated?

It turns out there is an issue raised for this at https://github.com/wycats/javascript-decorators/issues/4.

Decorators on functions

When trying to use async/await in react-native, I am getting the following error:


        uncaught error Error: SyntaxError: /Users/senthilsivanath/Documents/MusicTulip/index.ios.js: Unexpected token (50:23)
      48 |   renderScene: function(route,nav) {
      49 |     try {
      50 |          const response = await signIn.isLoggedIn();

My `.babelrc` file is:

    { &quot;presets&quot;: [&quot;react-native&quot;, &quot;es2015&quot;, &quot;babel-preset-stage-3&quot;] }







Error using async/await in React Native

I&#39;m new to using ES6 classes with React, previously I&#39;ve been binding my methods to the current object (show in first example), but does ES6 allow me to permanently bind a class function to a class instance with arrows? (Useful when passing as a callback function.) I get errors when I try to use them as you can with CoffeeScript:

    class SomeClass extends React.Component {
    
      // Instead of this
      constructor(){
        this.handleInputChange = this.handleInputChange.bind(this)
      }
    
      // Can I somehow do this? Am i just getting the syntax wrong?
      handleInputChange (val) =&gt; {
        console.log(&#39;selectionMade: &#39;, val);
      }


So that if I were to pass `SomeClass.handleInputChange` to, for instance `setTimeout`, it would be scoped to the class instance, and not the `window` object.

How to use arrow functions (public class fields) as class methods?

How one can write a function, which takes only few attributes in most-compact way in ES6?

I&#39;ve came up with solution using destructuring + simplified object literal, but I don&#39;t like that list of fields is repeated in the code.

Is there an even slimmer solution?

    (v) =&gt; {
        let { id, title } = v;
        return { id, title };
    }

One-liner to take some properties from object in ES 6

I read that async functions marked by the `async` keyword implicitly return a promise:


    async function getVal(){
     return await doSomethingAync();
    }
    
    var ret = getVal();
    console.log(ret);

but that is not coherent...assuming `doSomethingAsync()` returns a promise, and the await keyword will return the value from the promise, not the promise itsef, then my getVal function *should* return that value, not an implicit promise.

So what exactly is the case? Do functions marked by the async keyword implicitly return promises or do we control what they return?

Perhaps if we don&#39;t explicitly return something, then they implicitly return a promise...?

To be more clear, there is a difference between the above and

    function doSomethingAync(charlie) {
        return new Promise(function (resolve) {
            setTimeout(function () {
                resolve(charlie || &#39;yikes&#39;);
            }, 100);
        })
    }

    async function getVal(){
       var val = await doSomethingAync();  // val is not a promise
       console.log(val); // logs &#39;yikes&#39; or whatever
       return val;  // but this returns a promise
    }
    
    var ret = getVal();
    console.log(ret);  //logs a promise

In my synopsis the behavior is indeed inconsistent with traditional return statements. It appears that when you explicitly return a non-promise value from an `async` function, it will force wrap it in a promise.
I don&#39;t have a big problem with it, but it does defy normal JS.

async/await implicitly returns promise?

As you know, there is a proposal for a shortcut for `.bind()` function, so you can write:

    ::this.handleStuff
and it will work like that in es5:

    this.handleStuff.bind(this)
My question is: will it be possible to pass arguments this way? 

I mean a way of writing this with the aforementioned shortcut:

    this.handleStuff.bind(this, &#39;stuff&#39;)
It&#39;s a pretty common pattern in React, so it would be nice to shorten it a little.

JavaScript double colon (bind operator)

 I&#39;ve come across the term `ESNext`, and wondering it is the same as the ECMAScript.

So, I have these questions here: 

 - What is ESNext, actually? 
 - Does it refer to any specific version of ECMAScript?

What is ESNext?

I have to pass a function to another function, and execute it as a callback. The problem is that sometimes this function is async, like:

    async function() {
     // Some async actions
    }

So I want to execute `await callback()` or `callback()` depending on the type of function that it is receiving.

Is there a way to know the type of the function??

How to know if a function is async?

Seem to be having some issues incorporating async/await with .reduce(), like so:

    const data = await bodies.reduce(async(accum, current, index) =&gt; {
      const methodName = methods[index]
      const method = this[methodName]
      if (methodName == &#39;foo&#39;) {
        current.cover = await this.store(current.cover, id)
        console.log(current)
        return {
          ...accum,
          ...current
        }
      }
      return {
        ...accum,
        ...method(current.data)
      }
    }, {})
    console.log(data)

The `data` object is logged *before* the `this.store` completes...

I know you can utilise `Promise.all` with async loops, but does that apply to `.reduce()`?

JavaScript array .reduce with async/await

I was just reading this fantastic article &#171;[Generators][1]&#187; and it clearly highlights this function, which is a helper function for handling generator functions:

&lt;!-- language: lang-js --&gt;

    function async(makeGenerator){
      return function () {
        var generator = makeGenerator.apply(this, arguments);
    
        function handle(result){
          // result =&gt; { done: [Boolean], value: [Object] }
          if (result.done) return Promise.resolve(result.value);
    
          return Promise.resolve(result.value).then(function (res){
            return handle(generator.next(res));
          }, function (err){
            return handle(generator.throw(err));
          });
        }
    
        try {
          return handle(generator.next());
        } catch (ex) {
          return Promise.reject(ex);
        }
      }
    }

*which I hypothesize is more or less the way the `async` keyword is implemented with `async`/`await`.* So the question is, if that is the case, then what the heck is the difference between the `await` keyword and the `yield` keyword? Does `await` always turn something into a promise, whereas `yield` makes no such guarantee? That is my best guess!

You can also see how `async`/`await` is similar to `yield` with generators in this article where he describes the &#39;spawn&#39; function [ES7 async functions][2].

  [1]: https://www.promisejs.org/generators
  [2]: https://jakearchibald.com/2014/es7-async-functions

Difference between async/await and ES6 yield with generators

`Error: Missing class properties transform`

`Test.js`:

    export class Test extends Component {
      constructor (props) {
        super(props)
      }
    
      static contextTypes = {
        router: React.PropTypes.object.isRequired
      }


`.babelrc`:

    {
      &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;, &quot;stage-0&quot;],
      &quot;plugins&quot;: [&quot;transform-class-properties&quot;]
    }

`package.json`:

    &quot;babel-core&quot;: &quot;^6.5.1&quot;,
    &quot;babel-eslint&quot;: &quot;^4.1.8&quot;,
    &quot;babel-loader&quot;: &quot;^6.2.2&quot;,
    &quot;babel-plugin-react-transform&quot;: &quot;^2.0.0&quot;,
    &quot;babel-plugin-transform-class-properties&quot;: &quot;^6.5.2&quot;,
    &quot;babel-preset-es2015&quot;: &quot;^6.5.0&quot;,
    &quot;babel-preset-react&quot;: &quot;^6.5.0&quot;,
    &quot;babel-preset-stage-0&quot;: &quot;^6.5.0&quot;,
    &quot;babel-register&quot;: &quot;^6.5.2&quot;,

I have scoured the web and all fixes revolve around: Upgrading to babel6, switching the order of &quot;stage-0&quot; to be after &quot;es2015&quot;. All of which I have done.

Error: Missing class properties transform

There are already a lot of [cool features][1] in ES6/ES7 for defining Javascript objects. However, the following pattern is common in Javascript:

&lt;!-- language: lang-js --&gt;

    const obj = { 
      requiredKey1: ..., 
      requiredKey2: ... 
    };
    
    if (someCondition) { 
      obj.optionalKey1 = ...;
    }

Is there a way to define the object all at once with both optional and required keys?

  [1]: https://devhints.io/es6

Succinct/concise syntax for &#39;optional&#39; object keys in ES6/ES7?

I&#39;m looking at some ES6 code and I don&#39;t understand what the @ symbol does when it is placed in front of a variable. The closest thing I could find has something to do with private fields?

Code I was looking at from the [redux library](https://github.com/gaearon/redux/blob/master/examples/counter/containers/CounterApp.js#L7):

    import React, { Component } from &#39;react&#39;;
    import { bindActionCreators } from &#39;redux&#39;;
    import { connect } from &#39;redux/react&#39;;
    import Counter from &#39;../components/Counter&#39;;
    import * as CounterActions from &#39;../actions/CounterActions&#39;;
    
    @connect(state =&gt; ({
      counter: state.counter
    }))
    export default class CounterApp extends Component {
      render() {
        const { counter, dispatch } = this.props;
        return (
          &lt;Counter counter={counter}
                   {...bindActionCreators(CounterActions, dispatch)} /&gt;
        );
      }
    }

Here is a blog post I found on the topic: [https://github.com/zenparsing/es-private-fields](https://github.com/zenparsing/es-private-fields)

In this blog post all the examples are in the context of a class - what does it mean when the symbol is used within a module?

What does the at symbol (@) do in ES6 javascript? (ECMAScript 2015)

I&#39;m new to nodejs. I’m not seeing the response in ex 1, but i see in ex 2. Why? Await works for me in other places, using babel.

Ex 1

     let res = await request(url)
     console.log(res);
     console.log(res.body);

Ex 2

    request(url, function (error, res, body) {
     if (!error &amp;&amp; response.statusCode == 200) {
     console.log(body) 
     }
    });

Await works in other places, I’m using babel and required modules for es6 and es7 features. For example, await works in squelize call, i validated. But it doesn’t work for request call. Why?

Why await is not working for node request module?

I found myself in the situation where I wanted to convert a `BigInt` value to a `Number` value. Knowing that my value is a [safe integer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger), how can I convert it?

How to convert BigInt to Number in JavaScript?

All four functions called below in `update` return promises.
```javascript
async function update() {
   var urls = await getCdnUrls();
   var metadata = await fetchMetaData(urls);
   var content = await fetchContent(metadata);
   await render(content);
   return;
}
```

What if we want to abort the sequence from outside, at any given time?

For example, while `fetchMetaData` is being executed, we realize we no longer need to render the component and we want to cancel the remaining operations (`fetchContent` and `render`). Is there a way to abort/cancel these operations from outside the `update` function? 

We could check against a condition after each `await`, but that seems like an inelegant solution, and even then we will have to wait for the current operation to finish.

Is there a way to short circuit async/await flow?

Currently, the only stable way to process a series of async results in JavaScript is using the event system. However, three alternatives are being developed:

Streams: https://streams.spec.whatwg.org
&lt;br&gt;
Observables: https://tc39.github.io/proposal-observable
&lt;br&gt;
Async Iterators: https://tc39.github.io/proposal-async-iteration

What are the differences and benefits of each over events and the others?

Do any of these intend to replace events?

All Ecmascript Next Solutions on Gang of Coders

Total of 20 Ecmascript Next Solutions