clearInterval()の挙動ってどうなってるのですか？

Question

JavaScriptで、文字列を一秒毎に一文字ずつコンソール画面に表示するプログラムを書いてみたのですが、わからないことがあるので教えてください。

最初に下のように書きました。

var str   = 'ABCDEFG';     //表示する文字列
var alpha = str.split(''); //配列に変換

var timer = setInterval(function() {
	console.log(alpha[0]); //表示する
	alpha.shift();         //配列の先頭を消す
}, 1000);

if (alpha.length === 0) clearInterval(timer); //配列が空になったら止まる(はずだった)

これでAから一秒ずつコンソールに表示されるのですが、Gまで表示しても(alpha.lengthが0になっても)止まらず、そのままundefinedがずっとコンソールに表示されました。そこでclearIntervalの位置を変えてみました。

var str   = 'ABCDEFG';
var alpha = str.split('');

var timer = setInterval(function() {
	if (alpha.length === 0) clearInterval(timer);
	console.log(alpha[0]);
	alpha.shift();
}, 1000);

これだとGの後に一回undefinedが表示されて止まりました。Gが表示されると同時に止めたいのでclearIntervalの位置を再度変えてみました。

var str   = 'ABCDEFG';
var alpha = str.split('');

var timer = setInterval(function() {
	console.log(alpha[0]);
	alpha.shift();
	if (alpha.length === 0) clearInterval(timer);
}, 1000);

こうするとGが表示されると止まりました。

そこで2つほど質問なのですが、

1. 最初のコードでタイマーが止まらないのはなぜなんでしょうか？
2. 2番目のコードで最後にundefinedが一回表示されるのはなぜでしょうか？

どちらか一方でも良いので、教えてくださると嬉しいです。よろしくお願いいたします。

Answer 1

1. 最初のコードでタイマーが止まらないのはなぜなんでしょうか？

下記の処理が最初の読み込み時に1回しか呼ばれないからです。

if (alpha.length === 0) clearInterval(timer); 

setIntervalは一定時間ごとに与えられた関数を呼び出すものですが、
上記のタイマーを止める処理は関数の外にありますよね。

1. 2番目のコードで最後にundefinedが一回表示されるのはなぜでしょうか？

setInterval(function() {
    if (alpha.length === 0) clearInterval(timer);
    console.log(alpha[0]);
    alpha.shift();
}, 1000);

確かにif (alpha.length === 0) clearInterval(timer);でタイマー自体は止まりますが、
関数内でreturnしていないので、その後の処理は続行されます。
console.log(alpha[0]);でalpha[0]がないのでundefinedになります。

Comments

[naonao]

>最初の読み込み時に1回しか呼ばれないからです。
>関数内でreturnしていないので、その後の処理は続行されます。
納得できました。基本的なことが抜けてたようで恥ずかしい限りです(汗)
回答ありがとうございました。

Answer 2

１について、処理の流れを追っていくと
（１）setIntervalに匿名関数（配列alphaの最初の文字をコンソールへ出力し配列をシフト）を1000ミリ秒毎実行登録（まだalpha.lengthは"0"になっていない）
（２）alpha.lengthを評価 - false - 何もしない。
（３）終了
※setIntervalは生きていて、1000ミリ秒ごとに登録された匿名関数を実行し続ける。
つまり、setIntervalの直後に一回だけalpha.lengthを評価するがclearIntervalは一度も実行されない。

２について、
setIntervalで1000ミリ秒ごとに匿名関数（alpha.lengthを評価し、0の場合clearInterval、alphaの最初の文字をコンソールへ出力し配列をシフト）の処理を"G"がコンソールに表示される次のインターバルに焦点を当てて
（１）alpha.lengthを評価 - true - clearInterval
（２）alpha（すでに配列は空）の最初の文字（undefined）をコンソールへ出力
（３）配列をシフト
※インターバル毎に匿名関数を実行するので、上記（１）でclearIntervalしたとしても、一連の処理（２）（３）は実行されてしまう。

といったところでしょうか。

Comments

[naonao]

詳細に回答していただき、とても分かりやすかったです。理解できると、質問のタイトルが恥ずかしいです(汗)
回答ありがとうございました。