再帰処理で、オブジェクトの特定キーを複数文字列にするとエラーになるのですが、なぜでしょうか？

Question

エラーにならない

var tree = {
     piyo : {val : "1", oya : ""},
     z : {val : "2", oya : "piyo"},
     b : {val : "3", oya : "z"},
     c : {val : "4", oya : "b"}
};

hoge(tree, Object.keys(tree)[0]);

function hoge (obj, node) {
  var str = obj[node].val;
  var ko = [];
  for (var i in obj) {
      if (obj[i].oya == node)
        ko += i;
  }
  if (ko.length > 0) {
      for (var i in ko) {
        str += hoge(obj, ko[i]);
      }
  }
  return str;
}

---

zをzxへ変更すると、'val' of undefinedエラーになります

var tree = {
     piyo : {val : "1", oya : ""},
     zx : {val : "2", oya : "piyo"},
     b : {val : "3", oya : "zx"},

Answer 1

どうも、koを文字列にしてしまっているようです。きちんと配列としてハンドリングすればうまく行きそうです。

//      ko += i;
        ko.push(i);

Comments

[re97]

・回答ありがとうございました

Answer 2

まず、前提として、for inはオブジェクトを走査するためのステートメントになります。
for hoge in hogesの場合にhogeに代入されるのは、hogesの各キー名となります。
この時、hogesが文字列だった場合は、その文字列のインデックス番号がhogeに代入されることになります。
abcという文字列なら、0, 1, 2という順に代入されます。

では、なぜzをzxにしたらエラーが出るのかの説明をさせていただきます。

var ko = [];
上記の宣言で変数koを配列にしていますが、
続くループ内では、変数ko（配列）への要素の追加ではなく、
文字列の代入になっています。
そのため、変数ko（配列）が変数ko（文字列）になってしまっています。

その結果、続く処理が下記の形になっています。

if (ko.length > 0)
上記は、変数koには1文字以上の文字列が代入されていますので、
tureとなりifブロック内が実行されます。

for (var i in ko)
上記は、配列のループではなく、変数ko（文字列）に対してループを行うため、
変数iに代入されるのは、文字列のインデックス番号になります。
なので、zxの場合は、0、1と代入されていきます。

str += hoge(obj, ko[i]);
上記でko[i]で取得できるのは、zxという文字列ではなく、
zxという文字列のインデックス番号0番目の文字のzのみとなります。

その状態で再度hoge関数が実行され、最初の処理である下記は
obj[node].val;

期待している、obj['zx'].valではなく、
obj['z'].valとなり、objには存在しないため、
エラーとなります。

修正することとしては、maisumakunさんの記載された通り
ko += i;ではなく、ko.push(i);にすれば問題なく動きます。

Comments

[re97]

・回答ありがとうございました
・説明大変分かりやすかったです
・参考になりました