Arrow Function Without Curly Braces

Arrow function without curly braces

The parenthesis are returning a single value, the curly braces are executing multiple lines of code.

Your example looks confusing because it's using JSX which looks like multiple "lines" but really just gets compiled to a single "element."

Here are some more examples that all do the same thing:

const a = (who) => "hello " + who + "!";
const b = (who) => ("hello " + who + "!");
const c = (who) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);
const e = (who) => {
  return "hello " + who + "!";
}; 

You will also often see parenthesis around object literals because that's a way to avoid the parser treating it as a code block:

const x = () => {} // Does nothing
const y = () => ({}) // returns an object

Arrow function runs perfect without curly braces. Added curly braces{ return } and it breaks

You're falling victim to a "trap" in the semicolon insertion rules. After a return, a semicolon is assumed if an expression doesn't start on the same line.

If you change your function as follows, it should work:

function displayMatches () {
    const matchArray = findMatches(this.value, cities)
    console.log(matchArray)
    const html = matchArray.map(place => {
        return `<li>
            <span class="name">${place.city}, ${place.state}</span>
            <span class="population">${place.population}</span>
        </li>`
    }).join('')
    suggestion.innerHTML = html

} 

Arrow function syntax with parentheses instead of curly braces?

Yes, it's also an arrow function. The only difference, is that if you don't use braces, it forces a return:

const App = () => { return true; } // with braces you've to use the return statement

const App = () => true; // without braces it forces the return statement automatically

The MDN arrow function expression documentation says the following about this:

Function body

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
implicit return value. In a block body, you must use an explicit
return statement.

var func = x => x * x;
// concise body syntax, implied "return"

var func = (x, y) => { return x + y; };
// with block body, explicit "return" needed

Furthermore, with regard to the parentheses: the arrow function in this case returns a JSX expression, which is considered a single object.
Parentheses are mostly used for multi-line JSX code. See more information here: https://reactjs.org/docs/introducing-jsx.html
and also the other similar question on Stack overflow.

ES6 Arrow function without curly braces

Yes, that is correct. When you have only one expression, and it's the expression you wish to return from the function, you may omit the curly brackets.

Since <div><label>{props.placeholder}</label></div> is, in fact, a single expression (it gets transpiled to React.createElement(......) or something like that), and you wish to return it from renderInput, that is indeed how you use the no-brackets version of the arrow function.

If you had wished to use variables or do some other computation (conditions, for loops, etc), you wouldn't have been able to omit the brackets.

Throwing errors without curly brackets in lambdas/arrow-functions

throw is a statement, so you cannot use it where an expression is required. The version of an arrow function with no curly braces expects an expression. You can return a rejected Promise instead of throwing:

rp.get(options)
  .catch(err => Promise.reject({'statusCode': err.statusCode ? err.statusCode : 503}));

why does Array.Protoype.every() returns false with curly braces but returns true without curly braces

It's because of the arrow function syntax, If you write something like this:

(param1, param2) => {//some expression}

is equivalent to this:

function f(param1, param2) {
   // some expression
}

and because it does not have an explicit return statement it will return undefined by default.

However, if you omit the curly brackets and put a single expression that would be a shortcut and will return the value of that expression as the return value of the function.

So as for your question in the first form, it will return undefined from the function which evaluates to false and is not what you desire, but the second form correctly returns a boolean indicating the existence of the value.

Why does adding/removing curly braces in this arrow function cause the text to not display for a ReactJS component?

Curly braces are used to delimit the function body, therefore you need a return statement for return a value:

tasks.map((task) => {
  return <h3>{task.text}</h3>
})

---

Related Topics