JavaScript初始化变量时空对象、空字符串、仅声明三种方式如何选择？

结论 #

当前场景下仅声明不赋值是唯一正确的初始化方式。 #

三者底层逻辑与隐患分析 #

currentPlayButton的作用是存储用户点击的DOM元素引用，仅在用户点击按钮后才会被赋值，仅在initial-fade动画结束回调中被读取使用，三种初始化方式的差异如下：

• 第一种：初始化为空对象 let currentPlayButton = {}
  底层会额外开辟堆内存存储无意义的空对象，属于语义不匹配的冗余赋值。如果出现逻辑漏洞导致动画在用户点击前意外触发，执行showCover时传入空对象，调用played.classList.add()时会抛出错误：Cannot read properties of undefined (reading 'add')，且错误提示无法直观反映是变量未赋值的问题，增加排查成本。
• 第二种：初始化为空字符串 let currentPlayButton = ""
  空字符串属于栈存储的原始类型值，和后续要存储的堆存储DOM引用类型完全不匹配，语义错误。如果出现提前触发回调的情况，和空对象一样会在操作classList时抛出报错，无法直观定位问题。
• 第三种：仅声明不赋值 let currentPlayButton
  声明后变量默认值为undefined，无额外内存占用，完全符合语义：变量当前没有有效值，需要等待用户交互后才会赋值。如果出现异常提前调用的情况，报错信息为Cannot read properties of undefined (reading 'classList')，可以直接定位到变量未提前赋值的问题，排查效率更高。

额外优化建议 #

如果要提升代码鲁棒性，可以在调用showCover前增加类型校验，避免异常场景下的报错：

function animationEndHandler(evt) {
  const animationName = evt.animationName;
  if (animationName === "initial-fade" && currentPlayButton instanceof Element) {
    body.classList.remove("initial-fade");
    showCover(currentPlayButton);
  }
}

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