Breaking down the problem, do I have the correct understanding?

Thought I’d break down this solution to make sure I understand each part well.

  • movie => , arrow here means movie where function is true (seems I can think of arrow as “where” from now on)
  • outer layer (), is just part of .map function
  • the second (), is used because we’re working on an object?
  • {}, is used because it’s part of the function?
  • movie[], not sure about this one, at first I thought it could be ["Title"] but it’s because the string is part of movie and the "title" is just a string not referencing the object variables?

Please let me know if I’m correct, thanks

Your code so far (sorry I forget the way to hide this solution)

var filteredList = watchList
  .filter(movie => movie.imdbRating >= '8.0')
  .map(movie => ({"title": movie["Title"], "rating": movie["imdbRating"]}));

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36.

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

Link to the challenge:

Let’s look line by line

var filteredList = watchList // We're working on the array 'watchList'

The filter function takes a callback function which returns true for each element we want to keep

  .filter(movie => movie.imdbRating >= '8.0')

so here, this part movie => movie.imdbRating >= '8.0' is equivalent to

function checkMovie(movie) {
  return movie.imdbRating >= '8.0';
}

The map function takes a callback function which returns the new elements for the new array based upon the entries of the old array (in this case, the filtered array that contains movies with a rating greater than 8.0.)

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

so here, this part movie => ({"title": movie["Title"], "rating": movie["imdbRating"]}) is equivalent to

function makeNewMovie(movie) {
  // New objects with only the title and rating
  return {"title": movie["Title"], "rating": movie["imdbRating"]}
}
1 Like

No. It’s a function. You can avoid explicitly writing the curly brackets + the return, like so:

movie => movie.imdbRating >= '8.0'

Same as

(movie) => {
  return movie.imdbRating >= '8.0'
}

Same as

function (movie) {
  return movie.imdbRating >= '8.0'
}

Same as

function movieIsGood (movie) {
  return movie.imdbRating >= '8.0'
}

(There are some differences between arrow functions and functions defined using the function keyword but they aren’t relevant here, all the above are identical in the context of this challenge).


Yes. So above, I described some identical ways of writing the function, that you can avoid the curly brackets and the return statement, so compare:

(movie) => movie.imdbRating >= '8.0'

And

(movie) => {
  return movie.imdbRating >= '8.0'
}

If you write this:

movie => {"title": movie["Title"], "rating": movie["imdbRating"]
}

JS will assume you meant the logic like this:

function (movie) {
  "title": movie["Title"], "rating": movie["imdbRating"]
}

That doesn’t make sense. If you wrap the object in brackets though, it stops JS trying to read it as a function body.


It’s an object, that’s how you access objects in JS (either that or using dot notation, either is fine here)

1 Like

Just in case it wasn’t clear, while it may read as “where”, it’s just a function. If the function returns true, the element will be included. If it returns false, it will be excluded.

In theory the function could have been written elsewhere, like:

const isGoodRating = movie => movie.imdbRating >= '8.0';
var filteredList = watchList
  .filter(isGoodRating)
//...

To me it’s better to think of it as a function that is letting filter know what to keep.

2 Likes

Ah yes, sorry @am93 , I see what you mean by where, I misread that slightly

1 Like

Yeah before I read the arrow as “where” it was just more confusing to understand how the arrow fit in. I kept thinking what’s movie arrow movie etc.

@DanCouper @JeremyLT @kevinSmith Map and Filter make sense as well thanks. Initially it was just confusing looking at all of the (({movie[]})) and so I wanted to make sure I got it. Seems I understood correctly?

1 Like

Yeah, it’s definitely confusing stuff. Eventually it will all make sense, but we all remember struggling with these things.

1 Like