JavaScript 関数・アロー関数について お勉強

JavaScript 関数・アロー関数について お勉強:

参考にしたもの

先輩方の知恵に感謝！

• Mozilla Developer Network 関数
• Mozilla Developer Network アロー関数
• 無名関数と即時関数？関数パターンを理解してメンテナブルなソースに！
• アロー関数式を学ぶついでにthisも復習する話
• JavaScript アロー関数を説明するよ

関数の宣言(定義)についてまとめてみました

① 関数の宣言(定義)

function greeting(yourName) { 
  console.log('Hi' + yourName) 
} 
 
greeting('Ryu') 
// HiRyu 

② 関数を変数に代入する

let greeting = function greeting(yourName) { 
  console.log('Hi' + yourName) 
} 
 
greeting('Ryu') 
// HiRyu 

③ 関数を変数に代入する + 関数名の省略(無名関数)

このパターンが無名関数と呼ばれます

let greeting = function (yourName) { 
  console.log('Hi' + yourName) 
} 
 
greeting('Ryu') 
// HiRyu 

④ 関数の呼び出しは、宣言の前に置くことができます(Not実行)

greeting('Ryu') 
 
function greeting(yourName) { 
  console.log('Hi' + yourName) 
} 
 
// HiRyu 

※変数に代入した場合は、実行できないので、ご注意を...

⑤ 関数は自身も参照できます

完全に階乗忘れてしまっていたので、

少し階乗のお勉強をしました(階乗の意味と値の一覧。なぜ0の階乗は1になる？)

要点

• 
  階段のように1つずつ乗数（かける数）が減っていくのが特徴
• ◯!　こんな形してる

// factorial 階乗の、要因の意味 
 
function factorial(number) { 
  if((number == 0) || (number == 1)) 
    return 1 
  else 
    return (number * factorial(number - 1)) 
} 
 
console.log(factorial(1)) 
console.log(factorial(2)) 
console.log(factorial(3)) 
console.log(factorial(4)) 
console.log(factorial(5)) 
 
// 1 
// 2 
// 6 
// 24 
// 120 

⑥ アロー関数

【アロー関数・スプレッド構文・Promise】ES2015の書き方

無名関数の定義に便利

let greeting = (yourName) => { 
  console.log('Hi' + yourName) 
} 
 
greeting('Ryu') 
// HiRyu 

⑦ アロー関数 return文の省略

【JavaScript入門】returnの使い方と戻り値・falseのまとめ！

JavaScriptはreturn文を書かなければ、値が返ってきません

しかし、アロー関数では、中身がreturn文だけの場合、{}を省略して記述することができます(値が返ってくる)

式はそのまま値になり、文はreturn文で値を返す

let greeting1 = (yourName) => 'Hi' + yourName 
 
console.log(greeting1('Ryu')) 
// HiRyu 
 
let greeting2 = () => 'Hi' 
 
console.log(greeting2()) 
// Hi 
 
let number = () => 1 
 
console.log(number()) 
// 1 

⑧ アロー関数 引数が一つの場合

引数がない場合は、()を省略できます

let greeting = yourName => 'Hi' + yourName 
 
console.log(greeting('Ryu')) 
// HiRyu 

⑨ アロー関数 引数がない場合

引数がなくても()はつけましょう

let greeting = () => 'Hi' 
 
console.log(greeting()) 
// Hi 

補足

メソッドを呼ぶ際に()をつけ忘れたら、見たことのない値が返ってきた

let greeting = () => 'Hi' 
 
console.log(greeting) 
// () => 'Hi' 

JavaScriptの「型」の判定について

型を調べてみると、

let toString = Object.prototype.toString 
let greeting = () => 'Hi' 
 
console.log(typeof(greeting)) 
console.log(toString.call(greeting)) 
 
// function 
// [object Function] 

function(関数)なんですね

呼び出し

greeting() 

変数(の中身)

greeting 

今更ながら、勉強になります

最後に

アロー関数を使うメリットは、今のところ

• 宣言時のthisを束縛して、固定できる

var self = this 
// コレいらない 
...forEach(function() { 
}) 

• ちょっとかっこいい

くらいしか分かりませんが、ちょこちょこ学んでいきます

次は、Promiseを調べます