if statements in an arrow function [duplicate] - javascript

This question already has answers here:
How to use if-else condition in arrow function in JavaScript?
(6 answers)
Closed 4 years ago.
storyWords.filter(word => if (unnecessaryWords.includes(word)){
continue;
}
else{
betterWords.push(word);
}) ;
I keep getting an error "Unexpected token if", I was wondering if when you use an arrow function the syntax for if statements is different than in a regular function.

If you're having a statement (break, continue, if...else or switch) inside the arrow function you need to use curly braces: { }.
Arrow functions can have either a "concise body" or the usual "block body".
In a concise body, only an expression is specified, which becomes the explicit return value. In a block body, you must use an explicit return statement.
- MDN web docs
So write:
storyWords.filter(word => {
if (unnecessaryWords.includes(word)) {
continue;
} else {
betterWords.push(word);
}
});

Related

Arrow function in Objects [duplicate]

This question already has answers here:
Curly Brackets in Arrow Functions
(3 answers)
Why doesn't my arrow function return a value?
(1 answer)
When should I use a return statement in ES6 arrow functions
(6 answers)
Closed last month.
I've summerized my problem in an example below, the problems is, if I use in an object an arrow function with only one item (23) in the function (as below), I've to not to use curly brackets for it to work. Why is so? I thought it was optional not to use curly brackets when in the function there is only one item. Thanks
Doesn't work with curly brackets, returns undefined
obj = { y: () => {23} }
console.log(obj.y());
Works without curly brackets, returns 23
obj = { x: () => 23 }
console.log(obj.x());`
"to work with or without the curly brackets"

Why does "true && () => {}" produce "Uncaught SyntaxError: Malformed arrow function parameter list"? [duplicate]

This question already has answers here:
Why does the logical or operator (||) with an empty arrow function (()=>{}) cause a SyntaxError?
(3 answers)
Closed 3 years ago.
The following code, when executed,
true && () => {}
yields
Uncaught SyntaxError: Malformed arrow function parameter list
Why ?
Edit: I know wrapping the function in parenthesis works, thanks everyone, but I'd like to understand why can't the parser figure out it's a function in the first place.
The reason is due the first part true || (a) being parsed by itself and THEN the parser is trying to parse the rest => {}, which causes the error.
It's parsing true && () as the parameter list.
Because arrow functions has special parsing rules. See official documentation at Parsing order paragraph.

rest operator returned by fat-arrow function [duplicate]

This question already has answers here:
ECMAScript 6 arrow function that returns an object
(6 answers)
Closed 5 years ago.
Is it possible to write the code below in one line (without return keyword)?
elements.map(element => {
return {...element, selected: false};
})
Yes, by using the concise arrow form, enclosing the object initializer in ():
elements.map(element => ({...element, selected: false}));
// ---------------------^-----------------------------^
You need the () because otherwise the { of the object initializer is read as the { as the beginning of a function body. The ( instead makes it an expression body with implied return.

Unexpected block statement surrounding arrow body sort method [duplicate]

This question already has answers here:
Unexpected block statement surrounding arrow body
(3 answers)
Closed 5 years ago.
I am getting the following error Unexpected block statement surrounding arrow body when I run this code.
getters: {
loadedMeetups(state) {
return state.loadedMeetups.sort((meetupA, meetupB) => {
return meetupA.date > meetupB.date;
});
},
I can't figure out why it would be giving me this error.
If a fat arrow function just consists of a return statement, you don't need to wrap it in braces, just put the expression being returned:
getters: {
loadedMeetups(state) {
return state.loadedMeetups.sort((meetupA, meetupB) => meetupA.date > meetupB.date);
},
JSLint is simply warning that you have this redundant code.

Two javascript functions not working as same way [duplicate]

This question already has answers here:
What are the rules for JavaScript's automatic semicolon insertion (ASI)?
(7 answers)
Closed 6 years ago.
I have written 2 javascript function but they are not working as same.
console.log(func2()); is undefined. Can anyone tell me why and how to solve this?
function func1()
{
return {
bar: "hello"
};
}
function func2()
{
return
{
bar: "hello"
};
}
console.log(func1());
console.log(func2());
It's because of automatic semicolon insertion. Never put a newline after return and prior to what you want to return, it's treated as though it terminates the return statement (e.g., a ; is inserted after return), and your function ends up effectively returning undefined.
I know this one. It's semicolon insertion. func2 is translated to
function func2()
{
return;
{
bar: "hello"
};
}
And return undefine.

Categories

Resources