Asked  7 Months ago    Answers:  5   Viewed   87 times

I'm new to both ES6 and React and I keep seeing arrow functions. Why is it that some arrow functions use curly braces after the fat arrow and some use parentheses? For example:

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

vs.

const handleBar = (e) => {
    e.preventDefault();
    dispatch('logout');
};

 Answers

80

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) => {
  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
Tuesday, June 1, 2021
 
treeface
answered 7 Months ago
90
case 'toggleTodo' :
    return (
        state.map( (one) => 
            oneTodo( one, action )
        )
    );

is equal to:

case 'toggleTodo' :
    return (
        state.map( (one) => {
            return oneTodo( one, action )
        })
    );

see the return statement

Friday, June 4, 2021
 
Gersom
answered 7 Months ago
13

A few syntactic sugar elements of ES6 are at play here:

  • Parameter destructuring: The function actually takes one object, but before the function is executed, its sole object parameter is deconstructed into three variables. Basically, if the argument passed to the function is called obj, then the onClick variable is assigned the value of obj.onClick, and same with the other named destructure variables.
  • Concise arrow bodies: An arrow function that only needs one expression can use the concise form. For example, x => 2*x is an arrow function that returns its input times two. However, the ES6 grammar specification says that a curly brace after the arrow must be interpreted as a statement block. So in order to return an object using a concise body, you have to wrap the object expression in parentheses.
  • JSX: Parentheses are commonly used around JSX expressions that need to span more than one line.

Bonus: One manner in which arrow functions are different from function declarations and function expressions is in the fact that in an arrow function (even one with a non-concise body), the values of arguments and this are the same as the containing scope. So calling an arrow function with .call or .apply will have no effect, and you need to use rest parameters if you want your arrow function to take a variable number of arguments.

Friday, July 30, 2021
 
pyd
answered 5 Months ago
pyd
29

The curly braces denote an object literal. It is a way of sending key/value pairs of data.

So this:

var obj = {name: "testing"};

Is used like this to access the data.

obj.name; // gives you "testing"

You can give the object several comma separated key/value pairs, as long as the keys are unique.

var obj = {name: "testing",
           another: "some other value",
           "a-key": "needed quotes because of the hyphen"
          };

You can also use square brackets to access the properties of the object.

This would be required in the case of the "a-key".

obj["a-key"] // gives you "needed quotes because of the hyphen"

Using the square brackets, you can access a value using a property name stored in a variable.

var some_variable = "name";

obj[ some_variable ] // gives you "testing"
Saturday, July 31, 2021
 
mopsyd
answered 5 Months ago
22

Where was the function created, not where it was called, that is it's enclosing context. Your function is created in the function Person, so this function is the enclosing context for the arrow function.

You only create an arrow function and pass it to the setInterval, it is not created in the setInterval's definition. This

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++;
  }, 1000);
}

is equivalent to this. Here you see that func's enclosing context is the Person.

function Person(){
   this.age = 0;

   var func = () => {
       this.age++;
   };

   setInterval(func, 1000);
}
Friday, September 3, 2021
 
FunThomas
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share