What are the parenthesis in this piece of code for?

Question

Here is the code I am confused about:

const getMousePosition = (x, y) => ({
  x: x,
  y: y
});

I understand the arrow functions. For example,

const addOne = (x) => x + 1;

is the same as

const addOne = function(x) {
  return x + 1;
}

What I'm uncertain about is the parenthesis that surround the brackets in the top most code.

...({
  x: x,
  y: y
});

If they weren't there then the top most code would just return an object... Can someone explain to me what adding the parenthesis will do?

Thanks in advance.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Advanced_syntax — epascarello, Oct 27 '20 at 18:39
because without it it would be evaluated as a block, not an object. — epascarello, Oct 27 '20 at 18:40
Fun fact: In modern JavaScript `{ x: x, y: y }` condenses to `{ x, y }`. — tadman, Oct 27 '20 at 18:47
@epascarello thanks for sharing the documentation. It was helpful :) — Playground, Oct 27 '20 at 19:00

score 2 · Accepted Answer · answered Oct 27 '20 at 18:39

2

It's to return a JavaScript object, as in { a: 'b' } as opposed to that being interpreted as a code block like { a(); }.

In other words it expands to¹:

const getMousePosition = function(x, y) {
  return ({
    x: x,
    y: y
  });
}

¹ Of course this behaves differently as per all arrow functions.

answered Oct 27 '20 at 18:39

tadman

Good answer, though I don't think mentioning the difference in context is necessary. It might be beneficial to explain that parentheses causes the expression to be evaluated as a separate string of tokens relative to the code structure it is within. – zfrisch Oct 27 '20 at 18:46

1 Answers1