【Javascript】なんでconstに関数を格納するの？

はじめに

Rectなどのライブラリを学習する際、constに関数を格納しているコードをよく見かけます。
普段PHPを書いている身としては、functionで定義しない理由が分からなかったので調べてみました。

constに格納

const sayHello = () => {
  console.log("Hello!");
}

sayHello(); 

functionに格納

function sayHello() {
  console.log("Hello!");
}

sayHello(); 

constに格納する理由

用途によっていくつかあるようですが、代表的なものを挙げます。

1. 再代入を防ぐ
2. 巻き上げが発生しない

例

1. 再代入を防ぐ

functionに格納すると、再代入される可能性があります。
プロジェクトの規模が拡大すると見通しが悪くなるので、上書きされていても気づき難いです。
バグの温床になるので、意識して使い分けた方が良さそうです。

constに格納

const sayHello = () => {
  console.log("Hello!");
};

sayHello(); // "Hello!"

// sayHello = () => { console.log("Hi!"); }; 
// ↑ エラー: "Assignment to constant variable."

functionに格納

function sayHello() {
  console.log("Hello!");
}

sayHello(); // "Hello!"

// 関数を上書きしてしまう
sayHello = function() {
  console.log("Hi!");
};

sayHello(); // "Hi!"

2. 巻き上げが発生しない

functionで定義すると、巻き上げ（hoisting） によって関数がスコープの先頭に移動します。
constで定義するとスコープ内の定義された順番で実行されるので、実行順がコントロールし易いです。

constに格納

sayHi(); // エラー（巻き上げがない）
const sayHi = () => {
  console.log("Hi!");
};

functionに格納

sayHello(); // OK（巻き上げが起こる）
function sayHello() {
  console.log("Hello!");
}

比較表

特徴	関数宣言 (function foo() {})	関数式 (const foo = () => {})
巻き上げ (Hoisting)	あり（関数の前でも呼べる）	なし（定義前に呼ぶとエラー）
スコープ	関数スコープ	ブロックスコープ
再代入	可能（foo = ... で上書きできる）	不可（const の場合）
可読性・管理	グローバル関数向き	小さい関数向き