JavaScriptのユーザ定義関数

ユーザ定義関数を定義する方法

・function命令で定義する
・Functionコンストラクタ経由で定義する
・関数リテラル表現で定義する（無名関数）
・アロー関数
・即時関数

function命令で定義する

function kansu(引数) {
    内容
    return 戻り値;
}

Functionコンストラクタ経由で定義する

var triangle = new Function('base','height','return base * height / 2;');

document.writeln('三角形の面積：' + triangle(5,2));

関数リテラルで定義する（無名関数）

var triangle = function(base,height) {
    return base * height / 2;
}

document.writeln('三角形の面積：' + triangle(5,2));

関数リテラルで代入された変数を引数に

function dispplayNum(x, y, func) {
    document.writeln(func(x, y));
}

var calculateAverage = function(x, y) {
    return (x + y) / 2;
};

dispplayNum(9, 7, calculateAverage);

関数リテラルを直接引数に

function displayNum(x, y, func) {
    document.writeln(func(x, y));
}

displayNum( 8, 6, function(x, y){return (x + y) / 2;} );

アロー関数

「function」を省略して「=>」を使う


let calculateAverage = (x, y) => {
    return (x + y) / 2;
};

document.writeln(calculateAverage(12, 14));

関数の登録のタイミング

コード解析時に登録される（「巻き上げ」あり）
・function命令

実行時に評価される
・Functionコンストラクタ
・関数リテラル（無名関数）
・アロー関数


「巻き上げ」とは、関数の定義が呼び出しの後であっても動作すること


以下は正常

document.writeln('三角形の面積：' + triangle(5,2));

function triangle(base,height) {
 return base * height / 2;
}


以下はエラー

document.writeln('三角形の面積：' + triangle(5,2));

var triangle = function(base,height) {
  return base * height / 2;
}

return命令の注意点

return命令は途中で改行してはいけない

引数について

・引数はいくつあってもいい
・JavaScriptは、引数の数をチェックしない（関数定義と関数呼び出しとで、引数の数が違っていても問題ない）

引数のデフォルト値を設定する

例
function triangle(base,height) {
  if (base == undefined) {base = 1;]
  if (height == undefined) {height = 1;]
  return base * height / 2;
}

argumentsオブジェクト

関数呼び出しのタイミングで生成されて、呼び出し元から与えられた引数の値を保持する

例

function showMessage(value) {
  if (arguments.length != 1) {
    throw new Error('引数の数が間違っています');
  }
  document.writeln(value);
}

try {
  showMessage('あ','い');
} catch(e) {
  window.aler(e.message); //引数の数が間違っています
}

名前付き引数

引数を匿名オブジェクトで受け取らせる

例

function triangle(args) {
  if (args.base == undefined) {args.base = 1;}
  if (args.height == undefined) {args.height = 1;}
  return args.base * args.height / 2;
}

document.writeln( triangle({base:5,height:4}) );

即時関数

(function () {
    // 処理
}());

メリット
・スコープの汚染を防げる