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》