JavaScript的return语句中{}与()的使用有什么区别？

示例代码中return后的{}含义 #

你给出的示例代码里：

const fruits = [
  {
    name: "FaceBook",
    nickname: "FB",
  },
  {
    name: "Youtube",
    nickname: "YT",
  },
  {
    name: "AmazonWebService",
    nickname: "AWS",
  },
];
const count = fruits.reduce((acc, cur) => {
  return { ...acc, [cur.nickname]: cur.name };  // 这里的{}是对象字面量
}, {});

这里return后紧跟的{}是对象字面量声明语法，作用是创建一个新对象，将上一次累计的acc属性展开后，新增当前元素的nickname作为键、name作为值的属性，最终把这个新对象作为reduce的累计值返回。

两者核心差异 #

• return后直接使用{}（无括号包裹） #

  存在两种解析逻辑：

  1. {}和return写在同一行时：会被识别为对象字面量，返回这个新创建的对象，和你的示例写法一致。
  2. {}和return分两行写时：受JS自动分号插入（ASI）机制影响，引擎会自动在return后补充分号，相当于直接返回undefined，后面的{}会被当成独立的代码块处理，不会作为返回值生效，属于常见语法坑：

  // 错误示例：返回undefined
  function wrongDemo() {
    return 
    { a: 1 }
  }
  

• return后使用()包裹内容（通常包裹对象字面量） #

  作用是强制引擎将括号内的内容解析为表达式，避免ASI问题，尤其适合多行返回对象、箭头函数隐式返回对象的场景：

  // 示例：reduce用箭头函数隐式返回对象，必须用()包裹{}，否则{}会被识别为函数体边界
  const count = fruits.reduce((acc, cur) => (
    { ...acc, [cur.nickname]: cur.name }
  ), {});
  

快速区分规则：

• 无括号的{}和return同写一行：返回对象
• 无括号的{}和return分行：返回undefined
• 用()包裹的{}：不管是否分行，都强制返回对象

内容的提问来源于stack exchange，提问作者user12842959