JavaScript 再帰関数のサンプル

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

確認環境
・Windows10
・Google Chrome

目次

再帰関数

コード

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

<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>

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

 

再帰関数の注意点

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

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

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

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

以下は、ECMAScript 2015(ES6)とブラウザの対応状況の表のリンクです。
https://kangax.github.io/compat-table/es6/
1行目のproper tail calls (tail call optimisation)が該当します。

末尾再帰(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

関連の記事

JavaScript 関数のサンプル
JavaScript 無名関数(アロー関数式)と即時関数のサンプル
JavaScript クロージャのサンプル
JavaScript 引数/戻り値が関数のサンプル(高階関数)
JavaScript 関数のデフォルト引数のサンプル

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る