CODEWITHSUNDEEP
javascriptarraysfunctionobjectfunctional-programming
user3498459
user3498459

Reputation:

How does this functional Javascript example work?

I just don't seem to be able to wrap my head around this snippet of code. Could you give me a hint or two on it? 

  var filteredList = watchList.map(function(e) {
  return {title: e["Title"], rating: e["imdbRating"]}
  }).filter((e) => e.rating >= 8);

The question: I understand that 'e' is the parameter passed on to the callback of the map method but what are e["Title"] and e["imdbRating"]? We are expected to run this function on an array of objects. I don't understand the syntax, and how this can even invoke something. Extremely perplexed.

I UNDERSTAND WHAT THE CODE DOES BUT HOW COME ARE WE USING THIS title: e["Title"], rating: e["imdbRating"] ???

THIS IS A SAMPLE OF AN ARRAY OF OBJECTS!

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"
                },

Upvotes: 0

Views: 84

Answers (4)

Mike
Mike

Reputation: 617

Let's split it up so it makes more sense

First, we create a new array with map. Map works by iterating over array(watchList in this case), at each iteration it passes the current array element to the provided callback function, the returned value defines that value at index i in new array where index i is the position of the element passed to the callback function.

Take for example:

const timeTwo = [1, 2, 3].map(num => num * 2);
// timesTwo = [2, 4, 6]

In the example your providing, map returns a new array of objects containing properties title, and rating. title remains the same from original array, but rating is the mapped value of e.imdbRating. 

var filteredList = watchList.map(function(e){
  return {
    title: e.title,
    rating: e.imdbRating,
  };
});

Now lets look at the next part. Filter, creates a new array, by iterating over an old array, if the callback passed to filter returns true that element is added to the new array if it returns false the element is excluded.

In this case, the final value of filtered list will be an array of objects with properties title and rating, where the rating is greater than or equal to 8; 

  var filteredList = filteredList.filter((e) => e.rating >= 8);

Lets put it all together, watchList.map returns a new array, and all arrays have a filter method, so we can chain filter off map(like below). Finally filter, returns an array which will be stored in the variable filteredList.

  var filteredList = watchList.map(function(e) {
      return {title: e.Title, rating: e.imdbRating}
  }).filter((e) => e.rating >= 8);

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

var filteredList = watchList.map(function(e) {
  return {title: e["Title"], rating: e["imdbRating"]}
  }).filter((e) => e.rating >= 8);

In the above code, the map function is used to iterate all the elements from watchList array. Map iterates all the values one by one which are objects. e is assigned the object. It returns an object with property and its value as e["Title"]. It is a way of accessing the properties of an object.e["Title"] and e.imdbRating will respectively call the values related to the title and imdbRating values.

Upvotes: 0

brk
brk

Reputation: 50291

Here e points to the current element being processed in the array. So e will basically represent each object inside the array. You can replace e with any other valid name.

In your code first map is creating a new array of object and each object have tw keys title & imbRating , then again applying filter on it to create another new array where the value of imbRating is more than 8

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"
  }
]



var filteredList = watchList.map(function(e) {
  return {
    title: e["Title"],
    rating: e["imdbRating"]
  }
}).filter((e) => e.rating >= 8);

console.log(filteredList)

Upvotes: 1

Our_Benefactors
Our_Benefactors

Reputation: 3539

e is an object with some properties. Imagine it looks like this:

var e = {
    Title: 'foo',
    imdbRating: 7.2,
};

so e["Title"] will return 'foo' and e["imdbRating"] will return 7.2.

the function you posted could also be written like this: 

  var filteredList = watchList.map(function(e) {
      return {title: e.Title, rating: e.imdbRating}
  }).filter((e) => e.rating >= 8);

Maybe that makes it easier to understand.

Upvotes: 1

Related Questions