[Javascript] 関数の宣言時のletとconstの違いについて

Question

現在Javasciptの勉強をしており、関数の宣言方法について学びました。

私が学んだのは関数の宣言時に
const add = (num1, num2) => { return num1 + num2; };
のようなconstを用いて関数の宣言を行う方法でした。

ここで疑問?確認したいこと?があります。
関数を"定数(const)"で定義するとは「関数内の構造を変更しませんよ」ということを表しているのでしょうか？

そうであれば、この関数の宣言に使用しているconstをletにした場合には関数内の構造を変更する場合を想定する際に使うという認識で合っているのでしょうか?
関数内の構造を変更する場合の例：
上記のadd関数では２つの引数を足した値を戻り値として返している。それを「２つの引数を引いた値を戻り値とするreturn num1 - num2;」など。

教えていただけると助かります。

Answer 1

こんにちは。

再代入不可、ということです。

const 宣言は、値への読み取り専用の参照を作ります。定数が保持している値が不変ということではありません。 — その変数の識別子が再代入できないというだけです。

const - JavaScript | MDN

Answer 2

関数を"定数(const)"で定義するとは「関数内の構造を変更しませんよ」ということを表しているのでしょうか？

違います。
その関数が割り当てられている「変数」を変更不可にするかどうか、です。

// これはOK
let add1 = (x, y) => { return x + y }
add1 = (x, y, z) => { return x + y + z }

// これはNG
const add2 = (x, y) => { return x + y }
add2 = (x, y, z) => { return x + y + z } // add2という名前の「変数（中身は関数）」は変更できない

Comments

[k_i]

他の方の回答も参考になったのですが、最も質問内容の回答に近かったのでベストアンサーに選ばせて頂きました。

ありがとうございます。

Answer 3

イマドキのJavaScriptの書き方2018 - Qiita
とりあえず黙ってこれ読んでください。
これからの時代のJSを書く上で大事な多くの事が詰まっています。

質問文の8割も解決するでしょう。
そして本回答では、残りの2割を埋める為にチューニングしていきます。

---

const - MDN

const 宣言は、値への読み取り専用の参照を作ります。定数が保持している値が不変ということではありません。 — その変数の識別子が再代入できないというだけです。たとえば、定数が中身がオブジェクトである場合、オブジェクトの内容 (例えばそのプロパティ) 自体は変更可能です。

という訳です。

関数を"定数(const)"で定義するとは「関数内の構造を変更しませんよ」ということを表しているのでしょうか？

その理解で構いません。
しかしJSの仕様から読み解いた場合、若干行き過ぎた解釈です。
(この辺は下のコーディング規約欄で解説します)

他の言語の定数(const)はそれなりに重い意味を持ちますが、
JSではconstは単にvarが糞だけど、
後方互換の為にvar宣言を消せないから構文を追加しただけです。

定数なんて御大層なものではなく、
可読性の為に好き勝手な代入を禁止した変数と理解してください。

従ってconstによる関数宣言は
単なる再代入禁止の変数に関数を代入しただけです。
それ以上でも以下でもありません。

---

ここからはコーディング規約というプロジェクト内のローカルルールの話に入ります。

プロジェクトの中で書き方がコロコロ変わると読み手の負担になるので、
職場やチーム内でガイドラインを作ってそれに則った統一された美しいコードを書きましょうという文化があります。
それをコーディング規約と呼んだりします。

letは後で再代入しますよという宣言に他ならず、
言ってる事がコロコロ変わる無能な上司・先輩みたいなものですから、
コードの読み手、開発者への負担になります。

なのでletは避けてconstでやろうねってのがトレンドです。

---

関数の宣言方法に関して

JSではfunctionという関数宣言がちゃんと用意されていますが、
(プロトタイプベースなのでしゃあなしですが)thisを汚すみたいな弊害もあり、
「なんだそりゃ？」みたいな挙動が数多くあり、不具合を出す原因となっていました。

そこでES2015以降のバージョンではアロー関数が追加されて、
関数宣言の事実上の代替となりました。

モダンなプロジェクトでは何も考えず
このスタイルで関数宣言しとけみたいな感じになっています。

const add = (num1, num2) => num1 + num2;

この辺のコーディング規約を含めれば、
質問文のような理解に落ち着いてくるのだろうなという感じです。
あくまでそれはルール決めありきの話なので、
チーム内で会話出来るケースならば、実際にそう書いている人に意図を聞いた方が良いですね。

Comments

[standard-soft]

thisを使わない(クラスを使わない)、使わない方がよいという方法論が、Reactのせいで崩されてきたのですが、ReactHooksでようやく戻ってきてクラス排除してもちゃんとプログラム組めるという方向になってきて、よかったと感じてます。

Answer 4

• constは上書き不可
• letは上書き可能だけど再宣言不可
• varは自由に再宣言も可能(当然上書きも可能)