Map, arrow vs normal function

JavaScript
1

Hello!

I am currently resolving Use the map Method to Extract Data from an Array and after looking at how map works, i resolved it this way:

const rating = watchList.map(function (movie) {
  return {title: movie.Title, rating: movie.imdbRating}
});

Everything works fine this way, but I cannot understand why when doing the same with an arrow function, I get an error:

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

Unexpected Token

Really want to understand why I can do the same with the arrow function.

Thanks

2

The reason it isn’t working is because you are returning an object, which has such similar syntax to a function that it breaks. So to make it work you wrap it in a function like so:

const rating = watchList.map(movie => { return {title: movie.Title, rating: movie.imdbRating}});

3

If you are simply returning an object from an arrow function, you need to enclose the object’s curly braces inside parentheses, otherwise the Javascript interpreter will interpret the opening curly brace as a code block (as in if (true) { code } or for (;;) { code }).

So:

movie => ({title: movie.Title, rating: movie.imdbRating})

should work

4

That return loses you a lot of the elegance of arrow functions. See my other reply in this thread.

5

I guess that depends on your definition of elegance. It is certainly more explicit about what it is doing, but I don’t think that necessarily implies inelegance.

const rating = watchList.map(movie => {
  return {
    title: movie.Title,
    rating: movie.imdbRating
  };
});

const rating = watchList.map(movie => ({
  title: movie.Title,
  rating: movie.imdbRating
}));
6

The concept of elegance in comp sci is one that is rooted in mathematics. Its heart is simplicity (which isn’t a special use case, if you ask google:

Elegance

  1. the quality of being graceful and stylish in appearance or manner; style.
  2. the quality of being pleasingly ingenious and simple; neatness.

I think that arrow functions are inarguably elegant, in that they use an arrow to map from: domain => range, describing the very concept of a function visually. For the hot concept of functional programming, the extra visual clutter reduces readability to anyone trained in mathematics and computation.

Elegance in Comp Sci covers elegance of syntax and elegance of algorithm. You gain nothing in the second by using return and lose something from the first.