为什么我坚持使用 JavaScript 函数声明

引用

原文：Constant confusion: why I still use JavaScript function statements
作者：Bill Sourour，游戏开发网站 Dev Mastery 创始人，同时也是顾问、教师。
译者：张新慧

时光溯回到上世纪 90 年代晚期，在初次接触 JavaScript 时，老师教我们使用函数声明写下Hello World，它看上去是这样的……
Java代码
function helloWorld() { 
  return ‘Hello World!’; 
} 

那时候，再没有比写出如下Hello World函数更酷的事儿了……
Java代码
const helloWorld = () => 'Hello World!'; 

这个函数表达式体现了 ES 2015 的最大亮点——箭头函数（Arrow function），精简可爱，简直迷死人。第一次看到它时，我的内心戏是：“憋说话，吻我”！

即使是免费的Babel（JavaScript编译器），也无法阻挡我对函数声明的喜爱。

一晃20年过去了，用ES 2015做了这么多项目，如今再写Hello World函数，就是这样的了：
Java代码
function helloWord() { 
  return ‘Hello World!’; 
} 

一睹了新世界的风采，想必你们眼中的旧世界已经不忍直视了吧？——那么简单的函数竟然要 3 行！那些多余的字符怎么看都扎眼！

如今你们内心戏大概是：



我对箭头函数绝对是真爱，但要声明一个顶级函数时，我仍用“土气”的函数声明。

为什么呢？“Uncle Bob” Martin 是这么说的：

引用
花1小时写代码，就要花10小时检查代码。查找漏洞都成了写代码的一部分了，这个差距太悬殊。就算写代码多费点时间，代码也要简单易懂。
—— Robert C. Martin《Clean Code: A Handbook of Agile Software Craftsmanship》

相比函数表达式，函数声明有两大优势：
1.目的明了
每天看上千行代码，快速了解程序员的目的非常重要。

看看这行代码：
Java代码
const maxNumberOfItemsInCart = ...; 

读完了还是不知道这省略符号是函数还是其他什么值。它可能是：
Java代码
const maxNumberOfItemsInCart = 100; 

也可能是：
Java代码
const maxNumberOfItemsInCart = (statusPoints) => statusPoints * 10; 

如果使用函数声明就没有这个麻烦了。

请看：
Java代码
const maxNumberOfItemsInCart = 100; 

对比：
Java代码
function maxNumberOfItemsInCart(statusPoints) { 
  return statusPoints * 10; 
} 

从一开始目的就很明了。

不过，如果你的代码编辑器可以用颜色区分代码，或者你在用一个 Speed Reader，就当我什么都没说。

你们肯定在暗自赞叹函数声明既简洁又迷人吧。

实际上，仅这一个原因还不足以服人，还有另外一个原因。

2. Order of declaration == order of execution
执行顺序和声明顺序一致时，是最理想的。如果能做到执行时才声明使用 const（常数）关键字的值就很厉害了。



都退后，我要开始装逼了

引用
Fair warning: 接下来我要放大招了——下文“行话”连篇，但你只要明白在声明之前不能使用常数就好。

以下的代码会抛出一个错误：
Java代码
sayHelloTo(‘Bill’); 
const sayHelloTo = (name) => `Hello ${name}`; 

这是因为，当 JavaScript 引擎阅读代码时，会绑定（bind）而非初始化sayHelloTo。

JavaScript 中所有声明都是提升（hoist）和绑定的，但初始化的方式各自不同。换言之，JavaScript 提升了sayHelloTo的声明——先阅读，再置其于顶层，然后创建空间来储存其值——但在执行之前不会声明sayHelloTo。

引用
sayHelloTo绑定和初始化的时间差叫作“暂存死区（TDZ）”。


如果在浏览器里直接使用ES2015（而不是借助Babel等使用ES5）,以下的代码也会抛出错误：
Java代码
if(thing) {  
  console.log(thing); 
} 
const thing = 'awesome thing'; 

以上的代码是用var而非const写的，不会抛出错误，因为变量被绑定时会初始化为undefined，而常数被绑定时完全不会被初始化。有点偏题了……

函数声明不会有此类 TDZ 问题。如下文，代码可以是:
Java代码
sayHelloTo(‘Bill’); 
function sayHelloTo(name) { 
  return `Hello ${name}`; 
} 

这是因为函数声明在被绑定时就被初始化了——这是在执行代码之前。

所以不论何时进行函数声明，代码开始执行时，语法都是符合其作用域的。



Professor JavaScript, out!

刚说的问题让代码不得不从低级开始，一步一步往上走。

但我根本适应不了这样的思维方式啊。框架在前，细节在后才对。

大多数代码都是人写的，人的思维往往是跟着代码执行的顺序走的。

实际上，在代码顶端上面加一个 API 的小总结不是很好吗？用函数声明完全可以做到。

看看如下颇为生硬的 shopping cart 模块：
Java代码
export { 
bjxinyongka.webnode.com/
cyxykdh.webnode.com/
haidian.webnode.com/
shunyi4.webnode.com/
tongzhou.webnode.com/
fengtai.webnode.com/
daxing.webnode.com/
changping0.webnode.com/
sjsxykdh.webnode.com/
tiantong.webnode.com/
huilongg.webnode.com/
guomao6.webnode.com/
shuangj.webnode.com/
visatx.webnode.com/
bjdhxyk.webnode.com/
... 

用函数表达式，它就是这样的：
Java代码
... 
const _isValidCustomer = (customerId) => ... 
const _isValidCart = (cart) => ... 
const _isValidItem = (item) => ... 
const createCart = (customerId) => ... 
const addItemToCart = (item, cart) => ... 
... 
export { 
          createCart, 
       addItemToCart, 
  removeItemFromCart, 
        cartSubTotal, 
           cartTotal, 
            saveCart, 
           clearCart, 
} 

把它想象成一个包含着小函数，稍大点儿的模块呢？看个人喜好。

很多人，包括很多聪明人都会觉得在声明之前使用不合常理，而且会产生不良后果。但什么好，什么不好，只是个人意见而已，并非真理。

但我的意见是：代码就是用来交流的。好的代码就是一则精彩的故事。

我会用编译器、转译器、压缩工具等来优化机器的代码。但是优化代码对我来说就是让其更简单易懂。

关于箭头函数
是的，箭头函数是真爱啊。

我一般会用箭头函数来通过一个小函数，将其作为更高阶函数的值。使用箭头函数时，还会使用地图、过滤器等，它们都是我的好朋友。

举个例子：
Java代码
const goodSingers = singers.filter((singer) => singer.name !== 'Justin Bieber'); 
function tonyMontana() { 
  return getTheMoney().then((money) => power) 
                      .then((power) => women);