How does this functional Javascript example work?

Question

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

e["Title"] accesses the Title property on e. .map can be invoked on arrays. — CertainPerformance
– CertainPerformance, Commented Jan 22, 2019 at 4:33
How does Javascript identify e as the object within the array? — user3498459
– user3498459, Commented Jan 22, 2019 at 4:36
This should help: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — gp.
– gp., Commented Jan 22, 2019 at 4:36
And this developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — gp.
– gp., Commented Jan 22, 2019 at 4:38

brk · Accepted Answer · 2019-01-22 04:35:56Z

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)

Our_Benefactors · Accepted Answer · 2019-01-22 04:35:44Z

1

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.

answered Jan 22, 2019 at 4:35

Our_Benefactors

3,6273 gold badges25 silver badges30 bronze badges

2 Comments

user3498459 Over a year ago

Not really, here it is much more complex, it is not an object, it is an array of objects! If it is, then how come nothing is added to the e to show the path to it?

Our_Benefactors Over a year ago

@OlegArsyonov e just means 'the element currently being processed' - you could replace e for whatever variable name you choose - movieData, for example.

ellipsis · Accepted Answer · 2019-01-22 04:40:08Z

0

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.

answered Jan 22, 2019 at 4:40

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

Comments

Mike · Accepted Answer · 2019-01-22 05:23:57Z

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);

Collectives™ on Stack Overflow

How does this functional Javascript example work?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related