变量声明放在哪里好？别再往函数开头硬塞了

写代码时，你是不是习惯把所有变量一股脑儿堆在函数最上面？比如这样：

function calculateTotal() {
  let items;
  let discount;
  let taxRate;
  let subtotal;
  let total;

  items = getCartItems();
  discount = getUserDiscount();
  taxRate = getConfig('tax_rate');
  subtotal = sumPrices(items);
  total = applyDiscount(subtotal, discount) * (1 + taxRate);

  return total;
}

看着整齐，但真读起来反而费劲。变量声明离实际使用隔了七八行，中间还穿插着别的逻辑，稍不注意就忘了 discount 是从哪来的、有没有被改过。

靠近使用处，才是真“就近”

变量不是行李，不用提前打包堆在门口。它该在哪出现，就出现在哪——用之前那一行最合适。比如：

function calculateTotal() {
  const items = getCartItems();
  const subtotal = sumPrices(items);
  const discount = getUserDiscount();
  const adjusted = applyDiscount(subtotal, discount);
  const taxRate = getConfig('tax_rate');
  const total = adjusted * (1 + taxRate);

  return total;
}

每个变量一出来就立刻派上用场，类型、来源、用途一目了然。调试时找 subtotal 不用上下翻，它就在 sumPrices(items) 下面紧挨着。

作用域越小，脑子越轻松

很多人担心“到处声明会乱”，其实恰恰相反：限制作用域才是减少混乱的正解。用 const 或 let 在块级或语句级声明，比全堆在顶部用 var 更安全。

比如处理表单提交：

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const formData = new FormData(form);
  const email = formData.get('email');
  if (!isValidEmail(email)) {
    showErrorMessage('邮箱格式不对');
    return;
  }

  const payload = { email };
  const controller = new AbortController();
  fetch('/api/subscribe', {
    method: 'POST',
    body: JSON.stringify(payload),
    signal: controller.signal
  });
});

formData、email、payload、controller 各自只活在自己需要的那一小段里，不会误跑到别的分支里去干扰判断。

特殊情况也得讲道理

当然也有例外。比如一个变量要在多个 if 分支里反复用，又没法提前算出来，那就得往上提一层：

if (user.isPremium) {
  const badge = getBadge(user.tier);
  renderBadge(badge);
} else if (user.referrer) {
  const badge = getBadge('referral');
  renderBadge(badge);
}

这时不如直接提到外层：

let badge;
if (user.isPremium) {
  badge = getBadge(user.tier);
} else if (user.referrer) {
  badge = getBadge('referral');
}
if (badge) {
  renderBadge(badge);
}

不是因为“必须放开头”，而是因为逻辑本身要求它跨分支存在——这和“为了整齐硬塞”有本质区别。

说白了，变量声明的位置，不是语法规定出来的，是代码想清楚之后自然落下的位置。你手里的那行 const xxx = ...，就该是你刚想到“接下来要用这个”的那一刻，顺手敲出来的。