Note that the Babel translation is assuming strict mode, but your result with window indicates you’re running your code in loose mode. If you tell Babel to assume loose mode, its transpilation is different: var _this = this; // ** var arrowObject = { name: ‘arrowObject’, printName: function printName() { console.log(_this); // ** } }; … Read more
First: A simple solution will be to create a component for the content inside a map function and pass the values as props and when you call the function from the child component you can pass the value to the function passed down as props. Parent deleteTodo = (val) => { console.log(val) } todos.map(el => … Read more
Short answer: this points at the nearest bound this – in the code provided this is found in the enclosing scope. Longer answer: Arrow functions do not have this, arguments or other special names bound at all – when the object is being created the name this is found in the enclosing scope, not the … Read more
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
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
The first one is generally preferred. It’s a declaration, not an expression value, which has subtle advantages. And it can easily be named if you want, which is a good practice. Also, arrow functions have a few disadvantages in certain situations, so unless you absolutely need them to preserve a this value (etc.) you’d rather … Read more
Your specific example is: data.map(users => { console.log(users); }); Where data is the following array: [ {id: 1, username: “Foo”}, {id: 2, username: “Bar”}, ] data.map function (check Array.prototype.map specification) converts one array (data in your case) to a new array. The conversion (mapping) is defined by the argument of data.map, also called the callback … Read more
From the Arrow functions examples, (() => “foobar”)() // returns “foobar” So, the function invocation operator should be outside. (() => { //… })(); Sample: http://www.es6fiddle.net/hsb8s1sj/
Writing a recursive function without naming it is a problem that is as old as computer science itself (even older, actually, since λ-calculus predates computer science), since in λ-calculus all functions are anonymous, and yet you still need recursion. The solution is to use a fixpoint combinator, usually the Y combinator. This looks something like … 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