js forEachの中でforEachを呼ぶ時の処理がわからない

Question

    var baseData = {
      'huga1': "0",
      'huga2': "0"
    }

    var data = [];

    for (var i = 0; i <= 2; i++) {
      var hogeName = "hoge" + String(i);
      data.push({
        [hogeName]: baseData
      });
    }



    var num = 10;

    data.forEach(function(dataKey) {
      Object.keys(dataKey).forEach(function(key) {
        Object.keys(dataKey[key]).forEach(function(hoge) {

          var val = this[hoge];
          console.log(hoge, val);

          if(num>8){
            num=num-1;
            dataKey[key][hoge] = num;
          }

        }, dataKey[key]);
      }, dataKey);
    })

    console.dir(data);

console.dir(data);の結果は
0:{hoge0:{huga1:9,huga2:8}
1:{hoge2:{huga1:9,huga2:8}
2:{hoge3:{huga1:9,huga2:8}
でした。

私が期待していた結果は、
0:{hoge0:{huga1:9,huga2:8}
1:{hoge2:{huga1:0,huga2:0}
2:{hoge3:{huga1:0,huga2:0}
です。
期待通りにならなかった理由は何でしょうか。
また期待結果通りにするにはどのように書いたら良いでしょうか？

Answer 1

配列の各要素に同じオブジェクトが代入されているので、1つ書き換えれば全部書き変わります。意図した挙動にするには、オブジェクト自体を別個のものにする必要があります。

// その1 その場で別なオブジェクトを生成する
    for (var i = 0; i <= 2; i++) {
      var hogeName = "hoge" + String(i);
      data.push({
        [hogeName]: {
          'huga1': "0",
          'huga2': "0"
        }
      });
    }

// その2 コピーする（Object spreadが使える場合）
    for (var i = 0; i <= 2; i++) {
      var hogeName = "hoge" + String(i);
      data.push({
        // Object.assign({}, baseData) という方法もある
        [hogeName]: {...baseData}
      });
    }

Comments

[L85A2]

見落としていました。
言われてみればそうですね。
=を使用していたので、同じオブジェクト参照してますね
回答ありがとうございました。