主旨

この記事は過去投稿記事に頂いたコメントを参考として、コードのブラッシュアップを行い、よく分からず使っていたvar,let,constについて自分なり整理する。自分なりに噛み砕いたノート、のようなもの

コメント内容

「JavaScriptを今から学習するのであれば、変数宣言にはvarではなくconstやletを使う癖をつけたほうが良いかと思います。」
→変数宣言にはconstやletを使おう
→そもそも「var」「let」「const」って良く分かってないなぁ。

整理

以下、記事が綺麗にまとめられていた。

今回のコードでは、、、

digit以外は「取得のみで再代入しない」
→constで定数宣言

digitはif文条件によって返り値が変わる。(if条件なら返り値"0"+ num,else条件ならnum)
→letで変数宣言
　ちなみにこれをconstにしたらエラー吐きました
　「Uncaught SyntaxError: Missing initializer in const declaration」

と言う感じで描き直す。

clockEasy.js

 //時間が更新されるように時計機能を函数「clock」とまとめる

  function clock() {

   //②の前準備　曜日を表す各文字列の配列定数weeksを宣言
  const weeks = new Array('sun','mon','tue','wed','thu','fry','sat')

// 数字が 1ケタのとき、「0」を加えて 2ケタにする
      const twoDigital = function(num) { //定数twoDigitalを設定する 引数（材料）はnum
        let digit  //変数digitを定義　numに0を加えるためのもの→（返り値をうけるから変数宣言）
         if (num < 10) {digit = "0"+ num; }  //if文 "0"+は文字列として0を足すため
         else {digit = num; }         
         return digit ;  //返り値（結果）としてdigitを返す
    }
 
  // ② 現在日時を表すインスタンスを取得→メソッドを使って時間情報をそれぞれ取得する

  const now =new Date();  //コンストラクタDate()により得た日時情報をインスタンス「new」に格納　newの中に現在の時間情報が全部入っている

  const year = now.getFullYear();
  const month = twoDigital(now.getMonth() +1 );        // 困る　月が２月なのに1月 → なので結果に1足す(10行目)
  const day = twoDigital(now.getDate());
  const week = weeks[now.getDay()];          // 困る  weeksがなければ曜日が数字表記 → なので、配列Arrayを使用して数字を曜日に変換するインスタンス「week」を作成し、代入　（4,13行目）
  const hour = twoDigital(now.getHours());
  const minute = twoDigital(now.getMinutes());
  const second = twoDigital(now.getSeconds());

 //　HTML: <div id="clock_date">(ココの日付文字列を書き換え)</div>
  document.getElementById('clock-date').textContent
   = year + '/' + month + '/' + day + '/' +week;

 //　HTML: <div id="clock_time">(ココの時刻文字列を書き換え)</div>
  document.getElementById('clock-time').textContent
   = hour + ':' + minute + ':' + second;
  }

 // 上記のclock関数を1000ミリ秒ごと(毎秒)に実行 

 setInterval(clock, 1000);

感想

変数、定数宣言の使い方をつかめた。
const、letを使う癖をつけた方が良いと言うのは、「今回の簡単な時計機能であれば、無視できるけど、規模が大きくなれば誤作動の原因可能性が高いから、この使い方を早めから慣れといた方が良い」て事なんでしょうね。指摘箇所を整理し直すのは、ぼんやり使ってたものが整理されて良いですね。

（他にも同記事にコメント貰ってるんで、このシリーズ続きます、、、）

var,let,constの違い

主旨

コメント内容

整理

今回のコードでは、、、

感想