浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【javaScript】constとletの違いを肌で知った

前回記述した、ファイルをアップロードするソースコードを少しいじってmyImageを外の関数からも

参照・代入ができるようにしたかったのですが、ここで少しハマりました。

エラーを見ると、Uncaught TypeError: Assignment to constant variable.at FileReader.reader.onload

かみ砕いてみると「onload内で無効な割り当てがありました。」

一瞬狼狽えましたが、変数の宣言はしていないので間違いなくmyImageに原因があると思いました。

調べてみると、どうやらconstは再代入を許さないらしく、一回初期化をしてしまっているのでもうmyImageには

何も入れられませんという意味を持っていたみたいです。

再代入が許されるのはletとverのみで、こちらは何回も代入することはできますが、何回もアクセスして変数が

目まぐるしく変わるので、メンテンナンスに手こずりそうなので大規模なプロジェクトではやはりconstを

使った方が安全性の面では最良だと感じました。

それでもletは二重の宣言を禁止したりアクセスの幅を狭めたりとconstともそこまで性質は変わらないので、ぎちぎちに

変数のアクセスをしたくないけど安全性を保ったコードを書きたいというかたには向いているかなと感じました。

<script>
      const target = document.getElementById('upload');
    //window.onloadにアクセスができる
      <span style="color: #0000ff;">let myImage = '';</span>
      target.addEventListener('change', function (e) {
        const getImg = document.getElementById('myImage');
        const file = e.target.files[0]
        const reader = new FileReader();
        reader.onload = function (e) {
          getImg.height = 200;
          getImg.src = e.target.result;
          myImage = getImg.src;
          localStorage.setItem('image', myImage);
          console.log(myImage);
        }
        reader.readAsDataURL(file);
      }, false);
      window.onload = function(){
        document.getElementById("submit").addEventListener("click", function(){
          console.log(myImage);
          alert("ボタンが押されました");
        });
      }
    </script></pre>
<pre>

参考にさせていただいたサイト→varじゃだめなの?? constとletを使おう!

  • この記事いいね! (0)