y toku ブログ

inclusion を目指す

JavaScript 超初心者向け -- オブジェクトのループ --

この記事では JavaScript 超初心者がひとつ一つの使い方を習得するために小分け Tips を書いています。MDN などの公式サイトでももちろん勉強できます。この記事では、超初心者の自分がエラーなどが出た時にどのように乗り越えているかも書きつづり、壁を一つひとつ乗り越えている方法を書いてみたいと思います。

このブログでは、エラーや思うようなデータが出ない時に、どのように修正していったかも書いてみたいと思います。初心者としては、期待しない結果が出た時、どこが間違っているのかがわからないことが最もストレスで勉強がはかどらない、と思います。あえてそこも書いてみたいと思います。誰かのお役に立てばとともに、自分の勉強を振り返るためにこの記事を残しておきたいなと思います。

JavaScript で オブジェクト内をループする方法

そもそも、オブジェクト内をループする方法がイメージできないという素朴な疑問がわきつつも、それはさておき、多くの基本ドキュメントでオブジェクトのループ処理があります。 これはイケてる書き方、モダンもっと良い書き方がある、というのはありますが初期の勉強中にあたるのがオブジェクトのループだと思います。今日はその最も基本とされている書き方と、躓きそうになった部分を書いてみたいと思います。

主に、こちらのサイトを参考にしています。

javascript.info

for (key in object) {
       // 処理を書く
}

この記述方法は完璧に暗記します。

サンプル

一階層の場合

サンプルオブジェクトと関数をとりあえず作ってみます。

var obj = {
    a:2,
    b:1,
    c:3,
    d:2,
    e:11,
    f:2,
    g:1,
    h:3,
    j:5
}; 

// ある特定の値を持つ key を配列として抽出する関数

function findNumber (n) {
    var arrNum = []; // ここに条件に合致する key を格納していきます。
    for (var key in obj) {
        if (obj[key] === n) {
            arrNum.push(key);
        }   
    };
    return arrNum;
}

// 値が 2 の key だけ抽出してみます

findNumber(2);

f:id:yasuhikotoku:20190902220622p:plain (画像内では、console.logの関数をテスト的に書いてしまっているので、現れている...)

これでできました。体にしみこませるために値が n 以上の関数を作ってみたり、偶数だけを配列として抽出するというのもやってみたりして理解できました。

複数階層の場合

JavaScript のオブジェクト内ループのテストをしている時にひとつ疑問が出ました、オブジェクトって複数階層（ネストされているオブジェクト）があるけど、この場合どうやって検索するんだろうか？

これもまた必死にググった結果、複数階層があるというのを ネスト されたオブジェクトということに気づき、それでまたググると、再帰関数（関数がその関数自身を利用する関数）を使わないといけないということが書いてあるので、今の段階では割愛します。

（再帰、リカージョン、recursion の記事を書き次第、こちらでupdateします）

期待しない結果が起きた時の対処方法

私がこのループを勉強している時に出たエラーを恥ずかしながら紹介したいと思います。

オブジェクト名を object として指定しまい空白で帰り、期待していない答えだった

MDNやjavascript.infoのサイトでも、下記のような構文が書いてあります。

for (key in object) {
       // 処理を書く
}

object をそのままコピペで書いてしまったために空白として値が返ってきました。お恥ずかしいけど、コンピュータは無機質に無感情で回答を返してくれる部分がとても好きです。

f:id:yasuhikotoku:20190902152236p:plain

関数内でオブジェクト名を object としてしまっています。本来はループ対象の Object 名 の obj を指定すべきでした。

[key] として指定するところをドット記法で書いてしまうミス

これはループとはまったく関係ないことに起因する事象です。 f:id:yasuhikotoku:20190902152625p:plain

if 文内で obj.key としてしまいました。これはオブジェクト要素へのアクセス方法が2つあることに起因しています。

  • obj.key とすると key というキーを検索しています。
  • obj[key] は、key という変数 (variable) で検索しています。今回は、key という変数で書いているので、if ( obj[key] === n) { hogehoge } と書く必要がありました。

[補足] for (key in object) {} の key を別名にしても動く

上記で書いた丸暗記式の key 部分が変数である、と気づいたとき、key ではない変数もできるはずだと思い、別の名前で試してみましたところ動きました。 f:id:yasuhikotoku:20190902153348p:plain

こんな感じで、超初心者向けの JavaScript におけるオブジェクトのループに関して理解を深めていきました。