JavaScript 再帰関数のサンプル

JavaScriptの再帰関数のサンプルです。

確認環境
・Google Chrome

サンプル	再帰関数
	再帰関数の注意点

再帰関数

再帰関数は、自身の関数を呼び出します。
ループを抜ける条件を満たすことよって処理を終了します。
条件を間違えると無限ループになってしまうので注意が必要です。
以下は、MDNの再帰関数のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions#Recursion

再帰関数のサンプルです。

<script>
  function test1(a) {
    "use strict";
    if (a < 1) {
      return;
    } else {
      console.log(a);
      a = a - 1;
      return test1(a);
    }
  }
  
  test1(3); // 3 2 1
</script>

13行目は、2行目の関数を呼んでいます。
4行目のif文は、ループを抜ける条件です。
9行目は、自身の関数を呼び出しています。2行目に戻ります。
結果は、3,2,1が表示されます。

再帰関数の注意点

再帰の回数が多くなるとエラー(スタックオーバーフロー)が発生します。
以下は、上記コードの14行目の引数を2万としたときのエラーです。
(Uncaught RangeError: Maximum call stack size exceeded)

引数の値を1万とした場合はエラーになりませんでした。

末尾再帰(Tail Call)とブラウザの対応状況

末尾再帰(Tail Call)という機能に対応した環境であれば、コードを末尾再帰にすることでエラーは発生しなくなります。
ただし、Google ChromeやFirefoxやIEなどのブラウザは対応していないので注意が必要です(2018/9時点)。

末尾再帰(Tail Call)

末尾再帰とは、末尾で再帰(呼び出し)だけを行うことです。
上記コードは、return test1(a)のみなので末尾再帰です。
これがreturn test1(a) + 変数などの場合、関数を呼び出した後に変数を足す処理があるので末尾再帰ではなくなります。

以下は、wikiの末尾再帰のリンクです。
https://ja.wikipedia.org/wiki/%E6%9C%AB%E5%B0%BE%E5%86%8D%E5%B8%B0