JavaScriptを学び始めると、まず「関数宣言（function name() {}）」に出会います。しかし、実務の現場では「関数式（const name = function() {}）」が多用される場面が多々あります。単なる書き方の違いに見えて、実はその裏にはフロントエンド開発の安全性を高める戦略が隠されています。
関数式が「宣言」より好まれる理由
関数宣言には「ホイスティング（巻き上げ）」という特性があり、定義した場所よりも前で関数を呼び出せてしまいます。これは一見便利ですが、大規模なコードベースでは「どの関数がどこで定義されているのか」が追いづらくなる原因になります。
一方、関数式で変数（const）に代入する書き方は、「定義した後にしか使えない」という制約を強制します。これは、プログラムの実行順序を予測しやすくし、予期せぬエラーを未然に防ぐための「設計の規律」として非常に優秀なのです。
即時実行関数（IIFE）というテクニック
関数式ならではの活用法として、関数を定義した直後に実行する「即時実行関数」があります。
const result = (function() {
const secret = ‘private data’;
return secret.toUpperCase();
})();
このように書くことで、グローバルスコープを汚さずに一時的な処理を完結させることができます。ReactやVueのコンポーネント設計において、特定のスコープ内だけで完結させたいロジックを分離する際、この「式」としての性質が非常に役立ちます。
モダンなアロー関数との親和性
現在のフロントエンド開発では、関数式とアロー関数を組み合わせるのが標準的です。
const fetchData = async () => { … };
このように書くことで、関数自体に名前を付けつつ、変数として扱うことができます。例えば、イベントリスナーの登録と解除を確実に行いたい場合、関数式で変数に格納しておけば、removeEventListenerで指定する際にもスムーズに参照を渡すことが可能です。
関数式は単なる「書き方のバリエーション」ではありません。あなたのコードをより「予測可能」で「堅牢」なものにするための、重要なツールボックスの一つなのです。次回のコーディングでは、あえて関数式を選ぶことで、スコープの管理を意識してみてはいかがでしょうか。