标准在第一行代码中声明所有javascript变量？

Question

我们正在与一家新公司合作，他们有一个编码标准，他们在方法的第一行中立即声明方法中使用的所有Javascript变量。

我问他们是否有这样做的理由并且被告知这是他们的编码标准，所以我用谷歌搜索，显然它确实是一些网站推荐的标准。

我的第一个想法是，如果一个方法太大，你实际上发现将所有变量放在顶部是有帮助的，那么你的方法太大了，需要分解。

所以我的问题是，在首次使用变量而不是在首次使用变量时声明变量的目的是什么？它只是一个编码标准，旨在帮助那些编写方法（我个人认为）的时间太长，或者我还有其他好处吗？

Answer 1

它曾经是一种让代码更清晰的方法，当我们只有var被提升时。例如，以下是您现在仍然看到的一个非常常见的错误：

for (var i = 0; i < arr.length; i++) {
  arr[i].addEventListener('click', function() {
    console.log(i);
  });
}

如果编码样式或linter需要将var i从循环中提取出来并在函数的顶部声明，那么i只有一个绑定，并且在循环结束时，i === arr.length可能会提示更清楚编码器在必须运行它之前修复逻辑错误：

var i = 0;
for (; i < arr.length; i++) {
  arr[i].addEventListener('click', function() {
    console.log(i);
  });
}

但是现在我们有const和let，它们没有从循环中提升（它们具有块范围，而不是函数范围），将变量声明手动提升到函数顶部的效用要小得多。

有些人可能认为手动将变量提升到其范围的顶部会使事情变得更糟，如果人们接受const强烈优于let（const变量无法重新分配; let变量可以，使const变量更容易让程序员在阅读时内化码）。例如，假设变量依赖于其他变量的值：重构以下内容

var startingNum, numMultipliedByTwo, plusOne;
startingNum = 2;
numMultipliedByTwo = startingNum * 2;
plusOne = numMultipliedByTwo + 1;

到ES6 +，手动提升，只能用let完成：

let startingNum, numMultipliedByTwo, plusOne;
startingNum = 2;
numMultipliedByTwo = startingNum * 2;
plusOne = numMultipliedByTwo + 1;

但由于let不具有与var相同的提升问题，并且因为const优于let，所以可以得出结论，这种风格不提供任何好处，而是使用：

const startingNum = 2;
const numMultipliedByTwo = startingNum * 2;
const plusOne = numMultipliedByTwo + 1;

Answer 2

在某个地方汇总所有变量是非常好的，它更容易理解函数开头存在的变量。

假设你在一个非常大的函数中有两个变量。 User和Role

首先你会看到这些变量，你知道它们可以在你的所有函数中供用户使用，你可以在函数中将它们称为全局变量。

然后你有let变量只存在于像这样的某些位置

var item;
for (var i = 0; i < arr.length; i++) {
  item = arr[i];
  let x = arr[i]; // this will work.
  item .addEventListener('click', function() {
    var subItem = arr[i]; // this wont work. 
    var subItem = item; // this wont work either
    var subItem = x; // this will work.
  });
}

因此，当涉及全局变量情况（在函数中）时，公司策略才是好的。你应该试着跟着他们。但是编程是个人的事情，所以在每个环境中使用什么都要明智，并尝试理解每个案例需要什么。