【JavaScript】everyメソッドの「使い方」などをわかりやすく解説！

この記事ではJavaScriptの『everyメソッド』について、

  • everyメソッドとは
  • everyメソッドの構文
  • everyメソッドの使い方
    • 配列内の全ての要素がある条件を満たしているかをテストする
    • 配列Aの全ての要素が配列Bの各要素に含まれているかをテストする
    • テスト関数(コールバック関数)内でthisを使用してテストする
  • everyメソッドの特徴
    • 空のスロットに対しては処理をスキップする
    • テスト関数が一度でもfalseを返せば、配列の反復処理が終了する
    • 空の配列のテストではどのような条件でもtrueを返す

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

everyメソッドとは

everyメソッドは、配列の全ての要素がテスト関数を満たしていればtrueを返すメソッドです。

everyメソッドは配列の各要素に対してテスト関数を実行します。テスト関数が全てtrueを返せば、everyメソッドはtrueを返します。テスト関数が1回でもfalseを返せば、everyメソッドはfalseを返します。

後ほどeveryメソッドの構文や使い方について詳しく説明しますが、まず以下に示す簡単なサンプルコードを見てみましょう。

const arr01 = [2, 4, 6];
const result01 = arr01.every((num) => num % 2 === 0);
console.log(result01); // true

const arr02 = [2, 3, 4];
const result02 = arr02.every((num) => num % 2 === 0);
console.log(result02); // false

上記のサンプルコードでは、配列内の全ての要素が偶数であるかをテストしています。arr01は全ての要素が偶数なのでtureを返しますが、arr02は配列内に奇数(3)が含まれているのでfalseを返します。

everyメソッドとsomeメソッドの違い

everyメソッドは配列の各要素が全てテスト関数を満たしていればtrueを返します。一方、someメソッドは配列の各要素が1つでもテスト関数を満たしていればtrueを返します。

someメソッドについては下記の記事で詳しく説明しています。興味のある方は下記のリンクからぜひチェックをしてみてください。

【JavaScript】someメソッドの「使い方」などをわかりやすく解説！
【JavaScript】someメソッドの「使い方」などをわかりやすく解説！

続きを見る

everyメソッドの構文

everyメソッドの構文を以下に示します。

everyメソッドの構文

array.every(callbackFn[, thisArg])

arrayはテスト対象の配列です。everyメソッドの引数と返り値を以下に示します。

引数

  • callbackFn
    • 配列の各要素に対して実行するテスト関数です。
    • 配列の各要素をテストし、テストに合格した場合にはtrueを返します。そうでない場合にはfalseを返します。
    • テスト関数は以下の引数を渡すことができます(第1引数のelementのみを渡して使用することが多いです)。
      • element: テスト実行中の要素
      • index: テスト実行中の要素のインデックス
      • array: everyメソッドでテストしている配列
  • thisArg(省略可能)
    • callbackFnを実行する際にthisとして使用される値です。

返り値(戻り値)

  • テスト関数(callbackFn)が全てtrueを返せば、everyメソッドはtrueを返す。
  • テスト関数(callbackFn)が1回でもfalseを返せば、everyメソッドはfalseを返す。

everyメソッドの使い方

everyメソッドについて、以下に示している様々な使い方をこれから説明します。

  • 配列内の全ての要素がある条件を満たしているかをテストする
  • 配列Aの全ての要素が配列Bの各要素に含まれているかをテストする
  • テスト関数(コールバック関数)内でthisを使用してテストする

各使い方について順番に説明します。

配列内の全ての要素がある条件を満たしているかをテストする

以下のサンプルコードでは、everyメソッドを用いて、配列内のすべての要素が10より大きいかをテストしています。

const arr01 = [11, 12, 13];
const result01 = arr01.every((num) => num > 10);
console.log(result01); // true

const arr02 = [10, 11, 12, 13];
const result02 = arr02.every((num) => num > 10);
console.log(result02); // false

アロー関数を使わない場合には以下のようになります。

function isBiggerThan10(num) {
  return num > 10;
}

const arr01 = [11, 12, 13];
const result01 = arr01.every(isBiggerThan10);
console.log(result01); // true

const arr02 = [10, 11, 12, 13];
const result02 = arr02.every(isBiggerThan10);
console.log(result02); // false

アロー関数を用いた方が、プログラムが短くなるのでオススメです。

配列Aの全ての要素が配列Bの各要素に含まれているかをテストする

以下のサンプルコードでは、everyメソッドを用いて、配列arrAの全ての要素が配列arrBの各要素に含まれているかをテストしています。

const arrA = [4, 5, 6];
const arrB = [1, 2, 3, 4, 5, 6, 7];
const result01 = arrA.every((element) => arrB.includes(element));
console.log(result01); // true

テスト関数(コールバック関数)内でthisを使用してテストする

every メソッドのコールバック関数内でthisを使用する場合、thisArgパラメータを利用してコールバック関数内でのthisの値を設定することができます。サンプルコードを以下に示します。

function isBiggerThanThreshold(num) {
  return num > this.threshold;
}
const thresholdObj = { threshold: 10 };

const arr01 = [11, 12, 13];
const result01 = arr01.every(isBiggerThanThreshold, thresholdObj);
console.log(result01); // true

const arr02 = [10, 11, 12, 13];
const result02 = arr02.every(isBiggerThanThreshold, thresholdObj);
console.log(result02); // false

everyメソッドの特徴

everyメソッドの特徴を以下に示します。

  • 空のスロットに対しては処理をスキップする
  • テスト関数が一度でもfalseを返せば、配列の反復処理が終了する
  • 空の配列のテストではどのような条件でもtrueを返す

各特長について順番に説明します。

空のスロットに対しては処理をスキップする

everyメソッドは空のスロットに対しては処理をスキップします。サンプルコードを以下に示します。

// 空のスロットがある場合
const arr01 = [1, , 1];
const result01 = arr01.every((num) => num === 1);
console.log(result01); // true

// 空のスロットがない場合
const arr02 = [1, 2, 1];
const result02 = arr02.every((num) => num === 1);
console.log(result02); // false

以下のサンプルコードに示すようにテスト関数の第2引数(index)を見ると、空の配列スロットに対しては処理がスキップされていることがよりわかると思います。

const arr01 = [1, , 1];
const result01 = arr01.every((num, index) => {
  console.log('index:', index);
  return num === 1;
});
console.log(result01);
// ログ出力
// index: 0
// index: 2
// true

テスト関数が一度でもfalseを返せば、配列の反復処理が終了する

everyメソッドはテスト関数が一度でもfalseを返せば、配列の反復処理が終了します。サンプルコードを以下に示します。

const arr01 = [1, 2, 1];
const result01 = arr01.every((num, index) => {
  console.log('index:', index);
  return num === 1;
});
console.log(result01);
// ログ出力
// index: 0
// index: 1
// false

空の配列のテストではどのような条件でもtrueを返す

everyメソッドは空の配列のテストではどのような条件でもtrueを返します。サンプルコードを以下に示します。

// 空配列の場合
const arr01 = [];
const result01 = arr01.every(() => false);
console.log(result01); // true

本記事のまとめ

この記事ではJavaScriptの『everyメソッド』について、以下の内容を説明しました。

  • everyメソッドとは
  • everyメソッドの構文
  • everyメソッドの使い方
    • 配列内の全ての要素がある条件を満たしているかをテストする
    • 配列Aの全ての要素が配列Bの各要素に含まれているかをテストする
    • テスト関数(コールバック関数)内でthisを使用してテストする
  • everyメソッドの特徴
    • 空のスロットに対しては処理をスキップする
    • テスト関数が一度でもfalseを返せば、配列の反復処理が終了する
    • 空の配列のテストではどのような条件でもtrueを返す

お読み頂きありがとうございました。