This question already has answers here:
ECMAScript 6 arrow function that returns an object
(6 answers)
Closed 6 years ago.
Never seen this one before:
.flatMap(obj => {
return removeOneLine(this)
.map(l => {l:l,id:obj.id});
I want to map the result, but of course, I guess JS doesn't know if this is an object or the function body.
Is doing the following the only way to avoid a syntax error (because it's ambiguous to the engine):
.flatMap(obj => {
return removeOneLine(this)
.map(l => {
return {l: l, id: obj.id}
});
})
is this ambiguity in this situation normal, any way to mitigate besides what I just did above?
Why do you have the curlies for a single-statement fat-arrow function?
You don't need curly braces around the function bodies or an explicit return statement. You do, however, need to put parentheses around the object literal to prevent its being interpreted as a function body.
.flatMap( obj=> removeOneLine(this).map(l => ({ l: l, id: obj.id })) )
Related
This question already has answers here:
Why doesn't my arrow function return a value?
(1 answer)
When should I use a return statement in ES6 arrow functions
(6 answers)
Arrow function without curly braces
(9 answers)
Curly Brackets in Arrow Functions
(3 answers)
Closed 1 year ago.
Why does this work:
const final = pdata.map((p) => p.nodeName);
// returns [ 'H1', 'P', 'P' ] like its supposed to
But this returns undefined in all of them:
const final = pdata.map((p) => {
p.nodeName
});
// returns [ undefined, undefined, undefined ]
I need to add a couple if statements inside to check for the different types but the {} seems to break it. Am I not supposed to this this in a .map()? Or is there another way to do this?
The usage of {...} is to encapsulate multiple statements.
You need to specify the return keyword:
const final = pdata.map((p) => {
return p.nodeName;
});
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 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.
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