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