Curly Brackets in Arrow Functions

Question

can someone, please explain the following:

I'm following Dan Abramov's lectures & doing the exercises.

The code works fine, however, the tests fail when the following particular function is written with curly brackets **{ }**.

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

The same code works fine without curly brackets.

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

Here is the JsBin. Please refer to line 31 onwards.

Answer 1

The pair of braces forms a block, containing a list of statements. You need to use a return statement explicitly to make the function return something:

(one) => {
    return oneTodo(one, action);
//  ^^^^^^
}

If you omit the braces, the arrow function has a concise body, which consists solely of a single expression whose result will implicitly become the return value of the function.

Answer 2

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