コードを見て学ぶ Javascript => アロー関数

対象・要件

• 記事タイトルの通り文章での説明はほぼしていない。
• Javascriptコードをある程度読める必要があるが、アロー関数について知りたい人なら要件はみたしているハズ。
• サンプルコードはES６仕様で記述。
• 文末等にセミコロンは不要なのでつけていない。

実践（各種関数の書き方からその違いを体感してみよう）

普通の関数/呼び出し

function hello1(name) {
  return 'Hello, ' + name + '!'
}
console.log(hello1("taro"))

無名関数を変数に代入しての呼び出し

// 無名関数を変数（const使っているけど）に代入して使用
const hello2 = function(name) {
  return 'Hello, ' + name + '!'
}
console.log(hello2("taro"))

アロー関数にしての呼び出し

// アロー関数
const hello3 = (name) => {
  return 'Hello, ' + name + '!'
}
console.log(hello3("taro"))

※引数が１個の場合、上記例ではname部分はカッコで括られていないほうが多い気がする
const hello3 = name => {

おまけ

"return"文の省略(注：単文でreturnできる場合のみ有効)

// アロー関数化（"return"文の省略）
const hello4 = name => 'Hello, ' + name + '!'
console.log(hello4("taro"))

関数の引数がない場合

// 引数なし
const hello = () => 'Hello!'
console.log(hello())

関数の引数が引数２個（以上）の場合

// 引数２個（以上）
const helloS = (name1, name2) => 'Hello, ' + name1 + ' and ' + name2
console.log(helloS("taro", "hanako"))