JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの高階関数とは？filterを使ってコードを簡潔にする方法を解説

JavaScriptには、特定のタスクを実行するための組み込み関数が数多く用意されています。しかし、これらの組み込み関数だけで通常どおりプログラムを組もうとすると、コードが冗長になりがちです。そこで役立つのが、JavaScriptに標準で備わっている高階関数（Higher-Order Functions）です。

高階関数を活用すると、コードの分量を減らせるだけでなく、可読性が向上し、処理の流れも理解しやすくなります。代表的な高階関数にはmap、filter、reduceの3つがあります。本記事では、その中でもfilterに焦点を当てて、具体的な使い方を見ていきましょう。

例1：高階関数を使わない従来の書き方（forループ）

高階関数を使用しない場合、プログラム全体のステップ数が増えがちです。次の例では、元の配列だけで十分タスクを達成できるにもかかわらず、結果を格納するための新しい配列を別途用意しています。さらに、配列を走査するためのforループも記述しており、コードが長くなっています。

<html>
<body>
<script>
    const name = [];
    var persons = [
       { name: 'Frodobaggins'},
       { name: 'aragorn'},
       { name: 'gandalf'},
       { name: 'pippin'},
       { name: 'nazgul'},
    ];
    for(let i = 0; i < persons.length; i++) {
        if(persons[i].name.length > 6) {
            name.push(persons[i]);
        }
    }
document.write(JSON.stringify(name));
</script>
</body>
</html>

出力結果

[{"name":"Frodobaggins"},{"name":"aragorn"},{"name":"gandalf"}]

例2：filter高階関数を使った簡潔な書き方

次の例では、高階関数であるfilterを使用しています。先ほどの例と比べると、コードの行数が大幅に削減されていることがわかります。新しい配列を宣言する必要もなく、forループも一切登場しません。「条件を満たす要素だけを抽出したい」という意図が、一行のコールバック関数で明確に表現できるのがfilterの大きな魅力です。

<html>
<body>
<script>
    const persons = [
       { name: 'Frodobaggins'},
       { name: 'aragorn'},
       { name: 'gandalf'},
       { name: 'pippin'},
       { name: 'nazgul'},
];
const name = persons.filter(person => person.name.length > 7);
document.write(JSON.stringify(name));
</script>
</body>
</html>

出力結果

[{"name":"Frodobaggins"}]

なお、例2では条件を「名前の長さが7文字より大きい」としているため、出力される要素が例1（6文字より大きい）よりも少なくなっています。閾値を同じにすれば、両者は同じ結果を返します。


このように、filterをはじめとするmap・reduceなどの高階関数を使いこなすことで、JavaScriptのコードはより短く、読みやすく、保守しやすいものになります。日常的な開発の中で積極的に取り入れてみてください。

  1. JavaScriptのMath.imul()関数とは？32ビット乗算の使い方を解説

    Math.imul()関数とは JavaScriptのMath.imul()関数は、通常の掛け算とは異なり、2つの引数に対してC言語と同様の32ビット乗算を実行し、その結果を返すメソッドです。一般的な乗算演算子（*）では正確に扱えない大きな数値や、ビットレベルの演算が必要な場面で活躍します。 この関数は、特にEmscriptenのようなプロジェクトにおいて重要な役割を果たしています。EmscriptenはC/C++のコードをJavaScriptに変換するツールであり、変換後のコードでC言語と同じ32ビット整数の挙動を再現するために、Math.imul()が頻繁に利用されます。 構文 var

  2. JavaScriptでのSentryの使い方とは？主な機能をわかりやすく解説

    Sentryとは？JavaScript開発を支えるデバッグ・監視ツールSentryは、本番環境（プロダクション）で稼働しているコードを追跡できる、JavaScript向けの総合的なデバッグ・監視ツールパッケージです。開発環境では再現しないエラーや、ユーザーの端末上でのみ発生する不具合を効率的に把握できるため、Webアプリケーションの品質向上に欠かせない存在となっています。Sentryが提供する主な機能は以下の通りです。1. 環境情報と使用状況の記録によるバグ再現エラー発生時のOS、ブラウザ、デバイス、URLなどの環境情報やユーザーの操作状況を自動的に記録します。これにより、報告だけでは再現が難