なぜconstを使っているのかわかりません

Question

実現したいこと

定数constを宣言している理由を知りたいです。

前提

教本でJavaScriptの勉強をしています。
cookieの承認ボタンがクリックされたかどうか確かめるコードです。
1行目でconst agreeを宣言するのですが、この定数agreeにはcookie承認ボタンがクリックされたら'yes'を代入するので、定数より変数letで宣言するべきではないのでしょうか？
なぜconstを使っているのか教えていただきたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

const agree = Cookies.get('cookies-agree');
if(agree === 'yes') {
    console.log('クッキーを確認しました');
} else {
    console.log('クッキーを確認できません');
    document.getElementById('agreebtn').onclick = function() {
        Cookies.set('cookies-agree', 'yes', {expires: 7});
    };
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

コードが一部なのでなんとも言えませんが、提示されたコードだけだと再代入がないのでconst妥当です

[Ko_jiro]

7行目で値は書き換えるのですが、ページが読み込まれたときに1回だけ処理するので値の再代入には当たらないということですかね？
例えばこのコードをwhileの中に書いていたらダメですよね？

[m.ts10806]

>7行目で値は書き換えるのですが

クッキーのcookies-agreeというキーの値をセットしてるだけで「書き換え」ではないですし、
const無関係です。

> 例えばこのコードをwhileの中に書いていたらダメですよね？

何を求めたいかによりますが、実際にサンプルコード書いてみてはどうでしょう。

[otn]

> この定数agreeにはcookie承認ボタンがクリックされたら'yes'を代入するので
何故そう思ったのか不思議でなりません。
agreeに'yes'を代入するというコートは、agree = 'yes'; ですよ。

[Ko_jiro]

1行目の代入についてですが、agree='yes'のように直接的ではないですがCookies.getで'yes'を取得してそれを間接的に代入していると思うのですが間違った解釈ですかね？

[otn]

1行目は代入ですよ。そこは間違っていません。
更新はこの1回きりなので、constを付けてるわけですが、、、、

あ、わかった。もしかして、
const は、const x = 123; とか const y = "abc"; のように右辺がリテラルの代入の時につけるもの限定で、
const z = 関数呼び出しのような計算式;
みたいな使い方がおかしいと思っていたと言うことですか？

[Ko_jiro]

関数の実行によって'yes'または別の値がagreeに代入されるのになぜconstなのかと疑問に思ってました。
でも皆さんのおかけで、定数を宣言しているから初期化されているという意味が理解できました。
ありがとうございました！

[otn]

そうですね。物理学で言う物理定数の定数とは意味が異なります。数学の定数はもしかすると分野によって異なるかも知れませんが、中学高校数学の定数は、多くのプログラミング言語のconstとは異なります。
123とか"abc"のようなものはリテラルと言います。

言語によっては、定数定義の右辺に関数呼び出し結果どころか、 123*4+5 のような定数だけでコンパイル時に値が決まる式さえ書けなかったりしますので、そういった言語からプログラミングに入門すると違和感あるでしょうね。昔からある言語は式が書けない気がします。

最初の私のコメント含め、皆さん、再代入の絡みの話かと思って回答していますね。

Answer 1

7行目で値は書き換えるのですが、ページが読み込まれたときに1回だけ処理するので値の再代入には当たらないということですかね？
例えばこのコードをwhileの中に書いていたらダメですよね？

いえ、Cookies.setは、最初に代入したagreeへは何の影響もしません。

Answer 2

const で宣言した変数 agree に、宣言（const で始まる文）のとき以外に agree = XXXX の形の代入がなければ const で宣言することが望ましいです。
constは、初期化以外に値を代入しようとするとエラーになります。
let にしても通常は動作に影響はありませんが、後で初期値以外の値を代入してもエラーになりませんので定数とする意味がなくなります。
agree.setxxxx(XXXX)やagree.push(XXXX)などであれば、agree への代入ではないのでエラーになりませんし let にする必要はありません。
letにしなければならないのは、let agree = XXXXとして初期化した後に agree = YYYY などと agree = の形で値を代入する場合です。

それから、繰り返し処理の場合ですが、

for (...) {
...
}
while (...) {
...
}

などの繰り返し処理の中で、

for (let i = 0; i < values.length; i++) {
  ...
  const agree = i;
  ...
}

などとして繰り返すたびに i (値が毎回変わる変数)で初期化していてもその後に代入がなければ const で宣言できます。
繰り返し処理の「中で」宣言している変数の有効範囲は繰り返し処理の「中だけ」であり、
繰り返しの1回分限りの変数になります（変数の値は次の繰り返し時に引き継がれません）から
繰り返しの都度初期化している（繰り返す度に新たに変数が用意される）ので、
宣言の時の初期化は新たな代入にはなりません。

while (...) {
let agree = i;
...
i += 1;
...
agree = i;
}

のように宣言時の初期化以外に代入するときは letにします。
また、
繰り返し処理が入れ子になっている時も、入れ子の内側で宣言した変数は、その内側限りの変数になります。
if文の{...}の中も同様です。

Comments

[Ko_jiro]

なるほど、繰り返しの中で宣言したら毎回初期化しているから再代入には当たらないんですね。
たしかにそれなら質問させていただいたagreeをなぜconstにしているのかも合点がいきます。
詳しいご回答ありがとうございます！

Answer 3

1行目でconst agreeを宣言するのですが、この定数agreeにはcookie承認ボタンがクリックされたら'yes'を代入するので、定数より変数letで宣言するべきではないのでしょうか？

以下の部分はyesを代入しているわけではありません。
agreeがyesかどうかを比較演算子を使って判定しているだけです。

if(agree === 'yes') {
    console.log('クッキーを確認しました');
}

よって、agreeには一度も値を再代入しておらず、
Cookie値という再代入を許すべき変数ではないので、constを使うのが妥当です。