为何第一个JS代码片段输出'bar'，第二个输出空字符串？

这是因为JavaScript引擎对函数name属性的赋值规则，完全取决于函数的定义与赋值方式：

核心逻辑 #

当函数是直接绑定/赋值给变量/常量（或通过函数声明定义）时，引擎会自动将变量名/函数名作为该函数的name属性值；如果函数是通过表达式计算得到的结果间接赋值给变量，引擎无法推断其名称，函数的name就会是空字符串。

代码片段1分析 #

const bar = () => {}
console.log(bar.name) // 'bar'

这里是把箭头函数直接赋值给常量bar，属于「变量绑定式定义」。JS引擎会自动识别赋值目标的名称，将bar作为这个箭头函数的name属性值，所以输出'bar'。
换成普通函数也是一样：

const bar = function() {}
console.log(bar.name) // 'bar'

代码片段2分析 #

const bar = 1 && (() => {})
console.log(bar.name) // ''

这里的箭头函数是逻辑与表达式1 && (() => {})的返回结果——因为1是真值，所以返回后面的箭头函数。这种情况下，函数是通过表达式求值后间接赋值给bar的，引擎无法从赋值过程中推断函数的名称，所以这个函数属于匿名函数，name属性为空字符串。
普通函数的表现一致：

const bar = 1 && function() {}
console.log(bar.name) // ''

补充其他场景的name属性表现 #

• 函数声明的name就是自身的函数名：

  function foo() {}
  console.log(foo.name) // 'foo'
  

• 三元表达式返回的函数，name同样为空：

  const bar = true ? (() => {}) : function() {}
  console.log(bar.name) // ''
  

• 通过Function构造函数创建的函数，name是'anonymous'：

  const bar = new Function()
  console.log(bar.name) // 'anonymous'
  

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