配列にpushした要素にアクセスできない

Question

以下のように、Jqueryで各id名称を取得して配列に格納しようと思っております。
each()とattr()を組み合わせて取得することができたのですが、
console.log(idAry);の結果は、以下の通り不思議な形で出力されています。
[0:"hoge",1:"fuga"]

通常通りの出力を期待するのであれば、添字なしで以下の通りです。
["hoge","fuga"]

また、想定しない形での配列となってるせいかconsole.log(idAry[0]);の結果も
undefinedとアクセスすることができません。

jqueryオブジェクトの使用によるものなのか、検討しているのですが
onsole.log(typeof($(this).attr('id')));//stringなので
それぞで文字列をpushしているので期待通りの配列ができると思ったのですが
上記の期待した配列を得ることができませんでした。

原因と期待する配列を取得すると言う意味での解決方法についてアドバイスを願えますでしょうか。

<div id="hoge" class="bar"></div>
<div id="fuga" class="bar"></div>

var idAry=[];

$(function(){
    $('.bar').each(function(){
      console.log(typeof($(this).attr('id')));//string
      idAry.push($(this).attr('id'));
    })
})

console.log(idAry);//[0:"hoge",1:"fuga"]
console.log(idAry[0]);//undefined

追記コード（詳細は下記の通りです）

<div id="hoge" class="bar"></div><!--処理する要素-->
<div id="fuga" class="bar"></div><!--処理する要素-->
<div class="bar"></div>

<script>
var idAry=[];

$(function(){
    $('.bar').each(function(){
      console.log(typeof($(this).attr('id')));//string
      idAry.push($(this).attr('id'));
    })
})

var idAryLen=idAry.length;

for (var i = 0; i < idAryLen; i++) {//期待される配列は['hoge','fuga']
  idAddtext(idAry[i]);
}

function idAdtext(getId){//配列のすべての要素にidAdtextを適用する
 $(function(){
   $('#'+getId).on('click',function(){
      $(this).text('something');
   })
 })
}

</script>

Answer 1

純粋にArrayを扱いたい場合、JavaScriptリテラルで配列を書くほうが素直に利用できます。
とはいえ、jQueryと併用しても何ら問題はありません。

Array.isArray() で false になるとやりづらいなら、
各関数内ではpure JavaScript も織り交ぜながら処理しちゃえばいいですよ。

ちなみに、グローバルスコープのjQuery オブジェクトに jQuery._myCache = {} のような自前の pure javascript データを保持するプロパティを持たせることで関数間でやり取りできます。

原因としてお察しの通り、jQuery はあらゆるものを包括しようとする実装なのです。
長期間使いたいライブラリについて、１度はコードリーディングをおすすめします。

Comments

[SugiuraY]

ご回答をいただきありがとうございます。「原因としてお察しの通・・」の点については
ご指摘の通りjqueryのライブラリは利用するものの深い理解がなかったため、この機会にその仕組み構造に触れてみようと思います。
$(function(){})は$(document).ready()と同義であると学んだことがあり、これはドキュメントの読み込みを前提にしているなら、kei344様のご指摘にある、処理の順番の問題のような感覚はあるのですが、これも学んでみようと思います。

ご指摘いただいた点で純粋に2点、咀嚼することができなかったのですが
●JavaScriptリテラルを素直に利用・・・
ループの中ではnew Array(/*here*/)の中に列挙することができないと考えたのですが、仰る意図とは相違しますでしょうか？

●Array.isArray()で false になるとやりづらい・・・
$(function(){})の外でconsole.log(Array.isArray(idAry));を出力するとtrueではありますが、本件においてはどのような視点でいただいたアドバイスなのでしょうか。

私の能力が至らないため、折角いただいたアドバイスについて、すぐになるほどと理解できずに本当に申し訳ございませんが、よろしくお願いいたします。

[AkitoshiManabe]

乱暴ですが、「リテラル」はコードの書き方だと思ってください（["1","2","3"] は new Array()しなくても使えるなど）。Array.isArray() は標準関数です。格納されてるはずなのに…と困惑されている様子をコードで示してしまいました。疑問に感じた言葉はググってみると、黎明期に苦労されていた技術者のブログにたどり着いたりしますよ。

[SugiuraY]

コメントを頂きありがとうございます。
一つずつまたゆっくり調べてみようと思います。
早朝から感謝を申し上げます。

Answer 2

$(function(){
    $('.bar').each(function(){
      console.log(typeof($(this).attr('id')));//string
      idAry.push($(this).attr('id'));
    })
console.log(idAry);
console.log(idAry[0]);//ここに移す。
})

Comments

[SugiuraY]

ご回答いただきありがとうございます。
$(function(){})の外側で配列を使用したいのですが、それは不可能なのでしょうか？
その目的で、var idAryを宣言したつもりなのですが、そういうことではないということでしょうか？
重ねて申し訳ございません。

[kei344]

順番の問題です。$(function(){})はドキュメントの読み込みを待って動くので、そこに書いても動く前に処理されます。
どういうことをしたいかを明確にされたほうが、解決しやすいと思います。

[SugiuraY]

承知をいたしました。
1) 必要なidをすべて取得する
2) そのid要素に対してそれぞれ処理をする
ことが目的です。
本文に詳細コードを追記しまます。

[kei344]

それが $(function(){}) の中に入れられない理由も追記しておいてください。

[SugiuraY]

私がまだJavascriptに開発に慣れていないからかもしれませんが

$(function(){
$('.bar').each(function(){
　idAddtext($(this).attr('id')));
})
})
と言う形で、ループの中で自己定義関数を使用するのは後々、可読性が低くメンテナンスしづらいと感じたため、一旦取得したidを配列に格納すると言うステップをふみ、そのidに対する自己定義関数の処理をきりわけたかったというのがその理由となります。

[kei344]

「$(function(){}) 」も必要だから使うだけですよ。jQueryを使っても使わなくてもDOMのロードを待つ処理はありますし、必要です。処理される順序を再確認してみてください。

> ステップ
ステップを踏むなら踏んだ後で次の一歩を出しますよね、それだけのことです。

// 処理の書かれている位置的にこれなら値が取れているのでは。
$(function(){
var idAryLen=idAry.length;
for (var i = 0; i < idAryLen; i++) {
idAddtext(idAry[i]);
}
})

[SugiuraY]

コメントありがとうございます。
仰る通り、処理の順序をそれぞれ確認しました。
すべて$(function(){})に包含した場合、中の処理がロード後（時）に上から順番に処理されました。

また、jqueryを書くときの錯覚で$(function(){から記載を始めなくてはならないようなものであると勘違いをしておりました。
当初$(document).ready()と等価であると書籍で学び意味がわからずに、Jqueryの定型文であると思っていたのですが、処理の順番をきにすることで一つ実感をもって学ぶことができました。
御礼申し上げます。