[Day18] 箭头函式

Arrow Function

这个从 ES6 开始新增的一种写法，叫做 Arrow Function expression 箭头函式，主要有两个特性：

• 更简短的函式写法
• this 变数强制绑定

更简短的写法为何呢？
改写成箭头函式可变成 concise body 或者平常使用的 block body，两者的差异在於：

1. concise body 语法会内建 "return"
2. block body 需要明确的 "return" 宣告。
   举个一般函式有两个参数的例子，把 function 拿掉留下参数，并用箭头 => 取代大括号 () 及 return：

let square1 = function (x, y) {
  return x * y;
}
// 改写成箭头函式
// 1. concise body 语法会内建 return
let square1 = (x, y) => x * y;

// 2. block body 要记得加上 return
let square1 = (x, y) => {
  return x * y;
}

在只有一个参数时()可加也可不加，(单一参数) => { 陈述式; }，或单一参数 => { 陈述式; }，如下例：

let square2 = function (number) {
  return number * number;
}
// 改写成箭头函式 
let square2 = (number) => number * number;
// 不加 ()
let square2 = number => number * number;

而如果遇到这个函式不需要参数的状况，还是要留一个空括号给箭头函式，() => { 陈述式 }：

let square3 = function () {
  console.log("Hellow World");
}
// 若无参数，就一定要加括号:
let square3 = () => console.log("Hellow World");

至於 this 似乎是很大一个坑，等比较清楚後再好好的写。

参考资料

008天重新认识JavaScript
MDN-箭头函式