[JS] アロー関数

無名関数

２つの出力結果は同じです

const hello = function(name = 'Shun') {
  console.log('hello' + name);
}

hello();

function hello(name = 'Shun') {
  console.log('hello' + name);
}

hello();

---

が、
１つ目の、実行後に変数の宣言があった場合にはエラーが発生します

hello();

const hello = function(name = 'Shun') {
  console.log('hello' + name);
}

JavaScriptの動きとしては、関数を一度ファイル全体で確認してから処理が行われるので、
２つ目の関数宣言はエラーが発生しません

hello();

function hello(name = 'Shun') {
  console.log('hello' + name);
}

この違いは認識しておきましょう

アロー関数

=>を用います
{　}内が一行の場合は{　}を省略できます
nameにデフォルト値がない場合、かつ関数の引数が１つの場合には(　)も省略できます

const hello = name => console.log('hello' + name);

hello('Shun');

---

nameにデフォルト値がある場合

const hello = (name + 'Shun') => console.log('hello' + name);

hello();

---

かつ関数の引数が２つの場合

const hello = (name, age) => console.log('hello' + name + age);

hello('Shun', 20);

戻り値

const hello = (name, age) => 40;
console.log(hello());

これは

const hello = (name, age) => {
  return 40;
}

console.log(hello());

と同じ意味です

実用的な使い方

これを

const arry = [1,2,3,4,5,6];

arry.forEach(function(value) {
  console.log(value);
})

こうします

const arry = [1,2,3,4,5,6];
arry.forEach(value => console.log(value));

出力結果は同じですが、さっぱりしましたね