This question already has an answer here:
Why doesn't my arrow function return a value?
(1 answer)
Closed 4 years ago.
In react arrow function return body is wrapped with parenthesis
this.setState((state)=>({
count:state.count+1
}))
but in the normal function, we wrapped return body with curly brases
this.setState((state)=>{
count:state.count+1
})
Can anyone tell me what is the difference between the two return body of function
The second notation is the classic notation to declare an arroz function with a body. By the way, the snippet has to be modified as it won't work as it is. Here is the working equivalent:
this.setState((state)=>{
return {
count:state.count+1
}
})
An object is created and returned by the function.
The first notation is used for convenience when the value you want to return is straight forward to compute.
this.setState((state)=>({ count:state.count+1 }))
The parentheses around the returned object are necessary to indicate that the following curly bracies define an object instead of the body of the function.
Related
This question already has answers here:
java-script arrow function returns (x++,x) [duplicate]
(3 answers)
What does the comma operator do in JavaScript?
(5 answers)
When is the comma operator useful?
(15 answers)
Closed 9 months ago.
I tried looking at MDN on arrow functions, that links to an article ES6 In Depth: Arrow functions and the ECMAScript grammar. I didn't find an example of this style of function body.
See takeStockForBowl in example code below.
Question, what would this style of function definition be called?
Maybe it's a repurposing of a more basic JavaScript syntax and I just don't see it. Apologies if it's obvious.
const takeStockForBowl = bowl => ( // open paren
takeForBowl('protein', bowl), // side effect 1
takeForBowl('grain', bowl), // side effect 2
takeForBowl('veg', bowl), // ...
bowl.supplied = true, // side effect n
bowl // result
) // close paren
First of all, takeStockForBowl is really hard to read.
To understand what's happening here, we need to understand two things:
Arrow functions
Comma operator
Basically what the author has done here is avoided writing the following:
Explicit return statement
Curly braces for the function body
by taking advantage (or abusing) of implicit return in arrow function and the comma operator.
What comma operator does is it evaluates each of its operands from left to right and returns the value of the last operand which in this case is bowl.
More readable version of this function is:
const takeStockForBowl = bowl => {
takeForBowl('protein', bowl);
takeForBowl('grain', bowl);
takeForBowl('veg', bowl);
bowl.supplied = true;
return bowl;
}
This question already has answers here:
When should I use a return statement in ES6 arrow functions
(6 answers)
Closed 2 years ago.
I have a code (attached screenshot) that in one place it is written explictiy reutrn inside a callback, and in another one it isn't. I'm trying to understand what is the reason for it? In my opinion return statement should be added also in the first one. Am i wrong?
There is a return in the first one. Read this about arrow functions
"(...) If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword" - https://www.w3schools.com/js/js_arrow_function.asp
What you're seeing is a property of the arrow function: if the braces are omitted the result of the following statement is returned automatically.
input => output is the same as input => { return output; }.
Note that this behavior differs from regular functions, as these two functions do not both return a result:
function a(input) { return 1 };
function b(input) { 1 };
a() // 1
b() // undefined
This question already has answers here:
What do parenthesis surrounding brackets in the return statement of an ES6 arrow function do?
(4 answers)
Closed 2 years ago.
What's the difference between the two?
this.setState((state)=>({
posts: state.posts.filter(post=> post.id !==postRemoved.id)
}))
and
this.setState((state)=>{
posts: state.posts.filter(post=> post.id !==postRemoved.id)
})
setState callback function expects an object to be returned. In the second case, you are just opening a function body without returning anything.
While wrapped with round brackets (), an object is returned instead. That's why the first option will work properly.
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 6 years ago.
I am following a tutorial in javascript/angular2 and I know it is a novice question, but if someone could please explain what exactly is this piece of code doing. I have read at various places and in the Mozilla docs, but I am still confused about it. I am aware that: map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results,but what exactly is the code doing in this context:
map(e => e.target.value)
It's nearly the same as this:
map(function(e) {
return e.target.value;
});
...it's just using the concise arrow function form instead of a function function. There are other differences between function functions and arrow functions (arrow functions close over this and a couple of other things, function functions don't), but that code isn't using any of them.
This is using ES2015/ES6 shorthand syntax. To write it out in ES5:
map(function(e) { return e.target.value; })
The function is the callback function, the e is the current element of the array, and the return value of e.target.value will be the value put in the new array.
This question already has answers here:
Curly Brackets in Arrow Functions
(3 answers)
Why doesn't my arrow function return a value?
(1 answer)
Closed 6 years ago.
I came across a little problem in my code which was kind of confusing to me and hope someone could explain why it does the things it does.
Code 1
sendText(){
return this.http.get('/api')
.map((response:Response) => response.json());
}
Code 2
sendText(){
return this.http.get('/api').map((response:Response) => {
response.json();
});
}
The key difference between these two code is that in Code 2 I placed the brackets after the arrow function to add my tasks inside those brackets and in Code 1 I took the brackets out and place the task on one line.
My question is why does my object coming from the server side coming back as undefined in Code2 with the subscribe method that angular2 provided while Code1 returns the object I suspect.
(response:Response) => response.json()
This is shorthand for this:
(response:Response) => { return response.json(); }
The {} let you add multiple statements inside the block. Without them, the function just runs the one statement and returns its value.
Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions