今日の参考コード

さて今回も filter です。

がんばろう〜

filter() に渡す引数は 関数

前回、filter() の紹介をしましたが、この関数の引数には さらに関数 を渡します。

関数 に 関数 を渡す。これは新しい要素です。

直接アロー関数を書いて渡す方法と、あらかじめ関数を定義しておいて渡す方法の二つがあります。

初めての "filter"
describe("filter の引数の書き方のバリエーション", () => {
  const members = ["nakanishi", "jim", "john"];

  it("filter の引数に直接関数を書く", () => {
    // 渡しているのは、アロー関数
    const res = members.filter(member => {
      return member === "john";
    });
    const expected = ["john"];
    expect(res).toEqual(expected);
  });

  it("filter の引数に、あらかじめ定義した関数を渡す", () => {
    const onlyJohn = member => {
      return member === "john";
    };

    // filter に、あらかじめ定義した関数を引数としてわたす
    const res = members.filter(onlyJohn);
    const expected = ["john"];
    expect(res).toEqual(expected);
  });
});

でも、そもそもなんで関数を渡すのか？渡す関数は何をしているのか。

それは次の項目で紹介しましょう。

渡した関数の機能

わざわざテストを書くほどのことではないですが、渡している関数の機能は、引数として受け取った値が "john" かどうか判断して、合致していれば true を、あっていなければ false を返します。

引数として渡した関数の機能
describe("onlyJohn 関数の機能", () => {
    const onlyJohn = member => {
      return member === "john";
    };

    it("onlyJohn", () => {
      const res = onlyJohn("john");
      const expected = true;
      expect(res).toEqual(expected);
    });

    it("onlyJohn", () => {
      const res = onlyJohn("nakanishi");
      const expected = false;
      expect(res).toEqual(expected);
    });

    it("onlyJohn", () => {
      const res = onlyJohn("someone");
      const expected = false;
      expect(res).toEqual(expected);
    });
  });

その結果どうなるか？

filter の機能を再確認

結論からいうと filter は「渡した関数が true を返した場合の、その要素だけ」を取り出した配列を作ります。そして、それを返します。ちょっと日本語難しいかもしれない。あともう一回も filter やります。

もう一回繰り返しますが、関数が true を返した場合の要素だけ抽出した配列を作って、返します。

filter の機能
describe("filter の引数の書き方のバリエーション", () => {
    const members = ["nakanishi", "jim", "john"];

    it("filter の引数に直接関数を書く", () => {
      // 渡しているのは、アロー関数
      const res = members.filter(member => {
        return member === "john";
      });
      const expected = ["john"];
      expect(res).toEqual(expected);
    });

    it("filter の引数に、あらかじめ定義した関数を渡す", () => {
      const onlyJohn = member => {
        return member === "john";
      };

      // filter に、あらかじめ定義した関数を引数としてわたす
      const res = members.filter(onlyJohn);
      const expected = ["john"];
      expect(res).toEqual(expected);
    });
  });

宿題

今回も基本的に前回と同じコードを書いてみましょう。

ただし「関数を渡している」ということを意識しながらやってみましょう。

色々変更してみるのもオーケーです。

次回は、動画でお送りしたいと思います！

口で説明するのは難しい！ので動画で！！

今回は以上です！