値がundefinedになってしまう

Question

すみません、教えてください。

以下の配列操作でfilterメソッドを利用すると値がundefinedとなり処理されません。
エラーとならず値を代入したいのですがどのように解決すればよいでしょうか？

問題のサンプルコード:Stackblitz

  // 値A
  siteList = [
    {
      key: "aaa",
      value: "Aです",
      sort: 1
    }
  ];
  // 値B
  colorList = [
    {
      key: "aaa",
      color: {
        a: "#111111",
        b: "#222222",
        c: "#333333"
      }
    }
  ];

エラーになる処理

    this.siteList.map(function(item) {
      this.colorList.filter(obj => {
        if (obj.key === item.key) {
          item["color"] = obj.color;
        }
      });
    });
    console.log(this.siteList);

エラー出力内容

Error: Cannot read property 'colorList' of undefined

自分で試したのはcolorListの中身を直接書いてやるとうまくいきます。

    this.siteList.map(function(item) {
      [
        {
          key: "aaa",
          color: {
            a: "#111111",
            b: "#222222",
            c: "#333333"
          }
        }
      ].filter(obj => {
        if (obj.key === item.key) {
          item["color"] = obj.color;
        }
      });
    });
    console.log(this.siteList);

しかし、どうにか値として渡してあげたいんですがうまく渡せず、、、。
どなたかご教示頂ければ幸いです。

Answer 1

Javascriptの関数mapを使用していますね。
参考：Array.map()の仕様

map関数内のthisの値をコンソール出力したところ、undefinedとなったので、
map()のcallback関数の引数にthisArgとしてthisを渡したら実行できました。

this.siteList.map(function(item) {
      console.log(this.colorList);
    },this);

Answer 2

Scopeの問題で一度関数内で別の変数に値を渡すことで自己解決しました。