未来の日付から年・月・日などの情報を取得する関数を複数記述したい

Question

JavaScriptを勉強し始めて、2週間ほどの者です。（teratailは初質問。）

以下の関数**「FutureCalendar1」と「FutureCalendar2」**は中身が完全に一緒なのですが、結果をコンソールログで出力すると、FutureCalendar2の方が1日分多い日数が出てしまいます。中身が同じなのに、なぜ結果が違うのかがわからずに困っております。

const today = new Date();

//中身が同じ関数
const FutureCalendar1 = (AddedDate) => {
    today.setDate(today.getDate() + AddedDate);
    const year = today.getFullYear();
    const month = today.getMonth() + 1;
    const day = today.getDate();
    return String(year) + "年" + String(month) + "月" + String(day) + "日";
};

//中身が同じ関数
const FutureCalendar2 = (AddedDate) => {
    today.setDate(today.getDate() + AddedDate);
    const year = today.getFullYear();
    const month = today.getMonth() + 1;
    const day = today.getDate();
    return String(year) + "年" + String(month) + "月" + String(day) + "日";
};

console.log(FutureCalendar1(1));
console.log(FutureCalendar2(1)); //こちらの方が1日分多い日付が出力される

「const today = new Date();」の処理を両方の関数内に記述すると、結果は揃ったのですが、関数の外に出すと結果が不揃いになるようです。なぜでしょうか・・・？ 「const today = new Date();」を何度も書くのが美しくない気がしたので、関数の外に出してみたかったのですが・・・

Answer 1

const FutureCalendar1 = (AddedDate) => {
    const today = new Date();
    today.setDate(today.getDate() + AddedDate);
    const year = today.getFullYear();
    const month = today.getMonth() + 1;
    const day = today.getDate();
    return String(year) + "年" + String(month) + "月" + String(day) + "日";
};

この場合は、変数 today は FutureCalendar1 内でのみ使用できます。
もし FutureCalendar2 内で同じ名前の変数を定義しても、それは同名の別物になります。

別物なので、いくら FutureCalendar1 で today をいじくろうと FutureCalendar2 に影響はありません。

---

const today = new Date();

const FutureCalendar1 = (AddedDate) => {
    today.setDate(today.getDate() + AddedDate);
    const year = today.getFullYear();
    const month = today.getMonth() + 1;
    const day = today.getDate();
    return String(year) + "年" + String(month) + "月" + String(day) + "日";
};

この場合は、変数 today はプログラム全体で使用できます。
プログラムのどこからアクセスしても、まったく同じものが取得されます。

なので、もし FutureCalendar1 で today を変更すると、 FutureCalendar2 もおなじ today にアクセスすることになります。
つまり FutureCalendar2 は、すでに FutureCalendar1 で変更が加えられた today を利用することになります。
その結果、出力が不揃いになります。

Comments

[KentaroxKondo]

非常に親切なご回答をいただきまして、ありがとうございます。プログラミングをかじりたての私が1日考えてもよくわからなかった疑問が、ものの数分で教えていただけて感動しております。

「const today・・・」と「定数」で指定しているので、todayの中身は基本的に上書きされたり、変わったりしないものであると誤って理解していたようです。setDateという処理を行うと、定数で指定したtodayの中身も変わってしまうのですね。

この処理を複数記述する場合は、「const today = new Date();」を関数内に都度記述した方がよいと理解しました。

あまりにも初心者のため、何か誤りがあればご指摘いただきたいです。

今後もteratailで質問してみようと思いました。感謝でいっぱいです！

フォローしてみましたので、今後ともよろしくお願いいたします。

[coolwind0202]

const は、あくまでも再代入を禁止する仕組みですね。
以下は許可されません：

const today = new Date();
today = 5; (直接別の値を代入しているのでエラー)

しかしオブジェクトのキーに対して代入をすることはできます。以下のような処理です：

const today = new Date();
today.x = "";

today に直接値を代入することはできないが、today のもつデータに値をあとから入れることは可能ということです。
setDate() も内部では、todayのもつデータに変更を加えているだけなので、today が const 指定されていてもエラーは起きません。

Answer 2

todayを使いまわしているので、あなたがやっているのは、こういうことです。

$ node
> const today = new Date()
> today
2021-05-04T12:25:48.941Z

ここで、FutureCalendar1(1)を実行。

> today.setDate(today.getDate() + 1)
> today
2021-05-05T12:25:48.941Z

ここで、FutureCalendar2(1)を実行。

> today.setDate(today.getDate() + 1)
> today
2021-05-06T12:25:48.941Z

FutureCalendar1/FutureCalendar2を実行する都度、setDate()しています、よね。

Comments

[KentaroxKondo]

ご親切にご回答いただきまして、心より感謝いたします。まだまだ未熟者ですが、teratailの助けも借りつつ、努力しようと思います。shiketaさん、今後ともよろしくお願いいたします！