JavaScript_関数

関数

関数宣言

JavaScriptの関数は「function」宣言により定義されます。

引数および戻り値に型は指定できませんので、扱いに注意が必要です。


function add(a, b) {
  return a + b;
}

関数式

関数を変数に代入する。

JavaScriptの関数はファーストクラスのオブジェクトなので、変数に代入することができます。


function add(a, b) {
  return a + b;
}
var calc = add;
var sum = calc(1,2);

無名関数

定義した関数を変数に代入しつつ、関数名を省略する記述になります。


var calc = function (a, b) {
  return a + b;
}
var sum = calc(1,2);

アロー関数

ECMAScript2015からは無名関数をさらに省略宣言できるアロー関数式がサポートされるようになりました。

アロー関数では、関数の先頭にfunctionと書く代わりに、引数宣言の後ろに「=>」を記述します。


var calc = (a, b) => {
  return a + b;
}
var sum = calc(1,2);

関数型の引数と戻り値

関数を引数に指定する。

関数は変数に代入できるだけでなく、引数に指定することもできます。


// 引数に指定された関数を実行する関数
function callFunction(funcName) {
    return funcName();
}

// 呼ばれる関数
function funcA() {
    return "funcA!";
}

var str = callFunction(funcA);
console.log(str); // "funcA!"

戻り値に関数を指定する。

関数は戻り値としても指定することもできます。

戻り値の関数を実行するには「functionName()();」と指定します。


// 呼ばれる関数
function funcA() {
    return "funcA!";
}

// 戻り値に関数を返す関数
function callerFunction() {
    return funcA;
}

var str = callerFunction()();
console.log(str); // "funcA!"

即時関数

関数定義と関数呼び出しをセットにすることで、即時実行される関数が定義できます。

記述の変遷は以下の通りです。

１．通常の関数定義と実行の仕方


// 関数定義
function immediateExec(){
  console.log('Immediate execution!');
}
// 関数実行
immediateExec();

２．関数定義と呼び出しをセットにする。

定義と同時に実行されます。


(function immediateExec(){
  console.log('Immediate execution!');
})();

３．無名関数にする。

結局、上記は一度しか利用できない関数なので無名関数にします。


(function (){
  console.log('Immediate execution!');
})();

４．アロー関数にする。

アロー関数化すれば、ワンライナーとなります。


(() => {console.log('Immediate execution!');})();

変遷がわからなければ理解しにくいコードだといえます。

このように関数を定義した目的は以下の２つに集約されます。

一度だけ実行される関数を整理してコードのメンテナンス性を向上する。
関数のスコープを局所化して、グローバルオブジェクトの汚染を防ぐ。

内部関数（クロージャ）

内部関数の定義

JavaScriptでは、関数内に関数を定義できます。

関数のスコープを局所化する場合に利用できます。


function outsideFunc() {
  function insideFunc(num) {
    return num * 3;
  }
  return insideFunc(2);
}

var sum = outsideFunc();

変数の共有

内部関数から外側関数の変数を利用することができます。

クロージャ定義における「自分を囲むスコープにある変数を参照できる関数」に該当します。


function outsideFunc() {
  num = 2;
  function insideFunc() {
    return num * 3;
  }
  return insideFunc();
}

var sum = outsideFunc();

備考となりますが、JavaScriptにおいて即時関数としてワンライナー化するのは、このようなケースです。


function outsideFunc(num) {
  return (() => {return num * 3;})();
}

var sum = outsideFunc(2);