JavaScript箭头函数返回对象为何带括号生效不带括号失效？

两种写法执行结果不同，本质是JavaScript引擎对箭头函数语法的默认解析规则导致的：

• 箭头函数语法规定，箭头=>后如果直接接大括号{}，引擎会优先把这对大括号识别为函数体代码块的起止边界，而不是对象字面量的边界。
• 如果想让箭头函数通过隐式返回（不写return关键字）直接返回对象字面量，必须用小括号把对象内容包起来，强制引擎把括号内的内容解析为值表达式，而不是可执行的代码块。

两种写法的具体解析过程 #

可正常运行的写法 #

const createUser = (name, email) => ({name, email})
const user1 = createUser("User Test", "test@test.com")
console.log(user1)

外层包裹的小括号会改变解析优先级，让引擎把括号里的{name, email}识别为对象字面量表达式，箭头函数会隐式返回这个表达式的计算结果，也就是构造完成的用户对象，最终打印结果为{ name: 'User Test', email: 'test@test.com' }，符合预期。

无法正常运行的写法 #

const createUser = (name, email) => {name, email}
const user1 = createUser("User Test", "test@test.com")
console.log(user1)

箭头后直接跟的大括号被引擎判定为函数代码块的边界，块内的内容完全不会被当成对象处理：

1. 开头的name会被解析为标签语句的标记——这是JS里的一种特殊语法，本来是用来给循环、代码块打标识，配合break/continue做流程跳转用的
2. 逗号后的email会被解析为单独的表达式语句，执行后没有任何效果
   整个函数没有写显式的return语句，按照JS规则会默认返回undefined，所以最终打印结果就是undefined，和预期的返回对象完全不符。

补充 #

如果箭头函数本身需要写多行逻辑，本来就会用大括号包裹代码块，这时候要返回对象只需要显式写return即可，和外包小括号的隐式返回写法效果完全一致：

const createUser = (name, email) => {
  // 这里可以加任意逻辑，比如参数校验、日志打印等
  if (!name || !email) throw new Error('缺少必填参数')
  return {name, email}
}

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