According to the ES2015 grammar, [a property on an object literal](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-object-initializer) can only be one of three things:

&gt; *PropertyDefinition*:  
&gt; 
&gt;  * *IdentifierReference*
&gt;  * *PropertyName* `:` *AssignmentExpression*
&gt;  * *MethodDefinition*

The only one of these type that allows a leading `get` is [*MethodDefinition*](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-method-definitions):

&gt; *MethodDefinition* :
&gt; 
&gt; * *PropertyName* `(` *StrictFormalParameters* `)` `{` *FunctionBody* `}`
&gt; * *GeneratorMethod*
&gt; * **`get`** *PropertyName* `(` `)` `{` *FunctionBody* `}`
&gt; * **`set`** *PropertyName* ( *PropertySetParameterList* `)` `{` *FunctionBody* `}`

As you can see, the `get` form follows a very limited grammar that must be of the form

    get NAME () { BODY }

The grammar does not allow functions of the form `get NAME = ...`.

The accepted answer is great. It&#39;s the best if you&#39;re willing to use *normal* function syntax instead of *compact &quot;arrow function syntax&quot;.*

But maybe you really like arrow functions; maybe you use the arrow function for another reason *which a normal function syntax cannot replace*; you may need a different solution. 

For example,  I notice OP uses `this`, you may want to [bind `this` lexically; aka &quot;non-binding of this&quot;](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Relation_with_strict_mode)), and arrow functions are good for that lexical binding.

You can still use an arrow function with a getter via the `Object.defineProperty` technique.

    {
      ...
      Object.defineProperty(your_obj, &#39;status&#39;, { 
         get : () =&gt; this.xhr.status 
      });
      ...
    }

See mentions of [**`object initialization` technique** (aka `get NAME() {...}`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#Defining_a_getter_on_new_objects_in_object_initializers) vs the [**`defineProperty` technique** (aka `get : ()=&gt;{}`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#Defining_a_getter_on_existing_objects_using_defineProperty). There is at least one significant difference, using `defineProperty` requires the variables already exists: 
 &gt; Defining a getter on *existing objects*

i.e.  with `Object.defineProperty` you must ensure that `your_obj` (in my example) exists and is saved into a variable (whereas with a `object-initialization` you could return an object-literal in your object initialization: `{..., get(){ }, ... }`). More info on [`Object.defineProperty` specifically, here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)

`Object.defineProperty(...)` seems to have comparable browser support to the `get NAME(){...}` syntax; modern browsers, IE 9.

I am trying to try out Kotlin and the Kotlin Android extensions in Android Studio.  I have tried this both in Android Studio v 1.5.1 on Ubuntu 14.04, and in Android Studio v 1.5.1 on OS X El Capitan with the same result.

Here is what I am doing:

1. I install the Kotlin plugin 1.0.0-beta-35950-IJ141-11
2. Create a new blank Android project
3. Convert the MainActivity file to Kotlin (via help-&gt;findaction-&gt;convert file to kotlin) 
4. Configure the project for Kotlin

I then go into the generated content_main.xml file and add an id (hello) for the &quot;Hello World!&quot; TextView.

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
    &lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
        xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
        xmlns:tools=&quot;http://schemas.android.com/tools&quot;
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;match_parent&quot;
        android:paddingBottom=&quot;@dimen/activity_vertical_margin&quot;
        android:paddingLeft=&quot;@dimen/activity_horizontal_margin&quot;
        android:paddingRight=&quot;@dimen/activity_horizontal_margin&quot;
        android:paddingTop=&quot;@dimen/activity_vertical_margin&quot;
        app:layout_behavior=&quot;@string/appbar_scrolling_view_behavior&quot;
        tools:context=&quot;com.gmail.npnster.mykotlinfirstproject.MainActivity&quot;
        tools:showIn=&quot;@layout/activity_main&quot;&gt;
    
        &lt;TextView
            android:layout_width=&quot;wrap_content&quot;
            android:layout_height=&quot;wrap_content&quot;
            android:text=&quot;Hello World!&quot;
            android:id=&quot;@+id/hello&quot;
            /&gt;
    &lt;/RelativeLayout&gt;  

Then in the converted MainActivity I add a line to set the TextView. (shown below).
Android Studio then prompts me (via alt-enter) to insert this line (also shown below)

    import kotlinx.android.synthetic.main.content_main.*

So at this point everything _seems_ fine

but then when I try to compile this I get 

    Unresolved reference: kotlinx
    Unresolved reference: kotlinx
    Unresolved reference: hello

Notice that I did **not** install the Kotlin Android extensions plugin.  As of a couple of days ago this is now supposed to be included in the main plug in and is marked as obsolete.  (In fact if you try to install it when you have the latest plugin, nothing new is installed) 

Anyone see what I am doing wrong?

MainActivity

    import android.os.Bundle
    import android.support.design.widget.FloatingActionButton
    import android.support.design.widget.Snackbar
    import android.support.v7.app.AppCompatActivity
    import android.support.v7.widget.Toolbar
    import android.view.View
    import android.view.Menu
    import android.view.MenuItem
    import kotlinx.android.synthetic.main.content_main.*
    
    
    class MainActivity : AppCompatActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            val toolbar = findViewById(R.id.toolbar) as Toolbar
            setSupportActionBar(toolbar)
            print(&quot;setting text view value to hey&quot;)
            hello.text = &quot;hey&quot;
    
            val fab = findViewById(R.id.fab) as FloatingActionButton
            fab.setOnClickListener { view -&gt; Snackbar.make(view, &quot;Replace this with your own action&quot;, Snackbar.LENGTH_LONG).setAction(&quot;Action&quot;, null).show() }
        }
    
        override fun onCreateOptionsMenu(menu: Menu): Boolean {
            // Inflate the menu; this adds items to the action bar if it is present.
            menuInflater.inflate(R.menu.menu_main, menu)
            return true
        }
    
        override fun onOptionsItemSelected(item: MenuItem): Boolean {
            // Handle action bar item clicks here. The action bar will
            // automatically handle clicks on the Home/Up button, so long
            // as you specify a parent activity in AndroidManifest.xml.
            val id = item.itemId
    
            //noinspection SimplifiableIfStatement
            if (id == R.id.action_settings) {
                return true
            }
    
            return super.onOptionsItemSelected(item)
        }
    }

Unresolved reference: kotlinx

I have a problem with bootstrap&#39;s tooltip : When I click on a button, tooltip stays even if is the cursor is outside of the button. I have looked into the manual - [Bootstrap&#39;s tooltip][1] and if I&#39;m clicking on the buttons, I see the same problem. Is there any solution to fix this? Just tried in latest FF, IE.


  [1]: http://getbootstrap.com/javascript/#four-directions

Bootstrap&#39;s tooltip doesn&#39;t disappear after button click &amp; mouseleave

I&#39;m using babel6 and for my pet project I&#39;m creating a wrapper for XMLHttpRequest, for the methods I can use:

    open = (method, url, something) =&gt; {
      return this.xhr.open(method, url, something);
    }

but for the properties arrow function doesn&#39;t work

this works:

    get status() { return this.xhr.status; }

but I can not use

    get status = () =&gt; this.xhr.status;


Is this intentional?


ES6 getter/setter with arrow function

I'm using babel6 and for my pet project I'm creating a wrapper for XMLHttpRequest, for the methods I can use:
<pre><code class="hljs language-kotlin">open = (method, url, something) => {
 return this.xhr.open(method, url, something);
}
</code></pre>
but for the properties arrow function doesn't work
this works:
<pre><code class="hljs language-csharp">get status() { return this.xhr.status; }
</code></pre>
but I can not use
<pre><code class="hljs language-ini">get status = () => this.xhr.status;
</code></pre>
Is this intentional?

I am seeing that the `instanceof` operator doesn&#39;t work on instances of `Error` subclasses, when running under [babel-node](https://babeljs.io/docs/usage/cli/#babel-node) version 6.1.18/Node version 5.1.0 on OS X. Why is this? The same code works well in the browser, try my [fiddle](https://jsfiddle.net/rvmmv9g0/) for an example.

The following code outputs `true` in the browser, whereas under babel-node it&#39;s false:

    class Sub extends Error {
    }

    let s = new Sub()
    console.log(`The variable &#39;s&#39; is an instance of Sub: ${s instanceof Sub}`)

I can only imagine this being due to a bug in babel-node, since `instanceof` works for other base classes than `Error`.

## .babelrc
    {
      &quot;presets&quot;: [&quot;es2015&quot;]
    }

## Compiled Output
This is the JavaScript compiled by babel 6.1.18:

    &#39;use strict&#39;;

    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(&quot;Cannot call a class as a function&quot;); } }

    function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(&quot;this hasn&#39;t been initialised - super() hasn&#39;t been called&quot;); } return call &amp;&amp; (typeof call === &quot;object&quot; || typeof call === &quot;function&quot;) ? call : self; }

    function _inherits(subClass, superClass) { if (typeof superClass !== &quot;function&quot; &amp;&amp; superClass !== null) { throw new TypeError(&quot;Super expression must either be null or a function, not &quot; + typeof superClass); } subClass.prototype = Object.create(superClass &amp;&amp; superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

    var Sub = (function (_Error) {
      _inherits(Sub, _Error);

      function Sub() {
        _classCallCheck(this, Sub);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(Sub).apply(this, arguments));
      }

      return Sub;
    })(Error);

    var s = new Sub();
    console.log(&#39;The variable \&#39;s\&#39; is an instance of Sub: &#39; + (s instanceof Sub));


Why doesn&#39;t instanceof work on instances of Error subclasses under babel-node?

Is it or will it be possible to have an ES6 class getter
return a value from an ES2017 await / async function.

    class Foo {
        async get bar() {
            var result = await someAsyncOperation();
    
            return result;
        }
    }
    
    function someAsyncOperation() {
        return new Promise(function(resolve) {
            setTimeout(function() {
                resolve(&#39;baz&#39;);
            }, 1000);
        });
    }
    
    var foo = new Foo();
    
    foo.bar.should.equal(&#39;baz&#39;);

(ES6) class (ES2017) async / await getter

I am confused about the spread syntax and rest parameter in ES2015. Can anybody explain the difference between them with proper examples?

Spread Syntax vs Rest Parameter in ES2015 / ES6

I&#39;m playing around with `React` and `ES6` using `babel` and `webpack`. I want to build several components in different files, import in a single file and bundle them up with `webpack`

Let&#39;s say I have a few components like this:

my-navbar.jsx

    import React from &#39;react&#39;;
    import Navbar from &#39;react-bootstrap/lib/Navbar&#39;;

    export class MyNavbar extends React.Component {
        render(){
          return (
            &lt;Navbar className=&quot;navbar-dark&quot; fluid&gt;
            ...
            &lt;/Navbar&gt;
          );
        }
    }

main-page.jsx

    import React from &#39;react&#39;;
    import ReactDOM from &#39;react-dom&#39;;

    import MyNavbar from &#39;./comp/my-navbar.jsx&#39;;

    export class MyPage extends React.Component{
      render(){
        return(
            &lt;MyNavbar /&gt;
            ...
        );
      }
    }

    ReactDOM.render(
      &lt;MyPage /&gt;,
      document.getElementById(&#39;container&#39;)
    );

Using webpack and following their tutorial, I have `main.js`:

    import MyPage from &#39;./main-page.jsx&#39;;

After building the project and running it, I get the following error in my browser console:

    Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`.

What am I doing wrong? How can I properly import and export my components?

How to import and export components using React + ES6 + webpack?

I am currently using ES6 in an React app via webpack/babel.
I am using index files to gather all components of a module and export them. Unfortunately, that looks like this:

    import Comp1_ from &#39;./Comp1.jsx&#39;;
    import Comp2_ from &#39;./Comp2.jsx&#39;;
    import Comp3_ from &#39;./Comp3.jsx&#39;;
    
    export const Comp1 = Comp1_;
    export const Comp2 = Comp2_;
    export const Comp3 = Comp3_;

So I can nicely import it from other places like this:

    import { Comp1, Comp2, Comp3 } from &#39;./components&#39;;

Obviously that isn&#39;t a very nice solution, so I was wondering, if there was any other way. I don&#39;t seem to able to export the imported component directly.

ES6 exporting/importing in index file

I have a `reactjs` app written using ES6 standards, and I use `webpack` to build it. The `webpack` loads the `js` modules using `babel-loader`. To be specific, I use the following versions of packages: 
`
├── babel@5.8.34 
├── babel-core@5.8.34 
├── babel-loader@5.4.0 
└── webpack@1.12.6`

However, after building it, the IE 10 gives the following error `&#39;Symbol&#39; is undefined`. Shouldn&#39;t the `babel` be supposed to define the `Symbol`? Is there any specific configuration for `webpack` or `babel` I need to set in order to make it work? I use `{stage: 0}` configuration in my `.babelrc`.

Any help would be appreciated,
Thank you !



&#39;Symbol&#39; is undefined in IE after using babel

&lt;!-- language-all: lang-js --&gt;

React with babel. I have this confusion with imports and module.exports. I assume babel when converting the ES6 code to ES5 converts the imports and exports to require and module.exports respectively.

If I export a function from one module and import the function in another module, the code executes fine. But if I export the function with module.exports and import using &quot;import&quot; the error is thrown at runtime saying it is not a function.

I cooked up an example.

    // Tiger.js
    function Tiger() {
    	function roar(terrian){
    		console.log(&#39;Hey i am in &#39; +  terrian + &#39; and i am roaing&#39;);
    	};
    	return roar;
    }
    
    module.exports = Tiger;

    // animal.js
    import { Tiger } from &#39;./animals&#39;;
    
    var animal = Tiger();
    animal(&quot;jungle&quot;);

I used babel with preset es2015 to transcompile it. This gives me the following error 

&gt; *Uncaught TypeError: (0 , _animals.Tiger) is not a function*

But if I remove the `module.exports = Tiger;` And replace it with `export { Tiger };` It works fine.

What am I missing here??

**EDIT:**
I am using browserify as the module bundler.


Module.exports and es6 Import

I have installed the babel-cli tool as explained by the Babel [&#39;getting started&#39;][1] page.

From a terminal inside my project folder:

    npm install --save-dev babel-cli

After this, there is a node_modules directory with a babel-cli folder, but there is no package.json created. npm also shows the following error:

    npm WARN enoent ENOENT: no such file or directory, open &#39;/Users/MyName/Sites/Tutorials/Babel2/package.json

When trying to run babel, I get this:

    babel src -d lib
    -bash: babel: command not found

I have the latest version of nodejs/npm installed. I have run npm update -g, and I have edited my **.bash_profile** file to include:

    export PATH=$PATH:/Users/MyName/npm/bin
    export PATH=/usr/local/share/npm/bin:$PATH

I have not experienced this with other npm tools such as browserify. Why is babel not recognized?





  [1]: http://babeljs.io/docs/setup/#babel_cli

Content Type	Original Author	Original Content on Stackoverflow
Question	Gabor Dolla	View Question on Stackoverflow
Solution 1 - Ecmascript 6	apsillers	View Answer on Stackoverflow
Solution 2 - Ecmascript 6	The Red Pea	View Answer on Stackoverflow

ES6 getter/setter with arrow function

Ecmascript 6 Problem Overview

Ecmascript 6 Solutions

Solution 1 - Ecmascript 6

Solution 2 - Ecmascript 6

Bootstrap's tooltip doesn't disappear after button click & mouseleave

Unresolved reference: kotlinx

Attributions