JavaScript定时器刷新逻辑疑问：clearTimeout为何可使用后续赋值变量？

我正在完成一道前端练习题，需求如下：

• 点击HTML按钮
• 在页面显示消息
• 启动2秒的setTimeout，到期后移除消息
• 若在2秒内再次点击按钮，需通过clearTimeout刷新定时器，延长计时

我已经写出了解决代码，但对其中两处逻辑有疑问：

let timeoutID;

function updateMessage() {
  const message = document.querySelector('.js-message')

  message.innerHTML = 'Added'

  clearTimeout(timeoutID)

  timeoutID = setTimeout(function() {
    message.innerHTML = ''
  }, 2000)
}

<button onclick="updateMessage();">Add to cart</button>
<p class="js-message"></p>

疑问1：执行clearTimeout(timeoutID)时，timeoutID在当前函数的下一行才被赋值，为何该语句能生效？ #

这得分两次点击的场景来看：

• 第一次点击：此时timeoutID是undefined（因为只声明没赋值），而浏览器的clearTimeout函数允许传入无效ID（包括undefined），遇到这种情况它不会执行任何操作，这行代码在第一次点击时是“无害”的。
• 后续点击（2秒内）：此时timeoutID已经被上一次点击的setTimeout赋值为有效的定时器ID，调用clearTimeout(timeoutID)就能精准清除上一个还没触发的定时器，之后再创建新的定时器，实现“刷新计时”的效果。

疑问2：开头仅用let声明timeoutID却未赋值，这部分作用是什么？ #

1. 全局作用域共享：用let在全局声明变量，能让每次调用updateMessage函数时，都访问到同一个变量，用来存储上一次创建的定时器ID——如果不声明直接赋值，会变成隐式全局变量，严格模式下会报错，代码可读性也差。
2. 兼容第一次点击逻辑：let声明但不赋值时，变量初始值是undefined，而clearTimeout(undefined)不会触发错误或异常，刚好适配第一次点击时没有旧定时器需要清除的场景，保证代码逻辑连贯。

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