JavaScript Array like object .map()

Question

Hello I want to switch the ranking and cereal of my array around using the .map, however I am getting an undefined to the console.log. Based on the awesome feedback I was able to get everything working, however I am still a bit confused about something. For I am not sure how to match the cereal up with the ranking in reverse order? I am totally stumped.

var breakFastFood =[
  {
     cereal: "Captain Crunch",
     scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

 },
 {
  cereal: "Fruity Pebbles",
  scale: "Yuck!"

},
{
  cereal: "Oatmeal",
  scale: "Yum!"

}
];
var cereals = breakFastFood.map(function(bFood){
 return breakFastFood.cereal
});

var rank = breakFastFood.map(function(standing){
 return breakFastFood.scale
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

Answer 1

You are not using the function parameter in the return statement:

var breakFastFood =[
  {
     cereal: "Captain Crunch",
     scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

 },
 {
  cereal: "Fruity Pebbles",
  scale: "Yuck!"

},
{
  cereal: "Oatmeal",
  scale: "Yum!"

}
];
var cereals = breakFastFood.map(function(bFood){
 return bFood.cereal
});

var rank = breakFastFood.map(function(standing){
 return standing.scale
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

You can also use short hand property:

var breakFastFood =[
  {
     cereal: "Captain Crunch",
     scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

 },
 {
  cereal: "Fruity Pebbles",
  scale: "Yuck!"

},
{
  cereal: "Oatmeal",
  scale: "Yum!"

}
];
var cereals = breakFastFood.map(({cereal}) => cereal);

var rank = breakFastFood.map(({scale}) => scale);

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

Answer 2

You are not using the arguments of the Array.map() callback functions:

var breakFastFood =[
  {cereal: "Captain Crunch", scale: "Yuck!"},
  {cereal: "Grape Nuts", scale: "Yum!"},
  {cereal: "Fruity Pebbles", scale: "Yuck!"},
  {cereal: "Oatmeal", scale: "Yum!"}
];

var cereals = breakFastFood.map(function(bFood)
{
    return bFood.cereal;
});

var rank = breakFastFood.map(function(standing)
{
    return standing.scale;
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

Note, you can also get the same result, iterating only once on the array of objects:

var breakFastFood = [
  {cereal: "Captain Crunch", scale: "Yuck!"},
  {cereal: "Grape Nuts", scale: "Yum!"},
  {cereal: "Fruity Pebbles", scale: "Yuck!"},
  {cereal: "Oatmeal", scale: "Yum!"}
];

var cereals = [], rank = [];

breakFastFood.forEach(
    ({cereal, scale}) => (cereals.push(cereal), rank.push(scale))
);

rank.forEach((rating) => console.log(rating));
cereals.forEach((food) => console.log(food));

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}