JavaScriptの関数定義

JavaScriptの関数の定義にはいくつか書き方があります。

1. function文を使う方法(関数宣言)
2. function演算子を使う方法(関数式)
3. Functionコンストラクタを使う方法
4. ECMAScript(EC2015)を反映させた定義(番外)

関数とは

いくつかの処理(機能)をひとまとめに定義し、何度も使いまわせるかたちにしたものです。

わかりやすく携帯の機能を関数に見立ててみると
「メール」という名前の関数にはメール作成機能一式
「通話」という名前の関数には通信機能一式
これらの機能(関数)は「アドレス帳」からも呼び出すことができますよね。
※あくまでもわかりやすい例えとして見立てているので実際の関数の概念とは異なります。

'function'は日本語訳で「関数」という意味合いなので、「この{}で囲われているものはこの名前の関数ですよ」と宣言するわけです。

関数宣言

一番よく使われている構文です。 関数定義用に用意された構文となっており、他の構文と違い文末にセミコロン(;)をつけない記述方法です。

  
    function 関数名() {
      処理
    }
  

関数を実行するには下記のように関数宣言と関数の呼び出しをセットとすることで実行できます。(関数の中で別の関数を呼び出すこともできます。)
例を実行するとコンソール上に’localVar’の文章が表示されます。

この関数の呼び出しは１度だけではなく、何度もいろんなところから呼び出すことが出来ます。また、関数宣言の前で呼び出しても問題なく関数内の処理が実行されます。(巻き上げ)

  
    EPRESS()  // 関数の呼び出し(巻き上げ)
    
    function EPRESS() {
      var variable = 'localVar';  // 変数の定義
      console.log(variable)  // 変数の呼び出し
    }

    function epress() {
      EPRESS();  // 関数の呼び出し
    }
  

また、一度だけその関数を使いたい場合は下記のように省略して記述することも可能です。(即時関数)

  
    (function() {
      var variable = 'localVar';
      console.log(variable)
    })();
  

関数式

function演算子を用いた式を関数式と呼びます。関数リテラルと呼ばれることもあります。 変数の中に関数を代入 関数式での関数定義では、演算子式の実行時に関数が生成されるため、定義前に関数を呼び出すことはできません。 また、変数に代入しているものになるので関数を代入した変数には再代入することもできます。

関数名を定義しないことが多い為『無名関数(匿名関数)』と言われています。

  
    var 変数名 = function(引数) {
      　処理
    };
  

関数式にも関数名を定義することもできます。 その場合は定義した関数内でのみ再帰することができ、グローバル(関数の外)では存在しません(エラーが返ってきます)

  
    var epress = function EPREES(x) {
      x--;
      if(x<0) {return;}
      EPREES(x)  // 再帰（関数名EPREESを使用できる）
    };
    epress(a); // 出力あり
    EPREES(b); // エラー：EPREES is not defined
  

関数コンストラクタ

Functionコントラクタの引数に関数(最後の記述が実行処理、他は関数本体に渡すべき引数)を記述します。 他の定義方法に比べてパフォーマンスが低く、見づらい為避けるべきとされる定義方法です。 関数の定義は関数宣言か関数式にて定義してください。

  
    var 変数名 = new Function('引数a', '引数2', '処理');
    console.log(変数名(引数a,引数b));
  

アロー関数(ECMAScript)

ECMAScript(エクマスクリプト)とは標準化されたJavaScriptのバージョンのことを指します。 EC2015ではアロー関数という関数定義が追加されました。 関数式(無名関数)を省略した形の関数となり、引数が１つのときは()を省略できたり中身が単一式のときは{}やretunまで省略して記述できます。

  
    // 従来のJavaScript
    var plus = function(x, y) {
      return x + y;
    };
    
    // ES2015からの仕様
    let plus = (x, y) => x + y;