When can I remove the curly brackets of a function?

Question

I'm shortening a function expression to an arrow function expression.

When can I remove the curly brackets of the function? Can you always or is there a rule when you're allowed?

I see on (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) it says you can drop curly brackets when you use just a single expression:

However, I understood the following to be 2 expressions, and the absence of curly brackets doesn't stop the function from running. It does still create an implicit return and just returns the first expression. Is this all I need to know about getting rid of curly brackets in arrow function expressions?

f = () => x = 5 * 5; this;

console.log(f());

when you want to return something without making other actions with a data. — demkovych, Jun 25 '20 at 11:42
Without brackets it's just shorthand for return. On the end it the same. — demkovych, Jun 25 '20 at 11:53

demkovych · Answer 1 · 2020-06-25T12:16:19.837

0

On this example you need a square brackets because you need to do something in function body:

const data = {a: 1, b: 2};

const functionWithReturn = () => {
  const newData = {
    ...data,
    c: 3
  }

  return newData;
}

This is shortcut for return (which doing exactly the same as previous):

const functionShort = () => ({
    ...data,
    c: 3
})

The only difference that on the first example you can do something else inside function (like calling another function, make some data mutation...).

edited Jun 25 '20 at 12:16

answered Jun 25 '20 at 11:55

demkovych

7,827
3
19
25

so in the first example, the assignment of the variable `newData` would be an example of data mutation? As you can see in my example, I assign a value to a variable and the function returns it fine.. – tonitone110 Jun 25 '20 at 12:06
this is just shortcut for function return. – demkovych Jun 25 '20 at 12:14
My question was at what point in the shortening of a function expression can you remove the brackets. I've read somewhere you can remove brackets when there is a single line or single expression. I wasn't sure what these two concepts mean – tonitone110 Jun 25 '20 at 12:18
1

It's just a language sugar. You choose where to use them. There are no strict rule about it. – demkovych Jun 25 '20 at 12:20
Okay, that's good to know, thanks. And what do you mean by language sugar? – tonitone110 Jun 25 '20 at 12:23
it's the same like `const a = () => {}` and `function a () {}`. Different ways to write the same. – demkovych Jun 25 '20 at 12:23

score 0 · Answer 2 · answered Jun 25 '20 at 11:55

What I believe you are talking about is an implicit return.

If you remove the curly braces from an arrow function it is implied that you will return what ever the code tells it to do

let implicitAddFunc = (arg) => arg + 2;

In this example you do not need to explicitly declare what you are returning from the function. When you are using curly braces you must actually call out what you are returning

let nonImplicitAddFunc = (arg) => {
    let returnValue;
    returnValue = arg + 2
    //With curly brace must have the keyword *return*
    return returnValue
  }

For a deeper dive please reference this post When should I use `return` in es6 Arrow Functions?

When can I remove the curly brackets of a function?

2 Answers2