1

I'm little confused with the usage of parenthesis and flower brackets interchangeably in arrow functions.

For instance,

Use of Flower brackets 

const sayHello = () => { console.log('Hello') }

Use of Parentheses

const sayHello = () => ( console.log('Hello') )

Both gives same output on the console. Do they both mean same? Sorry if this question sounds dumb.

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
coderpc
  • 4,119
  • 6
  • 51
  • 93

2 Answers2

2

When you use curly braces (flower brackets) it defines the function body - so you can place multiple semicolon-separated statements inside them. If you wish to return a value from the function, you must explicitly use the return statement.

If you use parentheses, you are going to be returning the value of the expression inside the parentheses, and there can only be one expression (with no semicolon). If you wish to do multiple things with parentheses, you can use the comma operator:

const doTwoThings = () => (console.log("Hello"), console.log("Goodbye"));
console.log(doTwoThings());

Here, you're logging Hello, then Goodbye, then you're logging the return value of the function - which is undefined.

You can do the same thing inside the curly braces, and you won't see any visible difference:

const doTwoThings = () => {console.log("Hello"), console.log("Goodbye")};
console.log(doTwoThings());

Again you're logging Hello and Goodbye to the console, then you're logging the return value of the function - however, using {} needs to have the explicit return keyword, so it's undefined because we don't return anything from the function.

Also note that sometimes you'll see both parentheses and curly braces:

const aFunction = () => ({ foo: "bar" });
console.log(aFunction());

There's a nice explanation here, but basically when you have a function returning an object, the curly braces {} denote the object, and the parentheses enforce the implicit return of the contained expression - the object. So the object is created, then the expression is evaluated and returned.

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
  • Awesome explanation! Now, I get it. – coderpc Jun 13 '19 at 02:35
  • No problem @Pavan, always glad to help. – Jack Bashford Jun 13 '19 at 02:35
  • Nit: *"and there can only be one statement (with no semicolon)"* It has to be an expression, not a statement (e.g. you could not do `() => if (x) y`). – Felix Kling Jun 13 '19 at 08:07
  • My bad @FelixKling, I always get those two mixed up. Do you have a way of determining which one's which (or have you just memorized the list)? – Jack Bashford Jun 13 '19 at 08:13
  • Anything that you can put on the left hand side of an assignment is usually an expression. But the ecmascript spec actually separates expressions in two different sections, and just looking at the TOC/menu is useful IMO. – Felix Kling Jun 13 '19 at 08:21
0

When you use "flower brackets" as you put it, it's like you're defining an ordinary function, having multiple statements as usual. In your example, it runs console.log('Hello') and doesn't return anything. When you use parentheses, you can specify only a single expression, and then the result of that expression becomes the return value. In other words, => (bar) is basically the same as => { return bar; }. Both work the same in your case since you're only using that function for its side effects and don't care about its return value.

Joseph Sible-Reinstate Monica
  • 45,431
  • 5
  • 48
  • 98