Return of .map() and .filter()

JavaScript
1

I will get right to the point .

function getRating(watchList){
// …watchList.map not watchList.filter…
let nolanFilms =watchList.map(i=>
{
if(i[“Director”]===“Christopher Nolan”)
{
return i;
}

})
console.log(nolanFilms)

The last element in the array nolanFilms is

console.log(nolanFilms)

undefined

and because of this my

let sumOfRatings=nolanFilms.reduce((accumulator,i)=>
{ let b=parseFloat(i[“imdbRating”])
console.log(accumulator +b)
return accumulator +b
},0.0)

returns

TypeError: undefined is not an object

However when is use watchList.filter instead of watchlist.map , undefined is not present and my code works perfectly :smiley:.I know that a function returns undefined automatically.

My question is why does .map() return undefined and not .filter() ???

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, Ellen 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"
  }
];

function getRating(watchList){
  // Only change code below this line
  let nolanFilms =watchList.map(i=>
  {   
    if(i["Director"]==="Christopher Nolan")
    {
    return i;
    }
    
  })
console.log(nolanFilms)
let sumOfRatings=nolanFilms.reduce((accumulator,i)=>
{ let b=parseFloat(i["imdbRating"])
console.log(accumulator +b)
  return accumulator +b
  },0.0)

  return sumOfRatings/nolanFilms.length

  // Only change code above this line
  }
getRating(watchList);

Your browser information:

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

Challenge: Use the reduce Method to Analyze Data

Link to the challenge:

2

To answer your question I had to go over the entire thing :slight_smile: and made some quick notes that hopefully helps u understand them as well

reduce()

is for processing problems

allows for more gen forms of arr procces

filter and map are special applications of reduce

iterates over each item of the array

and then returns a single value

it uses a callback function(return)

callback has 4 arguments

1 accumulator

gets return value from prevous iteration(call)

2nd is element in process

3rd is index of the elem

1 2 3 4

^

if elem is 0 this is the elem in process

-------> the iteration

0 1 2 3

^

index

4th is the array which reduce is called

reduce has an + param which

takes an inital value for the accumulator

if this 2nd param is not used

then the 1st iteration is skipped

and the 2nd iteration get passed the 1st elem of the array as the acumulator

accumulator means result/total

parameter is a named variable passed

As to go back to you’re question

My question is why does .map() return undefined and not .filter() ???
To understand this we have to go back to the previouse lessons and by doing so we can conclude
that it is because the map function is used to map one value to another
if we take a look at your code the return function is trying to return something that doesn’t fit with this logic
The filter function however, takes a function that returns true or false based on whether you want the item in the resulting array or not. So yes the code works perfectly in that case

Hope it makes scence

2 Likes
3

Map is a one-to-one relation, it will always return an array of the same size as the original. It allows you to iterate over each member of an array, transform modify or whatever, and return some value that will be used as the member of the new array. But, whether you explicitly return a value or not, a value will be added to the new array.

See, in your inner function, you explicitly include a return value in one and only one case… But functions in javascript always return a value. Even if that return value is undefined.

So what’s happening is, for each member of the array that doesn’t match your criteria, map is returning an undefined value… Which is what gets appended to that one-to-one array.

3 Likes
4

wow thanks for taking your time to patiently read my question and answer it too …much appreciated :slight_smile: …yup i got it now

5

ohh ok thanks a lot for the quick reply …much appreciated :slight_smile: