今回はTypeScript・Reactを使う上で知っておきたい「関数式」と「関数宣言」の違いについて復習していきます。
そもそも関数式と関数宣言ってなに？
まずは関数式と関数宣言について簡単に見ていきましょう。 関数式はざっくり言うと「変数に関数を格納する方法」のことです。一方、関数宣言は「関数を定義する方法」のことを指します。
具体的に見ていきましょう。
// 関数式 const add = (a: number, b: number): number => { return a + b; }; // 関数宣言 function add(a: number, b: number): number { return a + b; }
どちらも同じ結果になりますが、書き方が違うのがわかります。
関数式と関数宣言の違い
では、この2つの違いは何かといいますと？主に以下の3つが挙げられます。
巻き上げ（ホイスティング） 関数宣言は、コードの実行前にメモリ上に格納されるので、関数が定義される前に呼び出すことができます。一方、関数式は変数に格納されるまで呼び出すことができません。
スコープ 関数宣言はブロックスコープを持たず、関数スコープを持ちます。つまり、ifブロック内で関数宣言しても、そのブロックの外からでも呼び出すことができるということです。一方、関数式はブロックスコープを持ちます。
名前の必要性 関数宣言では、関数に名前を付ける必要があります。一方、関数式では名前を付けなくても大丈夫です。
Reactコンポーネントで使う場合は？
Reactコンポーネントを定義する場合、関数式で書くことが一般的です。理由としては、
などが挙げられます。
下記のようなコンポーネントを関数宣言で書くと、
function MyComponent(props: MyComponentProps) { // ... }
このように書くことになりますが、関数式で書けばもっとスッキリします。
const MyComponent: React.FC<MyComponentProps> = (props) => { // ... };
まとめ
というわけで関数式と関数宣言の違いについて簡単に見てきました。
ざっくりまとめると、
- 関数式は変数に関数を格納する方法、関数宣言は関数を定義する方法
- 巻き上げ、スコープ、名前の必要性に違いがある
- Reactコンポーネントを定義する場合は関数式が一般的
といったところです。
Reactを書く場合はほとんどの場合で関数式を使うことになると思いますが、関数宣言を使ったほうが良いケースもあるかもしれません。状況に応じて使い分けていくのが大事でしょう。
