Can someone please explain to me why do need "return" on the first arrow function?

[phamvanbien09]

Link: (freeCodeCamp Challenge Guide: Use the filter Method to Extract Data from an Array):

Here the anwer’s code:

var filteredList = watchList
  .map(movie => {
    return {
      title: movie.Title,
      rating: movie.imdbRating
    };
  })
  .filter(movie => {
    // return true it will keep the item
    // return false it will reject the item
    return parseFloat(movie.rating) >= 8.0;
  });

I don’t know why we need to use the word “return” on the .map method. I thougth “return” was implied when we use the arrow function. Likewise, the .filter method doesn’t need the word “return”.

[bbsmooth]

@phamvanbien09

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

You actually can write this without the return but you would need to add parens around the object you are returning.

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

The issue here is that when you return an object then you use curly braces to define the object. But when you use curly braces with an arrow function then you have to use return because JS thinks it is a multi-line function body. So if you tried to do:

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

It wouldn’t work because JS isn’t interpreting this as an object. So you have two options, you can either add curly braces and use an explicit return or you can add parens around the object you want to return.

This is basically just a unique “gotcha” issue you have to look out for if you want to return an object using an arrow function.

[JeremyLT]

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 (’).

[JeremyLT]

@phamvanbien09

var filteredList

Side note: var is a legacy feature and shouldn’t be used

[kevinSmith]

If you use an arrow function with a code block, you need to explicitly state return. If you don’t have a code block (curly braces), it will return whatever that expression evaluates to.

() => 1 + 1
// returns 2

() => {
  1 + 1
}
// returns nothing, undefined

() => {
  return 1 + 1
}
// returns 2

That, and bbsmooth’s comment about the gotcha for implicit returns of object literals with arrow functions.

() => { foo: 'bar' }
// returns nothing or throws error

() => ({ foo: 'bar' })
// returns our object

[JeremyLT]

Other side note: filter should come before map. I have updated the solutions to reflect these changes.

[lasjorg]

It actually parses the object key as a label statement.

I can’t really think of a good code example to show this.

const test = () => {
  foo: {
    console.log('face'); // face
    break foo;
    console.log('this will not be executed');
  }
  console.log('swap'); // swap
};

test();

---

Arrow function expressions - JavaScript | MDN

label - JavaScript | MDN

[JeremyLT]

Huh, today I learned. Those labels are cool. I can see them being handy in a very select set of circumstances.

[lasjorg]

Spoken like a true C/assembly programmer

At least JS doesn’t have a goto statement otherwise I’m sure it would have been misused as it has been in other languages.

I can’t really remember the last time I saw a label used in JS. But I’m sure there are clever ways of using it without having the code become total spaghetti.

I believe the fact that they are so uncommon is why the Svelte framework chose to use it to mark reactive variables (they have to use valid JS, but can repurpose its meaning).

[JeremyLT]

Ha, we C folk do have a tendency to use some old school techniques to get the job done.

I rarely believe in using a goto. Dark magic right there.

[phamvanbien09]

Thank you, I’ll keep that in mind.

[phamvanbien09]

Aha, the parenthesis works. Thank you very much ();

[jaenwawe]

The return the last result, number calculated, or primitive type. This is called implicit.
Like walking out of the store with an item, but leaving the cost of the item+tax with the cashier (please, do not try this at the store)

You can always use the return if you prefer.