JavaScriptの関数宣言

#関数

##通常の関数
ごく普通の関数の定義と呼び出し
宣言場所が、呼び出しの後でも機能する（巻き上げが起こる）

//構文
function 関数名(){
  //処理
}

//例
function AAA(aaa){
  console.log(`引数は${aaa}`)
}

AAA('引数');//関数呼び出し

##無名関数　（関数式）
関数名が無い関数
他の関数の引数に指定したり、変数に格納して使用することができる
宣言場所が、呼び出しの前でなければ機能しない（巻き上げが起こらない）

//構文
const 変数名 = function(引数){
  //処理
}

//例
const sum = function(a,b,c){
  return a + b + c;
}

const total = sum(1,2,3);//関数呼び出し

##アロー関数
無名関数の　function　を　=>　で表現したもの
IEでは使用できない

//構文
引数=>処理

const 変数名 = (引数)=>{
  //処理
}

//例
const sum = (a,b,c)=>{
  return a + b + c;
}

const total = sum(1,2,3);//関数呼び出し

//関数の中身が１行のみ（return　◯○）の場合{}を省略して１行で書ける
const sum = (a,b,c) => a+ b + c;

//さらに、引数が一つの場合、()も省略できる
const sum = a => a + 2;

//ただし引数がない場合は（）を省略できない
const sum = () => { 処理 };

##即時関数
関数宣言と同時に実行する

//構文
(function (仮引数) {
  //処理
})(引数);

//例
(function (name) {
  console.log(`こんにちは、${name}`);
})('まい');

//こんな使い方もあり
//ユーザーエージェントでデバイスの判定
const device = (function() {
  if (navigator.userAgent.match(/iPhone|Android.+Mobile/){
    return 'mobile';
  } else {
    return 'pc';
  }
})();

アロー関数は慣れないと暗号にしか見えませんが、(引数)=>{処理}となっているので
この引数でこの処理してね〜と言っているように見えなくもない。。。かもしれません。