JavaScriptで配列から指定した値以上の要素を抽出する方法

はじめに

JavaScriptでは、数値の配列を第1引数として受け取り、単一の数値を第2引数として受け取る関数を作成する場面があります。この関数の役割は、入力配列の中から第2引数で指定した数値以上の要素だけを集め、それらを新しい配列として返すことです。

例えば、しきい値（threshold）を40と指定した場合、戻り値には元の配列のうち「40以上」の値のみが含まれることになります。

実装例：forループを使った基本的な書き方

まずは、forループを使って条件に合う要素を順番に判定していく、最も基本的な実装方法を見てみましょう。

const arr = [56, 34, 2, 7, 76, 4, 45, 3, 3, 34, 23, 2, 56, 5];
const threshold = 40;

const findGreater = (arr, num) => {
    const res = [];
    for(let i = 0; i < arr.length; i++){
        if(arr[i] < num){
            continue;
        }
        res.push(arr[i]);
    }
    return res;
};

console.log(findGreater(arr, threshold));

出力結果

コンソールには以下のように表示されます。

[ 56, 76, 45, 56 ]

コードの解説

このコードの処理の流れは以下の通りです。

• 空の配列 res を用意し、条件を満たす要素の格納先とします。
• forループで入力配列の各要素を先頭から順にチェックします。
• 現在の要素が引数 num 未満の場合は continue によって以降の処理をスキップします。
• 条件（num 以上）を満たす要素だけを push() で res に追加します。
• ループ完了後、res を返り値として返します。

この例では、配列 arr の中で40以上の値である 56、76、45、56 の4つの要素が抽出されています。元の配列内での出現順序は維持される点にも注目してください。

filter()メソッドを使ったより簡潔な書き方

上記の処理は、ES5以降で利用できる Array.prototype.filter() メソッドを使うことで、1行で簡潔に書き換えることも可能です。

const findGreater = (arr, num) => arr.filter(val => val >= num);

console.log(findGreater(arr, threshold)); // [ 56, 76, 45, 56 ]

filter() は、コールバック関数が true を返した要素だけを集めた新しい配列を生成するメソッドです。「指定した値以上の要素を抜き出す」という今回の要件にぴったり適しており、可読性も大きく向上します。元の配列が変更されない（イミュータブルな）点も、実務での利用において大きなメリットといえるでしょう。

まとめ

配列から特定の条件を満たす要素を抽出する処理は、Web開発において非常によく使われるパターンです。学習段階ではロジックを理解しやすいforループでの実装から始め、実務では filter() のような高階関数を活用することで、より短く意図が伝わりやすいコードを書けるようになりましょう。