1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

var,let,constの違い

Last updated at Posted at 2022-03-01

主旨

この記事は過去投稿記事に頂いたコメントを参考として、コードのブラッシュアップを行い、よく分からず使っていた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 );        // 困る 月が2月なのに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を使う癖をつけた方が良いと言うのは、「今回の簡単な時計機能であれば、無視できるけど、規模が大きくなれば誤作動の原因可能性が高いから、この使い方を早めから慣れといた方が良い」て事なんでしょうね。指摘箇所を整理し直すのは、ぼんやり使ってたものが整理されて良いですね。

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

1
0
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?