関数外で宣言し、関数内で要素をpushした配列が空の配列としてみなされる
現在indexedDBを利用したアプリケーションを作成中で、カーソルを利用して取得したオブジェクトを前もって宣言した配列に順次追加していくコードを以下のように書いたのですが、思ったように動いてくれません。
function myFunc(){
//中略
var columns = [];
index.openCursor(range).onsuccess = function (event) {
if(event.target.result == null) {
return;
}
var cursor = event.target.result;
columns.push(cursor.value);
cursor.continue();
};
return columns;
}
このcolumnsの値をコンソールに出力すると、初期状態では[]
という表示のみがあり、その括弧を選択すると
Array[0]
0:Object
1:Object
という表示になります。また、それぞれの要素には期待した通りの値が入っています。
しかし、この配列は扱い上空の配列となっているようで、columns.toString()
の返り値を先程のreturn columns;
の直前で出力すると空の文字列が返ってきてしまいます。
ちなみに同様にcolumns.toString()
の返り値をif(event.target.result == null) {}
の内部にて出力すると、出力は[object Object]
となりました。
自分なりに調べていくうちに、恐らく配列のスコープというものがこの問題に関連しているのではないかということだけはなんとなく理解出来てきたのですが、どうすればこれを回避できるかには思い当たりませんでした。
実際のアプリケーション上ではこのcolumnsをさらに加工して利用したいのですが、columns[0]
がundefined
となるためループを利用することも出来ず、columns.filter()
といった処理も期待通りに実行されません。
なぜこのような現象が起こってしまうのか、どのように改めれば回避が可能かなどご教示いただければ幸いです。