JavaScript variable suggestions for rookie

含义明确且可发音朗读的变量名

举个例子，我们需要一个变量保存当前的日期

// 不够好的命名
// momentjs 提供的格式化函数，将给定特殊的字符串匹配模式传入生成一个与之匹配的字符串
const yyyymmdstr = moment().format("YYYY/MM/DD"); 

// 推荐的命名
const currentDate = moment().format("YYYY/MM/DD");

可搜索、可重用的名称

在我们的编程生涯中，阅读代码有时候甚至比编写代码花费更多的时间。编写可读性高、易于搜索和重用的代码非常重要。

举个例子，我们需要在半小时之后执行某个函数：

const fn = () => {}
// 不推荐的写法
setTimeout(fn, 1800)
// 稍微好一些的代码
setTimeout(fn, 60 * 30)
// 推荐写法
const HALF_HOUR = 60 * 30; // 具有明确意义、可读性高、易于搜索，甚至推荐使用模块来保存项目中的这些常量
setTimeout(fn, HALF_HOUR);

避免隐式代码

显式大于隐式

常见的forEach函数用法：

const locations = ['SuZhou', 'WuXi']
// 便捷的写法
locations.forEach(i => {
  doSomething();
  ...
  ...
  doOther();
  ...
  useLocation(i); // 当上下文间隔稍长时，`i` 将变得不够清晰
});

// 推荐的写法
locations.forEach(location => {
  ...
  ...
  useLocation(location); // 坚持显式的代码
});

不添加不必要的内容

如果你的类名或对象名能告诉你一些信息，那么不要在类或对象内的变量名里重复描述：

// 不推荐的写法
const Car = {
  carMake: "Honda",
  carColor: "Red",
};

// 推荐的写法
const Car = {
  make: "Honda", 
  color: "White"
};

默认参数

默认参数通常比变量通过条件、短路的机制来设置默认值更加简明。并且，在多数编辑器内也能提供更好的提示说明。

// 不推荐的写法
function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
};

// 推荐的写法，需要注意是仅当传入的参数是 undefine 时，默认参数才会生效
// 其他 falsy 值（'' / NaN / false / 0 / null）依然会作为参数的值，此时默认参数无效
function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}

下一章《Function》