Parenthesis wrapped around the object

JavaScript
1

Hello,

Does anyone know why it requires parenthesis () wrapped around the object after “item =>”?

const products = [
	{
		id: 1,
		name: 'pencil',
		price: 1,
		description: "Perfect for those who can't remember things! 5/5 HIghly recommended."
	},
	{
		id: 2,
		name: 'Housing',
		price: 0,
		description: "Housing provided for out-of-state students or those who can't..."
	},
	]

const productItems = products.map(item => ({id: item.id,   // what does the parenthesis here stand for? why is it needed?
                                            name: item.name, 
                                            price: item.price, 
                                            description: item.description}))

Thank you.

2

Because it’s an arrow function in ES6. Before you dive into ES6 you should learn how to use functions in ES5

3

What do you mean by “function”?
Could you please explain more?
I just followed fCC curriculum. From what I learned, it makes sense to me to have curly braces since it is generating an object, but what is parenthesis here standing for?

4

Hello there,

Here is the general function syntax:

function myFunc() { const myObject = { example: 1 }; return myObject; }

Here is the equivalent in ES6:

const myFunc = () => { const myObject = { example: 1 }; return myObject }

Here is the interesting thing about arrow functions:

  • it automatically returns what is after the arrow, provided it is not an opening curly brace/bracket.
    Equivalent of above:
const myObject = { example: 1 };
const myFunc = () => myObject; // No return keyword needed!

However, if you want to return an object without creating an external variable (like above):

const myFunc = () => ({ example: 1 });

Essentially, without the parentheses, the function is interpretted as:

function myFunc() { example: 1 }

If you can see the syntax highlighting, the interpreter is not happy. Did I want an object literal after myFunc(), or did I want to open the function with myFunc() {?

Hope this helps

1 Like
5

Thank you for the helps.
However, I am not 100% clear yet…

If we are taking this case I posted as an example, here is the same code rewritten in general function syntax:

const productitems = products.map(function(item) {
  return {id: item.id, 
          name: item.name, 
          price: item.price}
})

It does not have parenthesis around the object returned.
And if I removed parenthesis from ES6 syntax, it generates Error:

const productItems = products.map(item => {id: item.id, 
                                            name: item.name, 
                                            price: item.price})     // Error: Unexpected token ':'

I don’t understand where this extra parenthesis comes from… or we just need to add it as an extra to make it work particularly for the case when the return is an object?

Thank you.

6

Never mind!
I’ve found the answer from MDN page about ES6 Arrow function expression, where it says -

To return an object literal expression requires parentheses around expression:

params => ({foo: "a"}) // returning the object {foo: "a"}

so we are required to add this extra parenthesis if what we want is a return of an object literal instead of a block.

Thank you for the helps!

7

Right, in JS you cannot start an expression with a curly brace or JS will assume it is a code block. This creates this problem with objects. It wouldn’t be a problem with say, an implicit return of an array, because that doesn’t start with a curly brace.

1 Like
8

A similar problem can manifest itself when trying to destructure into a previously declared variable:

const myObject = { p1: 1, p2: 2 };
let p1, p2;

{ p1, p2 } = myObject; // seems like it should work but doesn't
({ p1, p2 } = myObject); // parentheses save the day

const myArray = [1, 2];
let el1, el2;

[el1, el2] = myArray; // not a problem becauce doesn't start with a curly brace
2 Likes
9

Good to know! :+1: :pray: