変数の再代入はなぜ避けたほうが良いのか、ようやくわかるようになってきた

2020年からjsを書く機会が急増して、これまでいかに初歩的な組み方しかしてこなかったか知った。 2020年の春ごろまではPromiseの使い方も知らなかったし、jQueryなしで書くのはハードル高いと思っていたし…。

人のコード見て顧みる

自分以上に経験少ない方のコードを引き継ぐことが多かったのも、破綻しやすいコードというものについて考える大きな要因だった。
(プログラミング関連で人と共同作業すること自体がそれまでなかった)
自身のスキルだってまだまだしょぼい自覚はあるものの、明確にこれはまずいとわかる悪手が散見され…。
お陰でどういったコードが困った事態を生み出すのか、身にしみて理解できるようになってきた。

  • 別ファイルで宣言されたグローバル変数がファイル中に突然出現する
  • スコープの長い関数の中で何度も変数への再代入が行われ、値の変化が追いづらい
  • tt,ss,DdFunc といった、書いた本人以外には謎な命名の変数・関数が多用されている
  • 同じ機能をもつ長い処理が複数個所に何度も出現する

ひとつのグローバル変数を複数関数でたらいまわして再代入繰り返すような処理が多くあり、途中で結果が予期せぬ値になってバグる…といった事例は少なくなかった…。

そんなこんなの繰り返しの中で、表題の件に思い至った。

「let使わずに書くってできるの?」

以前は「変数への再代入は極力避けたほうがよい」、というセオリーを見かけるたびなんで?と思っていたけど、 今ではできる限りconstで宣言するようにしてる。

以下のようなif文があちこちに散らばって値の変化を追いづらかったり、
(実際はlet宣言から再代入までがかなり離れた場所にある)
見た目にわかりづらいと思うシーンが頻繁にあったので…

const a = 1;
let b = "";
if(flg === 1) b = "おはよう"
if(flg === 2) b = "こんにちは"
const c = "c";

今ではこうするようにしてる 自己流だが…

const a = 1;
const b = (()=>{
  if(flg === 1) return "おはよう"
  if(flg === 2) return "こんにちは"
})();
const c = "c";

参考になりそう

↑の即時関数内にif文いれて返す方法、思い付きでやってたからこれでいいのかちょっと自信なかったけど、 記事作成中に見つけた、再代入をしないで組むテクについてかかれた記事内で同じ書き方を発見した

4歳娘「パパ、constしか使わないで?」 - Qiita

(ちょっと笑ってしまう内容)

JavaScriptからletを絶滅させ、constのみにするためのレシピ集 - Qiita

たくさんあってためになる。困ったら拝見しようと思います。

JavaScriptのletは本当に悪なのか - Qiita

考えがかたより過ぎないよう、こちらもあわせて…