[Break down the code] Functional Programming - Use the map Method to Extract Data from an Array

JavaScript
1

(SOLVED IN post #2 and #5)
Hi Hi!
After doing some tweaking from the solution provided in here.
I came out with this similar solution, but slightly different form.
the problem is I kinda understand it but I’m not sure if it’s right or not.

//provided solution
const ratings = watchList.map(movie => ({
  title: movie.Title,
  rating: movie.imdbRating
  }));

//my solution
let newMovie;
const myRatings = watchList.map((movie) => {
  (newMovie = {title: movie.Title, rating: movie.imdbRating})
  return newMovie;
});

console.log(JSON.stringify(ratings));
console.log(JSON.stringify(myRatings));

Questions

  1. Could anybody explain to me what happened and what’s the different between the two?

  2. what all of those braces and parentheses represent (for example in this part:

//provided solution
const ratings = watchList.map(movie => ({

what the curly braces {} do? does it create new object or function?
why it comes after () ?

Thank you guys!

Challenge: Functional Programming - Use the map Method to Extract Data from an Array

Link to the challenge:

2

Hey @dvidzz95 welcome to the forum.

Regarding 2: what all of those braces and parentheses represent

The parenthesis are a destructuring assignement. So
({}) is equivalent to { return {} }.

So that function is returning an object.

Regarding 1: `Could anybody explain to me what happened and what’s the different between the two?``

The main difference is that you are allocating a new object on each iteration, to then return it from the map function. Which is totally redundant.

Also it’s an “anti pattern” in functional programming. One of the core pillar of FP is to avoid side effects, so functions that changes something outside their scope.
In your case your function keep changing the value of newMovie, which is not desired at all.

Hope this helps.

3

Here is another similar question with some answers and a discussion:

4

Hi!
Thank you for your answer about destructuring assignment. :ok_hand:

but, for

I still don’t understand it.
aren’t both doing a loop and returned a new object?
could you explain it further?

*revision: oh wait.
Do you mean because the map should be have returned an array of objects, but I still create a new variable to contain an array that contain the same things as what is returned by map, so I actually kinda get 2 arrays. So, my code became redundant?

5

This

const ratings = watchList.map((movie) => ({
  title: movie.Title,
  rating: movie.imdbRating
}));

Is the same as

const ratings = watchList.map((movie) => {
  return {
    title: movie.Title,
    rating: movie.imdbRating
  };
});

For completeness, same as:

const ratings = watchList.map(function(movie) {
  return {
    title: movie.Title,
    rating: movie.imdbRating
  };
});

Same as

function extractMovieInfo(movie) {
  return {
    title: movie.Title,
    rating: movie.imdbRating
  };
}

const ratings = watchList.map(extractMovieInfo);

This

let newMovie;
const ratings = watchList.map((movie) => {
  newMovie = {
    title: movie.Title,
    rating: movie.imdbRating
  };
  return newMovie;
});

Has a completely redundant variable newMovie that you assign a value to then immediately return. You can just return the value, you’re not doing anything at all with that newMovie variable – it’s just complicating the code and introducing a side effect. ie literally just doing this:

const ratings = watchList.map((movie) => {
  return {
    title: movie.Title,
    rating: movie.imdbRating
  };
});
1 Like
6

I see.
Thank you for your complete answers!

1 Like
7

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