広告スペース(バナー)
🟨JavaScript レッスン
基本文法の基礎8
データ構造とオブジェクト指向8
構文の基本を深める9
関数とデータ構造の応用9
アルゴリズムとテストの基礎8
文字列・数値操作の応用8
実務で役立つ機能8
アルゴリズム練習問題10
レッスン 30 / 69

高階関数(関数を引数として渡す)

このレッスンでは、JavaScriptの高階関数の考え方を学び、関数を引数として渡す柔軟なコードが書けるようになることを目標にします。「JavaScript 高階関数 とは」「JavaScript sort 比較関数」で調べている方向けの内容です。

関数の引数として、別の関数を渡せることを高階関数と呼びます。「作業のやり方だけを指定して、実際の作業は相手に任せる」ようなイメージです。.sort()に比較ルールを渡すのが代表例です。これまで学んだ.map().filter()も、実は関数を引数として受け取る高階関数の一種です。

サンプルコードでは、byDescendingという比較関数を定義し、nums.sort(byDescending)のように.sort()の引数として渡しています。比較関数が正の値を返すか負の値を返すかによって、並び替えの順番が決まる仕組みになっており、この関数を書き換えるだけで昇順・降順を自由に切り替えられます。

初心者がよくつまずくのが、.sort()を比較関数なしで使うと、数値も文字列として比較されてしまい、意図しない順番になる点です。[10, 2, 1].sort()は数値順ではなく文字列順に並ぶため、数値を正しく並び替えるには必ず比較関数を渡す必要があります。

実際の開発現場では、並び替えの基準をユーザーが選べる一覧画面(価格順・新着順など)を作るときに、高階関数の考え方が役立ちます。JavaScriptのモダンな書き方の土台となっている、とても重要な考え方です。

コールバック関数を渡すという考え方は、イベント処理(ボタンをクリックしたときの処理)や非同期処理でも共通して使われる、JavaScriptを理解するうえで避けて通れない重要な概念です。

JavaScript
OUTPUT / 実行結果

💡 console.log() の内容が実行結果に表示されます。

🎯
ここまでできればゴール達成!
並び替えのルールを自由に切り替えられる、柔軟なソート処理が作れるようになります。
広告スペース(バナー)
広告スペース(記事内)