JavaScript箭头函数返回undefined问题：为何移除大括号可得到预期结果？

嘿，这个问题其实是箭头函数语法里一个很容易踩的小坑！咱们一步步拆解：

首先明确：箭头函数不是必须始终用大括号的，两种写法对应了不同的返回规则：

• 不带大括号的箭头函数：隐式返回
  当箭头后面直接跟一个表达式时，函数会自动把这个表达式的结果作为返回值，不需要写return。比如你修改后的代码：

  const shoutGreetings = arr => arr.map(word => word.toUpperCase() + '!')
  

  这里arr.map(...)是一个表达式，它的结果会被自动返回，所以控制台能打印出正确的数组。

• 带大括号的箭头函数：显式代码块
  一旦你给箭头函数加上大括号，就表示这是一个包含多条语句的代码块。这时候JavaScript不会自动返回任何值，除非你手动写return语句。你最初的代码里：

  const shoutGreetings = arr => { arr.map(word => word.toUpperCase() + '!') };
  

  虽然arr.map(...)确实执行了，但你没有把它的结果return出去，所以函数默认返回undefined，这就是控制台输出undefined的原因。

如果想要保留大括号的写法，只要加上return就行：

const shoutGreetings = arr => { 
  return arr.map(word => word.toUpperCase() + '!') 
};

简单总结：如果箭头函数的逻辑只有一行表达式，用隐式返回（不带大括号）更简洁；如果逻辑需要多行代码，就用大括号包裹，并且记得手动return需要的结果。

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