You need to use [assignment separate from declaration][1] syntax:

    ({
        screenings,
        size
    } = source);

[Babel REPL Example][2]

From the linked docs:

&gt; The ( .. ) around the assignment statement is required syntax when
&gt; using object literal destructuring assignment without a declaration

And obviously you need to use this as you can&#39;t redeclare a `let` variable. If you were using `var`, you could just redeclare `var { screenings, size } = source;`


  [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#assignment_separate_from_declaration_2
  [2]: https://babeljs.io/repl/#?experimental=true&amp;evaluate=true&amp;loose=false&amp;spec=false&amp;code=let%20source%2C%0D%0A%20%20%20%20screenings%2C%0D%0A%20%20%20%20size%3B%0D%0A%0D%0Asource%20%3D%20%7B%0D%0A%20%20%20%20screenings%3A%20&#39;a&#39;%2C%0D%0A%20%20%20%20size%3A%20&#39;b&#39;%0D%0A%7D%3B%0D%0A%0D%0A(%7B%20screenings%2C%20size%20%7D%20%3D%20source)%3B%0D%0Aconsole.log(screenings%2C%20size)%3B

I have been reading about Optionals in Swift, and I have seen examples where `if let` is used to check if an Optional holds a value, and in case it does – do something with the unwrapped value.

However, I have seen that in Swift 2.0 the keyword `guard let` is used mostly. I wonder whether `if let` has been removed from Swift 2.0 or if it still possible to be used.

Should I change my programs that contain `if let` to `guard let`?

Swift: guard let vs if let

I am familiar with `switch` statements in Swift, but wondering how to replace this piece of code with a `switch`:

    if someVar &lt; 0 {
        // do something
    } else if someVar == 0 {
        // do something else
    } else if someVar &gt; 0 {
        // etc
    }

Lesser than or greater than in Swift switch statement

The following produces a syntax error:

&lt;!-- language: lang-js --&gt;

    let source,
        screenings,
        size;
    
    source = {
        screenings: &#39;a&#39;,
        size: &#39;b&#39;
    };
    
    {
        screenings,
        size
    } = source;

Expected result:

    screenings should be equal to &#39;a&#39;
    size should be equal to &#39;b&#39;

How to destructure an object to an already defined variable?

The following produces a syntax error:

<pre><code class="hljs language-bash">let source,
 screenings,
 size;

source = {
 screenings: 'a',
 size: 'b'
};

{
 screenings,
 size
} = source;
</code></pre>
Expected result:
<pre><code class="hljs language-css">screenings should be equal to 'a'
size should be equal to 'b'
</code></pre>

Is there a `null`-safe property access (null propagation / existence) operator in ES6 (ES2015/JavaScript.next/Harmony) like **`?.`** in **CoffeeScript** for example? Or is it planned for ES7?

    var aThing = getSomething()
    ...
    aThing = possiblyNull?.thing

This will be roughly like:

    if (possiblyNull != null) aThing = possiblyNull.thing

Ideally the solution should not assign (even `undefined`) to `aThing` if `possiblyNull` is `null`

Null-safe property access (and conditional assignment) in ES6/2015

I&#39;m attempting to use `Object.assign()` in an ES6 web app compiled by Babel with webpack, but I&#39;m getting an error:

    Uncaught TypeError: Object.assign is not a function

I&#39;m already using [`babel-loader`][1] to transpile ES6 to ES5, so all my other ES6 code is working. Yet, `Object.assign()` only works after I also `import &quot;babel-core/polyfill&quot;` in my codebase. I see that I can also fix this [by importing babel-runtime][2], but I&#39;d like to understand _why_ `Object.assign()` requires more than what `babel-loader` performs — shouldn&#39;t `babel-loader` preprocess everything, including `Object.assign()`?


  [1]: https://github.com/babel/babel-loader
  [2]: https://stackoverflow.com/questions/32123050/use-babel-loader-but-object-assign-is-not-a-function

Why does Object.assign() require a polyfill when babel-loader is being used?

The following works great when the **enter** key is released. **What other options are available for the `keyup` in addition to `keyup.enter`?**

    &lt;input #inputstring (keyup.enter)=&quot;doSomething(inputstring.value)&quot;/&gt;

What are the options for (keyup) in Angular2?

I have some data called stations which is an array containing objects.

    stations : [
      {call:&#39;station one&#39;,frequency:&#39;000&#39;},
      {call:&#39;station two&#39;,frequency:&#39;001&#39;}
    ]

I&#39;d like to render a ui component for each array position. So far I can write

     var stationsArr = []
     for (var i = 0; i &lt; this.data.stations.length; i++) {
         stationsArr.push(
             &lt;div className=&quot;station&quot;&gt;
                 {this.data}
             &lt;/div&gt;
         )
     }

And then render

    render(){
     return (
       {stationsArr}
     )
    }

The problem is I&#39;m getting all of the data printing out. I instead want to just show a key like `{this.data.call}` but that prints nothing.

How can I loop through this data and return a new UI element for each position of the array?

Rendering React Components from Array of Objects

I reviewed the following SO question:
https://stackoverflow.com/questions/2521277/what-are-the-hot-and-cold-observables

To summarize:

- a cold observable emits its values when it has an observer to consume them, i.e. the sequence of values received by observers is independent of time of subscription. All observers will consume the same sequence of values.
- a hot observable emits value independently of its subscriptions, i.e. the values received by observers are a function of the time of subscription.

Yet, I feel like hot vs. cold is still a source of confusion. So here are my questions:

- Are all rx observables cold by default (with the exception of subjects)? 

  I often read that events are the typical metaphor for hot observables, but I also read that `Rx.fromEvent(input, &#39;click&#39;)` is a cold observable(?).

- Are there/what are the Rx operators which turn a cold observables into a hot observable (apart from `publish`, and `share`)?

  For instance, how does it work with Rx operator `withLatestFrom`? Let `cold$` be a cold observable which has somewhere been subscribed to. Will `sth$.withLatestFrom(cold$,...)` be a hot observable? 

  Or if I do `sth1$.withLatestFrom(cold$,...), sth2$.withLatestFrom(cold$,...)` and subscribe to `sth1` and `sth2`, will I always see the same value for both `sth`?

- I thought `Rx.fromEvent` creates cold observables but that is not the case, as mentioned in one of the answers. However, I am still baffled by this behaviour: https://codepen.io/anon/pen/NqQMJR?editors=101. Different subscriptions get different values from the same observable. Wasn&#39;t the `click` event shared?

Hot and Cold observables: are there &#39;hot&#39; and &#39;cold&#39; operators?

Recently, I&#39;ve started tinkering with React.js and I love it. I started out in the regular ES5, so as to get the hang of things, the docs are all written in ES5...

But now I wanted to try ES6, because it&#39;s shiny and new, and it does seem to simplify some things. What bothers me a lot is that for every method I had added into my component classes I now have to bind &#39;this&#39; to, otherwise it doesn&#39;t work. So my constructor ends up looking like this:

    constructor(props) {
      super(props);
      this.state = { ...some initial state... }

      this.someHandler = this.someHandler.bind(this);
      this.someHandler = this.someHandler.bind(this);
      this.someHandler = this.someHandler.bind(this);
      this.someHandler = this.someHandler.bind(this);
      this.someHandler = this.someHandler.bind(this);
      this.someHandler = this.someHandler.bind(this);
      this.someHandler = this.someHandler.bind(this);
    }

If I were to add even more methods to my class, this would become an even bigger, uglier mess.

My question is, is there some way to get around this, or at least make it easier, shorter and less ugly? One of the main reasons I wanted to try React with ES6 was to make my code more concise, but this is doing the opposite. Any suggestions or input would be appreciated.

React.js ES6 avoid binding &#39;this&#39; to every method

This seems like something that should have been relatively simple to achieve, but alas.

I have ES6 class:

    &#39;use strict&#39;;
    
    export class BaseModel {  
        constructor(options) {
            console.log(options);
        }
    };

and root module that uses it:

    &#39;use strict&#39;;
    
    import {BaseModel} from &#39;./base/model.js&#39;;
    
    export let init = function init() {
        console.log(&#39;In Bundle&#39;);
        new BaseModel({a: 30});    
    };

__My target is:__

1. pass the above through Babel, to get ES5 code
2. pack the modules with webpack
3. **be able to debug the result**

After some trial, this is the webpack config that I have:

    {
        entry: {
            app: PATH.resolve(__dirname, &#39;src/bundle.js&#39;),
        },
        output: {
            path: PATH.resolve(__dirname, &#39;public/js&#39;),
            filename: &#39;bundle.js&#39;
        },        
        devtool: &#39;inline-source-map&#39;,
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: &#39;babel&#39;
                }
            ]        
        }
    }

This seems to be working, to an extent.

So, I can do that:

[![devtools breakpoint screenshot][1]][1]


I can click F11 and enter the code, but I can&#39;t evaluate `BaseModel`:

[![erro in console evaluation][2]][2]

which kinda defeats the purpose (or one of purposes) of debugging.

__I&#39;ve tried__ adding `source-map-loader` in various order with `babel-loader`:

    {
        test: /\.js$/,
        loader: &quot;source-map-loader&quot;
    }

to no avail.

*Side note 1*: if I abandon webpack and just compile my modules with source maps via Babel into, say, System.js:

    babel src/ --out-dir public/js/ --debug --source-maps inline --modules system

 - all works properly.

[![enter image description here][3]][3]


*Side note 2*: this `?sourceMaps=true` doesn&#39;t seem to do anything at all, since, if I remove source map configuration from webpack - no source maps are preserved/generated at all. One would expect the initial, Babel-produced, source maps to be preserved in the resulting files. Nope.

**Any suggestions would be greatly appreciated**


  [1]: http://i.stack.imgur.com/7uoqi.png
  [2]: http://i.stack.imgur.com/c0OqD.png
  [3]: http://i.stack.imgur.com/3OwzH.png

Debugging with webpack, ES6 and Babel

Given an input file like

&lt;!-- language: lang-js --&gt;

    import { a } from &#39;b&#39;;
    
    function x () {
      a()
    }


babel will compile it to 

&lt;!-- language: lang-js --&gt;

    &#39;use strict&#39;;
    
    var _b = require(&#39;b&#39;);
    
    function x() {
      (0, _b.a)();
    }

but when compiled in loose mode the function call is output as `_b.a();`

I&#39;ve done some research into where the comma operator is added in the hope there was a comment explaining it.
The code responsible for adding it is [here](https://github.com/babel/babel/blob/91fb64eaf53c67a7ed7605aab71f8dcaa4d39ae2/packages/babel/src/transformation/modules/lib/remaps.js#L32).

Content Type	Original Author	Original Content on Stackoverflow
Question	Gajus	View Question on Stackoverflow
Solution 1 - Javascript	CodingIntrigue	View Answer on Stackoverflow

How to destructure an object to an already defined variable?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Lesser than or greater than in Swift switch statement

Swift: guard let vs if let

Attributions