Must "return" be used?

JavaScript
1

Hello there, my code is actually working but I saw the beginner solution on FCC and the return keyword is used. Can somebody explain to me why must we used return? And in the solution there’s two return.

How it works: Does it first return the mapList (after using map method) and then filter the mapList using the filter method?

Your code so far

// The global variable
var watchList = [
  {
    "Title": "Inception",
    "Year": "2010",
    "Rated": "PG-13",
    "Released": "16 Jul 2010",
    "Runtime": "148 min",
    "Genre": "Action, Adventure, Crime",
    "Director": "Christopher Nolan",
    "Writer": "Christopher Nolan",
    "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
    "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
    "Language": "English, Japanese, French",
    "Country": "USA, UK",
    "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
    "Metascore": "74",
    "imdbRating": "8.8",
    "imdbVotes": "1,446,708",
    "imdbID": "tt1375666",
    "Type": "movie",
    "Response": "True"
  },
  {
    "Title": "Interstellar",
    "Year": "2014",
    "Rated": "PG-13",
    "Released": "07 Nov 2014",
    "Runtime": "169 min",
    "Genre": "Adventure, Drama, Sci-Fi",
    "Director": "Christopher Nolan",
    "Writer": "Jonathan Nolan, Christopher Nolan",
    "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow",
    "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
    "Language": "English",
    "Country": "USA, UK",
    "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg",
    "Metascore": "74",
    "imdbRating": "8.6",
    "imdbVotes": "910,366",
    "imdbID": "tt0816692",
    "Type": "movie",
    "Response": "True"
  },
  {
    "Title": "The Dark Knight",
    "Year": "2008",
    "Rated": "PG-13",
    "Released": "18 Jul 2008",
    "Runtime": "152 min",
    "Genre": "Action, Adventure, Crime",
    "Director": "Christopher Nolan",
    "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)",
    "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine",
    "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
    "Language": "English, Mandarin",
    "Country": "USA, UK",
    "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg",
    "Metascore": "82",
    "imdbRating": "9.0",
    "imdbVotes": "1,652,832",
    "imdbID": "tt0468569",
    "Type": "movie",
    "Response": "True"
  },
  {
    "Title": "Batman Begins",
    "Year": "2005",
    "Rated": "PG-13",
    "Released": "15 Jun 2005",
    "Runtime": "140 min",
    "Genre": "Action, Adventure",
    "Director": "Christopher Nolan",
    "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)",
    "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes",
    "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.",
    "Language": "English, Urdu, Mandarin",
    "Country": "USA, UK",
    "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg",
    "Metascore": "70",
    "imdbRating": "8.3",
    "imdbVotes": "972,584",
    "imdbID": "tt0372784",
    "Type": "movie",
    "Response": "True"
  },
  {
    "Title": "Avatar",
    "Year": "2009",
    "Rated": "PG-13",
    "Released": "18 Dec 2009",
    "Runtime": "162 min",
    "Genre": "Action, Adventure, Fantasy",
    "Director": "James Cameron",
    "Writer": "James Cameron",
    "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang",
    "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.",
    "Language": "English, Spanish",
    "Country": "USA, UK",
    "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg",
    "Metascore": "83",
    "imdbRating": "7.9",
    "imdbVotes": "876,575",
    "imdbID": "tt0499549",
    "Type": "movie",
    "Response": "True"
  }
];

// Only change code below this line

/* GIVEN SOLUTION
var filteredList = watchList.map(
  movie => {
    return {
      title: movie.Title,
      rating: movie.imdbRating
    };
  }).filter(
  movie => parseFloat(movie.rating, 10) >= 8.0);
*/

var filteredList = watchList.map(
  (
    {Title: title, imdbRating: rating}
  ) => 
  (
    {title, rating}
  )
).filter(
  mapListRating => mapListRating.rating >= 8.0
);

// Only change code above this line

console.log(filteredList);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.1 Safari/605.1.15

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

Link to the challenge:

2

It is just different syntax. The return statement can be implicit.

3

The Array.map method works by iterating over each element in the array, usually manipulating the element in the desired way and then returning that element. which means you need to have a return statement when you’re working with the map method. The same goes for the filter.

There are different ways you could return elements in arrow functions. what you’re doing is something called the implicit return with which if your function contains only one expression then you could omit the “return” keyword because of which doing something like

let anyFunction = (i) => i

//if you try to save that returned value in a variable
let value = anyFunction(23)

console.log(value)
// this will log out 23

is completely valid because there’s only expression.

here’s an awesome article if you need a refresher on arrow functions.

in this example, the map method is evaluated first which returns a new array.

now that we have a new array of objects with only the titles and ratings in it, we can filter the whole thing. The returned array is passed to the filter method so after the initial step the code would look something like

(the array that was returned from map).filter ((mapListRating) => mapListRating.rating >= 8.0
);

Hope this helped! :slight_smile:

4

The rule goes something like this

A function must include a return statement to return a value. If there’s no return statement, undefined is returned from the function.

But with the arrow function definition, we can avoid the use of return when the function body includes only a single expression. This shorthand notation generally makes the code concise and clean. In this case, we do not use the braces { and }. If we use braces to mark the function body, regardless of the number of statements in the body, we need to use return. Here are examples

let nums = [10, 5, -29, 4, 8, 14]

let ans

ans = nums.map(x => {return x + 10}) // version M1
ans = nums.map(x => x + 10) //version M2
ans = nums.map(x => {x + 10} //NOT GOOD; undefined is returned

ans = nums.filter(x => {return x > 5}) //version F1
ans = nums.filter(x => x > 5) //version F2
ans = nums.filter(x => {x > 5}) //NOT GOOD; undefined is returned

We need return for M1 and F1 because the function body is surrounded by { and }.

The situation gets little interesting when we return an object in the arrow function. Suppose I want to map a movie object to Title and Year. The arrow function can be defined fully as

const ans = watchList.map(m => { return {title: m.Title, year: m.Year}})

We cannot, however, use a shorthand notation like

const ans = watchList.map(m =>  {title: m.Title, year: m.Year} ) //NO

The problem here is that the symbol { is overloaded in this context. This left brace will be interpreted as the beginning of the function body, and you’ll get an error. You can avoid this error by using the full definition with return as shown, or use the parentheses to nest the object notation as

const ans = watchList.map(m =>  ({title: m.Title, year: m.Year} ) )
1 Like
5

Thanks so much for those who replied I understand now! ^^

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.