arrow-functions

This question already has an answer here: Should I write methods as arrow functions in Angular's class 3 answers Arrow vs classic method in ES6 class 1 answer class App extends Component { constructor(props) { ... } onChange = (e) => this.setState({term: e.target.value}) onSubmit(e){ e.preventDefault(); const api_key = "C1hha1quJAQZf2JUlK"; const url = `http://api.giphy.com/v1/gifs/search?q=${this.state.term}&api_key=${api_key}`; } render() { return ( <div> <form onSubmit={this.onSubmit}> <input value={this.state.term} onChange={this.onChange}/> <button>Search!</button> </form> </div> ); } }

The export statement below gives a syntax error export default const hello = () => console.log("say hello") why ? I'm only able to export named functions export function hello() { console.log("hello") } What is the reason? Is it possible to export Arrow functions in ES6/7? Yes. export doesn't care about the value you want to export. The export statement below gives a syntax error ... why? You cannot have a default export and give it a name ("default" is already the name of the export). Either do export default () => console.log("say hello"); or const hello = () => console.log("say hello");

I'm currently very amazed about the use cases of the new react hooks API and what you can possibly do with it. A question that came up while experimenting was how expensive it is to always create a new handler function just to throw it away when using useCallback . Considering this example: const MyCounter = ({initial}) => { const [count, setCount] = useState(initial); const increase = useCallback(() => setCount(count => count + 1), [setCount]); const decrease = useCallback(() => setCount(count => count > 0 ? count - 1 : 0), [setCount]); return ( <div className="counter"> <p>The count is

Using Babel, I can see that callback = () => {}; compiles to callback = function callback() {}; which is what I expect. However I get an error when I try to use it with || callback = callback || () => {} Which I'd expect to be equivalent to callback = callback || function(){}; Why is this an error? Also, is there a more correct ES6 version of this familiar syntax? It fails because that is just not valid syntax. Use the following to make it work: callback = callback || (() => {}) If you don't wrap it that way, it would be interpreted as if you typed the following. But that is invalid syntax.

Is there any reason to write classic syntax of ES6 methods? class MyClass { myMethod() { this.myVariable++; } } When I use myMethod() as callback on some event, I must write something like this (in JSX): // Anonymous function. onClick={() => { this.myMethod(); }} // Or bind this. onClick={this.myMethod.bind(this)} But if I declare method as arrow function: class MyClass { myMethod = () => { this.myVariable++; } } than I can write just (in JSX): onClick={this.myMethod} The feature you are using is not part of ES6. It's the class fields proposal . It allows you to initialize instance properties

I'm just looking for a reason as to why this is invalid: () => throw 42; I know I can get around it via: () => {throw 42}; 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 throw x; } which would not be valid either. You can't return throw this is effectively what you're trying to do: function(){ return throw 42

When building classes in coffeescript, is there ever a reason to not use the fat arrow for instance methods? Edit: Ok then! Great reply! :) To sum up, the problems are: - Takes more memory - Inability to patch - Begs question, why is it used for this method? Convention: - Be explicit when binding functions. - Declare fat arrowed methods in the constructor. - Use as much as you want, just not in class declarations. Yes, there are reasons to not use the fat arrows always. In fact i'd argue in favour of never using fat-arrowed methods :) Thin-arrow and fat-arrow methods are conceptually different

Does anyone know how to write an immediate function using ES6 arrow syntax? Here's the ES3/5 way of doing it: (function () { //... }()); I've tried the following but get an unexpected token error on the last line. (() => { //... }()); You can test this here: http://www.es6fiddle.net/hsb8bgu4/ From the Arrow functions examples , (() => "foobar")() // returns "foobar" So, the function invocation operator should be outside. (() => { //... })(); Sample: http://www.es6fiddle.net/hsb8s1sj/ Here is my demo codes! Always remember that function_name + () === function_caller /* ES5 */ // normal function

In my code, I have something that boils down to this: var x = y || ()=>{}; (In case you are wondering, I am later calling x() and y may be defined as a function or it might not, so I don't want a TypeError to be thrown if it is not.) For some reason, this causes a SyntaxError: Unexpected token ) Why? I found out that var x = y || (()=>{}); works just fine, but y || ()=>{} dosen't work. Is this specced, or a bug in V8 or Chrome? (I tested this only in the latest release of Chrome stable.) This is normal. Unlike a function expression, which is a PrimaryExpression like other literals and