If you don’t use a block ({}) as body of an arrow function, the body must be an expression: ArrowFunction: ArrowParameters[no LineTerminator here] => ConciseBody ConciseBody: [lookahead ≠ { ] AssignmentExpression { FunctionBody } But throw is a statement, not an expression. In theory () => throw x; is equivalent to () => { return … Read more
How can I differentiate between these things in ES6? arrow functions are functions that cannot be used as constructors, and don’t have a .prototype property. However, methods don’t either. They inherit from Function.prototype. classes are functions that can’t be called without new, and that have a .prototype object which is normally not empty. If the … Read more
The problem is that the chrome debugger believes that the this in the source code refers to the run-time this, but this inside a arrow function in typescript source code is actually transformed to _this, so it’s showing you the wrong object. This is why it’s only a problem in the debugger and the code … Read more
No, that’s not the rule I would use. The major use-case I’ve found for the fat-arrow in defining methods is when you want to use a method as a callback and that method references instance fields: class A constructor: (@msg) -> thin: -> alert @msg fat: => alert @msg x = new A(“yo”) x.thin() #alerts … Read more
As already stated in this comment and this answer, this does not have a different meaning between JavaScript and TypeScript. That being said, your problem here is way more prosaic: you’re trying to use this in an arrow function to get the current DOM element, and that will simply not work. So, in a nutshell, … Read more
The parenthesis around input arguments (x in this case) are only required when there are two or more input arguments. With just one (as you’ve shown here), the two statements are identical. (x) => { return x * 2; } is the same as x => { return x * 2; } But, (x, y) … Read more
The short answer is because arrow function is recreated every time, which will hurt the performance. This is a common misconception. The arrow function is recreated every time either way (although with useCallback subsequent ones may be thrown away immediately). What useCallback does is make it possible for the child component you use the callback … Read more
First of all, let’s start with examples of each technique! But the difference is more related to JavaScript language itself. Binding: import React from ‘react’; class MyComponent extends React.Component { constructor(props) { super(props) this.clickHandler = this.clickHandler.bind(this); } clickHandler() { console.log( this ) } render() { return <button onClick={this.clickHandler}>Click Me</button> } } Arrow-function: import React from … Read more
No difference in your specific example, but there is a very important difference between those two notations, specially when it comes to Vue.js: the this won’t reflect the vue instance in arrow functions. So if you ever have something like: export default { props: [‘stuffProp’], data: () => ({ myData: ‘someData’, myStuff: this.stuffProp }) } … Read more
From the Arrow functions examples, (() => “foobar”)() // returns “foobar” So, the function invocation operator should be outside. (() => { //… })(); Sample: http://www.es6fiddle.net/hsb8s1sj/