It is [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_function_parameter), but contained within the parameters.  The equivalent without the destructuring would be:

    const func = o =&gt; {
        var param1 = o.param1;
        var param2 = o.param2;
        //do stuff
    }

This is passing an object as a property. 

It is basically shorthand for

```
let param1 = someObject.param1
let param2 = someObject.param2
```

Another way of using this technique without parameters is the following, let&#39;s consider then for a second that someObject does contain those properties.

```
let {param1, param2} = someObject;
```


It is an object destructuring assignment. Like me, you may have found it surprising because ES6 object destructuring syntax looks like, but does NOT behave like object literal construction. 

It supports the very terse form you ran into, as well as renaming the fields and default arguments:

Essentially, it&#39;s {oldkeyname:newkeyname=defaultvalue,...}. &#39;:&#39; is NOT the key/value separator; &#39;=&#39; is.

Some fallout of this language design decision is that you might have to do things like 

&gt; ;({a,b}=some_object);

The extra parens prevent the left curly braces parsing as a block, and the leading semicolon prevents the parens from getting parsed as a function call to a function on the previous line.

For more info see:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Beware, key errors during object destructuring assignment do NOT throw; you just end up with &quot;undefined&quot; values, whether it&#39;s a key error or some other error that got silently propagated as &#39;undefined&#39;.

    &gt; var {rsienstr: foo, q: bar} = {p:1, q:undefined};
    undefined
    &gt; foo
    undefined
    &gt; bar
    undefined
    &gt; 



Possibly an odd question, but I&#39;m curious if it&#39;s possible to make an interface where one property or the other is required.

So, for example...

    interface Message {
        text: string;
        attachment: Attachment;
        timestamp?: number;
        // ...etc
    }

    interface Attachment {...}

In the above case, I&#39;d like to make sure that either `text` or `attachment` exists.


----------


This is how I&#39;m doing it right now. Thought it was a bit verbose (typing botkit for slack).

    interface Message {
        type?: string;
        channel?: string;
        user?: string;
        text?: string;
        attachments?: Slack.Attachment[];
        ts?: string;
        team?: string;
        event?: string;
        match?: [string, {index: number}, {input: string}];
    }

    interface AttachmentMessageNoContext extends Message {
        channel: string;
        attachments: Slack.Attachment[];
    }

    interface TextMessageNoContext extends Message {
        channel: string;
        text: string;
    }

Typescript Interface - Possible to make &quot;one or the other&quot; properties required?

What are the advantages of using `std::make_unique` over the `new` operator for initializing a `std::unique_ptr`? 

In other words, why is 

    std::unique_ptr&lt;SomeObject&gt; a = std::make_unique(SomeObject(...))

better than doing

    std::unique_ptr&lt;SomeObject&gt; a = new SomeObject(...)

I tried looking up a lot online and I do know that it is a good rule of thumb to avoid the operator `new` in modern C++, but I am not sure what the advantages are in this exact scenario. Does it prevent any kind of memory leaks that might happen? Is it faster to do a `std::make_unique` than to use `new`? 
 

Advantages of using std::make_unique over new operator

I keep seeing functions that look like this in a codebase I&#39;m working on:

    const func = ({ param1, param2 }) =&gt; {
      //do stuff
    }

What exactly is this doing? I&#39;m having a hard time finding it on google, because I&#39;m not even sure what this is called, or how to describe it in a google search.

What do curly braces inside of function parameter lists do in es6?

I keep seeing functions that look like this in a codebase I'm working on:
<pre><code class="hljs language-go">const func = ({ param1, param2 }) => {
 //do stuff
}
</code></pre>
What exactly is this doing? I'm having a hard time finding it on google, because I'm not even sure what this is called, or how to describe it in a google search.

I have the following: 

[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/Od7Ho.png

How do I get rid of the blue underline? 
The code is below: 

    &lt;Link to=&quot;first&quot;&gt;&lt;MenuItem style={{paddingLeft: 13, textDecoration: &#39;none&#39;}}&gt; Team 1 &lt;/MenuItem&gt;&lt;/Link&gt;

The MenuItem component is from http://www.material-ui.com/#/components/menu 


How to get rid of underline for Link component of React Router?

I am using **webpack** to manage a **reactjs** project. I want to load images in javascript by webpack `file-loader`. Below is the **webpack.config.js**:

    const webpack = require(&#39;webpack&#39;);
    const path = require(&#39;path&#39;);
    const NpmInstallPlugin = require(&#39;npm-install-webpack-plugin&#39;);
    
    const PATHS = {
        react: path.join(__dirname, &#39;node_modules/react/dist/react.min.js&#39;),
        app: path.join(__dirname, &#39;src&#39;),
        build: path.join(__dirname, &#39;./dist&#39;)
    };
    
    module.exports = {
        entry: {
            jsx: &#39;./app/index.jsx&#39;,
        },
        output: {
            path: PATHS.build,
            filename: &#39;app.bundle.js&#39;,
        },
        watch: true,
        devtool: &#39;eval-source-map&#39;,
        relativeUrls: true,
        resolve: {
            extensions: [&#39;&#39;, &#39;.js&#39;, &#39;.jsx&#39;, &#39;.css&#39;, &#39;.less&#39;],
            modulesDirectories: [&#39;node_modules&#39;],
            alias: {
                normalize_css: __dirname + &#39;/node_modules/normalize.css/normalize.css&#39;,
            }
        },
        module: {
            preLoaders: [
    
                {
                    test: /\.js$/,
                    loader: &quot;source-map-loader&quot;
                },
            ],
            loaders: [
    
                {
                    test: /\.html$/,
                    loader: &#39;file?name=[name].[ext]&#39;,
                },
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    loader: &#39;babel-loader?presets=es2015&#39;,
                },
                {test: /\.css$/, loader: &#39;style-loader!css-loader&#39;},
                {test: /\.(jpe?g|png|gif|svg)$/i, loader: &quot;file-loader?name=/public/icons/[name].[ext]&quot;},
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loaders: [&#39;babel-loader?presets=es2015&#39;]
                }
            ]
        },
        plugins: [
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                },
                output: {
                    comments: false,
                },
            }),
            new NpmInstallPlugin({
                save: true // --save
            }),
            new webpack.DefinePlugin({
                &quot;process.env&quot;: {
                    NODE_ENV: JSON.stringify(&quot;production&quot;)
                }
            }),
        ],
        devServer: {
            colors: true,
            contentBase: __dirname,
            historyApiFallback: true,
            hot: true,
            inline: true,
            port: 9091,
            progress: true,
            stats: {
                cached: false
            }
        }
    }

I used this line to load image files and copy them to dist/public/icons directory and keep the same file name.

    {test: /\.(jpe?g|png|gif|svg)$/i, loader: &quot;file-loader?name=/public/icons/[name].[ext]&quot;}

But I have two problems when using it. When I run `webpack` command, the image file was copied to **dist/public/icons/** directory as expected. However it was also copied to dist directory with this file name &quot;df55075baa16f3827a57549950901e90.png&quot;. 

Below is my project structure:
[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/cKom9.png


Another problem is that I used below code to import this image file but it is not showing on the browser. If I am using url &#39;public/icons/imageview_item_normal.png&#39; on the img tag, it works fine. How to use the object imported from the image file?

    import React, {Component} from &#39;react&#39;;
    import {render} from &#39;react-dom&#39;;
    import img from &#39;file!../../public/icons/imageview_item_normal.png&#39;
    
    export default class MainComponent extends Component {
    
      render() {
        return (
          &lt;div style={styles.container}&gt;
            download
            &lt;img src={img}/&gt;
          &lt;/div&gt;
        )
      }
    
    }
    
    const styles = {
      container: {
        width: &#39;100%&#39;,
        height: &#39;100%&#39;,
      }
    }


How to load image files with webpack file-loader

I am trying to iterate the following json:

    {
    &quot;VERSION&quot; : &quot;2006-10-27.a&quot;,
    &quot;JOBNAME&quot; : &quot;EXEC_&quot;,
    &quot;JOBHOST&quot; : &quot;Test&quot;,
    &quot;LSFQUEUE&quot; : &quot;45&quot;,
    &quot;LSFLIMIT&quot; : &quot;2006-10-27&quot;,
    &quot;NEWUSER&quot; : &quot;3&quot;,
    &quot;NEWGROUP&quot; : &quot;2&quot;,
    &quot;NEWMODUS&quot; : &quot;640&quot;
    }

Here key is dynamic. I want both key = ? and value = ?


JavaScript iterate key &amp; value from json?

In angular docs there is a topic about listening for child events from parents. That&#39;s fine. But my purpose is something reverse!. In my app there is an &#39;admin.component&#39; that holds the layout view of admin page (sidebar menu,task bar, status etc..). 
In this parent component I configured router system for changing the main view between other pages of administrator. 
The problem is for saving things after change, the user clicks on save button in task bar (that is placed in admin.component) and the child component must listen to that click event for doing save staff.

Child listens for parent event in Angular 2

I have the following component that triggers a `no-shadow` ESlint error on the `FilterButton` `props`.

&lt;!-- language: lang-js --&gt;

    import { setFilter } from &#39;../actions/filter&#39;;
    
    
    function FilterButton({ setFilter }) {
      return (
        &lt;button onClick={setFilter}&gt;Click&lt;/button&gt;
      );
    }

    export default connect(null, { setFilter })(FilterButton);


How can I avoid the warning while keeping both the concise syntax of `mapDispatchToProps` and the ESlint rule?

I know I can add a comment to suppress the warning but doing it for every components seems redundant and tedious.

Avoid no-shadow eslint error with mapDispatchToProps

I understand why `var` takes that name - it is variable, `const` - it is a constant, but what is the meaning behind the name for `let`, which scopes to the current block? Let it be?

Why was the name &#39;let&#39; chosen for block-scoped variable declarations in JavaScript?

I have a long string, which I build using ES6 template strings, but I want it to be without line breaks:

    var string = `As all string substitutions in Template Strings are JavaScript
                  expressions, we can substitute a lot more than variable names.
                  For example, below we can use expression interpolation to 
                  embed for some readable inline math:`

    console.log(string);
Result:

    As all string substitutions in Template Strings are JavaScript
    expressions, we can substitute a lot more than variable names.
    For example, below we can use expression interpolation to
    embed for some readable inline math:

My expectations:

    As all string substitutions in Template Strings are JavaScript expressions, we can substitute a lot more than variable names. For example, below we can use expression interpolation to embed for some readable inline math:

Template Strings ES6 prevent line breaks

I recently switched to es6 and started using arrow functions all over my code.
While refactoring I came across below code

    data.map(function(d) {
       return {id: d.id, selected: bool};
    });

I changed above code to this -

    data.map((d) =&gt; {id: d.id, selected: bool});

But I was getting error from above code. I don&#39;t know what is wrong here?
I know that If there is no block of code then there is implicit return provided by arrow function.

But don&#39;t know how to return empty object or anonymous object with some properties initialized ?

**Edit:**

What is wrong if I do it in this way? Just for curiosity sake.

    data.map((d) =&gt; new {id: d.id, selected: bool});



How to return anonymous object from one liner arrow function in javascript?

Is there a syntax using ES6 or ES7 or babel which will allow me to easily bundle together many groups of sub files? 

E.g., given:

    ./action_creators/index.js
    ./action_creators/foo_actions.js
    ./action_creators/bar_actions.js

Have index.js import foo and bar actions, then re-export them, so I can

    import {FooAction, BarAction} from &#39;./action_creators/index.js&#39;

I don&#39;t want to have to remember / change references if I were to change which file I&#39;ve organized the objects themselves into. 



ES6 `export * from import`?

I am trying to run some ES6 code in my project but I am getting an unexpected token export error.

    export class MyClass {
      constructor() {
        console.log(&quot;es6&quot;);
      }
    }



Content Type	Original Author	Original Content on Stackoverflow
Question	Nathan	View Question on Stackoverflow
Solution 1 - Javascript	James Thorpe	View Answer on Stackoverflow
Solution 2 - Javascript	Oz Lodriguez	View Answer on Stackoverflow
Solution 3 - Javascript	Andrew Wagner	View Answer on Stackoverflow

What do curly braces inside of function parameter lists do in es6?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Advantages of using std::make_unique over new operator

Typescript Interface - Possible to make "one or the other" properties required?

Attributions