JavaScript: 配列の要素を一つずつ返したい

Question

配列の要素を一つずつ返したいのですが、

Uncaught RangeError: Maximum call stack size exceeded

というエラーが出てしまいます。調べた限りだと関数内で別の関数を再帰的に呼び出すようにしていることからスタックが溢れてしまい出ているエラーだということがわかりました。

var getData = function(){
    var buff = ['aaaa', 'bbbbb', null];
    for (var i = 0; i < buff.length; i++){
         return buff[i];
    };
　　buff.shift();
};
var setData = function(){
    var buff = getData();
    if (buff != null){
        console.log(buff);
        setData();
    } else {
         console.log(buff);
};
setData();

array.shift()メソッドで先頭要素を削除すれば良いのかと思い、上記コードではそのようにしていますが、同じエラーが出てしまいました。
どのように修正すればうまく要素を一つずつ返すことができるのでしょうか？
ご教示いただけますと幸いです。よろしくお願いいたします。

Comments

[Masakin]

このコードだと'aaaa'を出力して無限ループするかと思うのですが、
理想の出力結果の追記をお願いします。

[Ykkykk]

aaa
bbbbb
null
のように配列の要素をsetData内で一つずつ取得し、nullが来たらsetDataを抜けるというような動きをしたいです。

[BluOxy]

setDataを用意する必要はあるのでしょうか。

Answer 1

原因

getDataは常にbuff[0]しか返さないので、setDataの関数内の条件buff != nullは常に真と評価されます。
常に真だと、常に再帰的にsetDataを呼び出すことになるので、該当のエラーが発生します。

また、setDataというものの、内部ではbuffの要素を取得してconsole.logで出力するという、setではない処理が記述されているので、混乱の元になります。

解決策

aaa

bbbbb
null
のように配列の要素をsetData内で一つずつ取得し、nullが来たらsetDataを抜けるというような動きをしたいです。

単純に1つずつ返したいならsetDataやgetDataという関数を用意するのではなく、

const array = ['aaaa', 'bbbbb', null];
for(const element of array){
    console.log(element);
    if(element === null){
        break;
    }
}

で良いように思いますが、いかがでしょうか。
実装はなるべく必要最小限に、かつシンプルさを保たないと混乱の元になります。

Comments

[Ykkykk]

ご回答いただきありがとうございます。
私もそのように一つの関数でやり直してみたところ正常に返すことができました。
本当にありがとうございます！

Answer 2

array.shift()メソッドで先頭要素を削除すれば良いのかと思い、上記コードではそのようにしていますが、同じエラーが出てしまいました。

var buff = ['aaaa', 'bbbbb', null];は、getDataを実行するたびに初期化されます。なので、shiftしても、次にgetDataを呼び出したときにはもとに戻っています。

どのように修正すればうまく要素を一つずつ返すことができるのでしょうか？

buffをgetDataの外側で定義するのが手っ取り早いかと思います。

Comments

[Ykkykk]

ご回答いただきありがとうございます。
var buff = ['aaaa', 'bbbbb', null];
var getData = function(){
for (var i = 0; i < buff.length; i++){
return buff[i];
};
　　buff.shift();
};
var setData = function(){
var buff = getData();
if (buff != null){
console.log(buff);
setData();
} else {
console.log(buff);
};
setData();
上記のように変更したのですが、同様のエラーが出てしまいました。。
何が問題なのでしょうか。。。

Answer 3

まず、インデントに全角スペースを使っている箇所があります。やめてください。
次にsetDataがきちんと閉じられていません。閉じてください。
その上で、実行すると無限ループしています。

Comments

[yambejp]

全体的に何をやりたいかわかりません、仕様をはっきりさせてください