JavaScriptを使うとき、変数を宣言する方法はとても重要です。var、let、constにはそれぞれ異なる特徴と用途があり、状況に応じて正しく使い分ける必要があります。この文章では中学生でも理解できるよう、簡単で楽しく説明していきます！
var、let、constの違いは？
var: 昔ながらの変数
昔は変数を宣言するとき、varしか使えませんでした。しかし、最近ではあまり使われなくなっています。その理由は混乱しやすい特徴があるからです。
var x = 1;
if (true) {
var x = 2; // 外側の変数まで変更されてしまいます！
}
console.log(x); // 2
- 問題1: ブロック内で宣言した変数が、外側の変数にも影響を与えます。
-
問題2: 宣言前に使ってもエラーにならず、
undefinedに初期化されます。
結論:
varはもう使わないほうがいいです。
let: 賢い変数
letは、varの問題を解決するために生まれた新しい宣言方法です。ブロック内でしか使えないので、ずっと安全です。
let y = 1;
if (true) {
let y = 2; // この変数はこのブロック内だけ有効です。
console.log(y); // 2
}
console.log(y); // 1
- 特徴1: ブロックスコープを持ちます。
- 特徴2: 宣言前に使おうとするとエラーが出ます。
結論: 変数の値を変える必要がある場合は
letを使いましょう。
const: 変わらない変数
constは、定数を宣言するときに使います。一度値を設定すると変更できません。
const z = 10;
z = 20; // エラー！値を変えることはできません。
しかし、オブジェクトや配列のような複雑なデータの中身は変更できます。
const obj = { name: "Alice" };
obj.name = "Bob";
console.log(obj.name); // Bob
- 特徴1: 値を変更できません。
- 特徴2: オブジェクトのプロパティは変更可能です。
結論: 基本的には
constを使い、本当に必要なときだけletを使いましょう。
JavaScriptの変数はどう動くの？
ホイスティング(Hoisting)とは？
ホイスティングとは、JavaScriptがコードを実行する前に変数や関数を準備する仕組みのことです。ただし、宣言の方法によって動作が異なります。
-
var: 宣言と初期化が同時に行われ、undefinedに初期化されます。 -
letとconst: 宣言だけ準備され、初期化は後で行われます。初期化前に使うとエラーが出ます。
console.log(a); // undefined
var a = 10;
console.log(b); // エラー！初期化されていません。
let b = 20;
TDZ(Temporal Dead Zone)
TDZは、letとconstが初期化される前に変数にアクセスできないようにする仕組みです。これにより、予期しない問題を防ぐことができます。
console.log(x); // エラー！まだ初期化されていません。
let x = 5; // ここで初期化されます。
console.log(x); // 5
まとめ: ホイスティングとTDZを理解すると、変数宣言によるエラーを防ぐことができます。
constの本当の意味
constは値を変更できない変数ですが、オブジェクトや配列のプロパティは変更可能です。完全に変更を禁止したい場合はObject.freeze()を使う必要があります。
const obj = { name: "Alice" };
Object.freeze(obj);
obj.name = "Bob"; // 失敗！オブジェクトが凍結されています。
console.log(obj.name); // Alice
ヒント: 大事なデータを
freezeで凍結すると、意図しない変更を防ぎ、予期せぬバグを回避することができます。特に共有データや設定値のような重要な情報に適しています。
結論: どう選ぶべき？
-
変わらない値は
const。 -
値を変更する必要がある場合は
let。 -
varは使わないこと。
最近のJavaScriptでは、constを基本として使い、必要な場合にだけletを使うのが最も良い方法です。これにより、予測可能で安全なコードを書くことができます！