Function returns undefined when using map()-CodePudding

const products = [
  { product: "banana", price: 3 },
  { product: "mango", price: 6 },
  { product: "potato", price: " " },
  { product: "avocado", price: 8 },
  { product: "coffee", price: 10 },
  { product: "tea", price: "" },
];

const productsByPrice = function (arr) {
  arr.map((item) => {
    let output = {};
    output[item.product] = item.price;
    return output;
  });
};

console.log(productsByPrice(products))

Hello, I am trying to use map() to map the products array to its corresponding prices but the function returns undefined

I have tried using the debugger to step through the code and there are values stored in the output variable as it iterates through the array but in the end it returns undefined. I am only new to programming and i cant see why this happens. Thanks alot

CodePudding user response：

I fixed your code, and it works fine in my browser. This is what I used:

const products = [
  { product: "banana", price: 3 },
  { product: "mango", price: 6 },
  { product: "potato", price: " " },
  { product: "avocado", price: 8 },
  { product: "coffee", price: 10 },
  { product: "tea", price: "" },
];

const productsByPrice = function (arr) {
  let output = {};
  arr.map((item) => {
    output[item.product] = item.price;
  });
  return output;
};
console.log(productsByPrice(products))

I simply just moved the return outside of the map function, and move the output array before it. I hope this answers your question.

CodePudding user response：

It's a good application of Object.fromEntries() (doc) which returns an object when given an array of [key, value] pairs.

const products = [
  { product: "banana", price: 3 },
  { product: "mango", price: 6 },
  { product: "potato", price: " " },
  { product: "avocado", price: 8 },
  { product: "coffee", price: 10 },
  { product: "tea", price: "" },
];

const productsByPrice = arr => {
  return Object.fromEntries(
    arr.map(({product, price}) => [product, price])
  );
};
console.log(productsByPrice(products))

CodePudding user response：

maybe you should use reduce for what you want to achieve

const products = [
    { product: "banana", price: 3 },
    { product: "mango", price: 6 },
    { product: "potato", price: " " },
    { product: "avocado", price: 8 },
    { product: "coffee", price: 10 },
    { product: "tea", price: "" },
];

const productsByPrice = function (arr) {
   return arr.reduce((acc, item) => {
       acc[item.product] = item.price;
       return acc;
   }, {});
};

console.log(productsByPrice(products))

CodePudding user response：

const products = [
    { product: "banana", price: 3 },
    { product: "mango", price: 6 },
    { product: "potato", price: " " },
    { product: "avocado", price: 8 },
    { product: "coffee", price: 10 },
    { product: "tea", price: "" },
  ];

const productsByPrice = products.map(function (arr) {
    return `${arr.product}:${arr.price}`
})

console.log(productsByPrice);

//try this