why using { } in map() method is returning undefined array?

Question

an object array

const menu = [
  {
    name: "pancakes",
    category: "breakfast",
  },
  {
    name: "burger",
    category: "lunch",
  },
  {
    name: "steak",
    category: "breakfast",
  },
  {
    name: "bacon",
    category: "breakfast",
  },
];

this is returning an undefine array but when curly braces removed it's working fine.

const categories = menu.map((item)=>{item.category});
console.log(categories);

Answer 1

If you use braces, then you are creating a function body:

const categories = menu.map((item)=>{
    item.category;
    // implicit 'return;'
});
console.log(categories);

If you want to return an object literal, wrap it in parentheses. Note, however, that { item.category } is not a valid object literal. You'll need to provide a property name:

const categories = menu.map((item)=>({category: item.category}));
console.log(categories);

See: Arrow function expressions: Advanced Syntax by MDN.