Use the map Method to Extract Data from an Array (not understanding callbacks espically with arrowfunctions)

Tell us what’s happening:
so i gave this a go watched a few videos on higher order functions but obviously callbacks havnt yet clicked for me this is what i ended up writing i tried to rewrite it into arrow syntax when i got stuck.

var rating = [];
let callBack = () => rating.push({title: watchList["Title"],  rating: watchList["imdbRating"]});

rating = watchList.map(callBack)

the console logs 1,2,3,4,5 am i even using callbacks correctly? i understand they are functions which tell another function how to act but i think im tottaly off the mark understanding them, i looked at the hint which gave a soluation so i cud work backwards and understand how it works however the arrow syntax they use just confuses me as much. this seems like a new way of doing a for loop and i have no idea how it wud be more effiencent but thats not important ;).

Your code so far

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

the above is the soulation from the hints im trying to work it out:

map calls a function with a parameter item is that correct? if the parameter for the callback function is item how does it know that item in this case is watchList as its a nameless function inside a function normally i can see when you call a function in the brackets you put what you want to be replaced for each parameter but in a selfcalling function it works differntly i guess hopefully my confusion makes sense to someone cause im having a real hard time understanding callbacks and rekon im making it harder on myself pls help!

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions

Your callback function should return something to map, you are just pushing to an array inside the callback. Note that, if you are not capturing the new array (you are) or if you are not returning a value from the callback, then map isn’t the right choice, and you should be using something like forEach instead.

const numbers = [1, 4, 9, 16];

// anonymous callback implicitly returning arrayElement * 2
const doubled1 = numbers.map(number => number * 2);

// ES6 Explicit return
const doubled2 = numbers.map(number => {
  return number * 2
});

// ES5 function version
const doubled3 = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled1, doubled2, doubled3);
// expected output: Array [2, 8, 18, 32]

// named callback function implicitly returning arrayElement * 2
const multiplyByTwo = number => number * 2;

// ES6 Explicit return
const multiplyByTwoExplicitReturn = number => {
  return number * 2;
}

// ES5 version
function multiplyByTwoES5(number) {
  return number * 2;
}

const doubled4 = numbers.map(multiplyByTwo);
const doubled5 = numbers.map(multiplyByTwoExplicitReturn);
const doubled6 = numbers.map(multiplyByTwoES5);

console.log(doubled4, doubled5, doubled6);
// expected output: Array [2, 8, 18, 32]

You seem to be talking about a different challenge then the one link to in this thread.

  1. watchList is an array of objects, item is each object in that array which gets passed to the map callback function.

  2. The callback is returning new objects ({}) with the value of the “Title” and “imdbRating” properties from each object assigned to new properties named “title” and “rating”.

// rating is after map
[
  { title: 'Inception', rating: '8.8' },
  { title: 'Interstellar', rating: '8.6' },
  { title: 'The Dark Knight', rating: '9.0' },
  { title: 'Batman Begins', rating: '8.3' },
  { title: 'Avatar', rating: '7.9' }
];
1 Like

thanks a really good explation deffently closer to understanding is there anychance you could write out the arrow function code in the old way. i think my lack of understanding comes from the extra confusion from arrow functions im going spend 2morro reviewing and researching them. thanks again!

sorry about the bad link when i went to write this it came up withg a draft of an old one which i didnt end up needing to use and thought i had deleted it all

I updated my code examples to have ES5 functions. I also added arrow functions that do explicit returns which might also help with understanding the arrow functions syntax.

1 Like

Thank you very much sir, i really appreciate it!

No problem. Higher-Order functions (like map) and callbacks can be a little confusing. One thing that may also help is to write your own version of some of the array methods.