Why the round brackets before the curly brackets with map?

In the solution for the challenge they use a code like mine. But i am a bit confused, why is there a round bracket before the curly bracket and i dont understand it fully.

I thought the curly brackets are the body of the callback function. But now is there a round bracket before and then the curly brackets seem to “command” map to add an object to the new Array(ratings) for every selected element.

My intiution would say this the correct code:

const ratings = watchList.map(movie => {{title: movie["Title"], rating: movie["imdbRating"]}});

So the first curly bracket open the body of the callbackfunction. Then comes another curlybracket to “say” to map to create an object for every element. And at the end they are both closed and the round bracket close the callbackfunction. But this intutive solution is wrong? Why?

Or it is a very specific detail and i just have to learn to use the other way as a beginner?

Thanks for your help.

Your code so far

const ratings = watchList.map(movie => ({title: movie["Title"], rating: movie["imdbRating"]}));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0

Challenge: Use the map Method to Extract Data from an Array

Link to the challenge:

Trying to simplify what you have to a working function:

() => ({ foo: 'bar' })

in this part

({ foo: 'bar' })

The curly braces are defining an object literal.

The parentheses are a little more complicated. Because curly braces can also define a code block, there is an issue if you try to use the arrow functions with an implicit return that just returns an object. When it sees that curly brace that starts the object, JS assumes that it is a code block. We don’t want that. So we wrap it in parentheses to make it clear. This:

() => { foo: 'bar' } // doesn't work

doesn’t work. JS thinks that that is a code block (function body) and tries to figure out what foo: 'bar' means.

So the first curly bracket open the body of the callbackfunction.

With an arrow function, only if you don’t want an implicit return.

() => ({ foo: 'bar' })

and

() => {
  return { foo: 'bar' };
}

will do basically the same thing. The first one doesn’t open up a code block so the arrow function will just return whatever that evaluates to.

Does that help?

2 Likes

Your code:

const ratings = watchList.map(movie => {
  {
    title: movie[“Title”], 
    rating: movie[“imdbRating”]
  }
});

Function map looping throught given array and return new array, by this code you wrote you will create new array of objects with 2 properties, try extract them out of objects so it will let you pass the exercise.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

I know this was already answered but here is the MDN article on arrow functions anyway.

One interesting thing to note is that what you see as the object key is actually interpreted as a label (MDN: labeled statement).


Returning object literals

Keep in mind that returning object literals using the concise body syntax params => {object:literal} will not work as expected.

var func = () => { foo: 1 };
// Calling func() returns undefined!

var func = () => { foo: function() {} };
// SyntaxError: function statement requires a name

This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. foo is treated like a label, not a key in an object literal).

You must wrap the object literal in parentheses:

var func = () => ({ foo: 1 });
1 Like

Thanks for the answers. I think i was(or still am :smiley: ) also missing some fundamentals about arrow functions. This was the reason why i was so confused with the brackets.

You’re not the first. Some of this stuff is confusing. Don’t worry, keep at it, you’ll get it.