JavaScriptの変数var, letと定数constについて

公開日：2024年9月18日

最終更新日：2024年9月19日

JavaScriptのvarとは

varは、JavaScriptで変数を宣言するためのキーワードです。変数宣言の際、特有のスコープや動作を持つため、正しく理解して使うことが重要です。

varの使い方

JavaScriptで変数を宣言する場合、以下のように記述します。

例:

var x = 10;

ここで、変数xに値10が代入されています。この変数は、後から値を再代入することが可能です。

x = 20;

varの特徴

再宣言可能
varを使うと、同じ変数名で再度宣言が可能です。例えば、以下のようなコードが正常に動作します。

   var y = 5;
   var y = 15;

ここでは、最初に変数yを5として宣言し、その後15に上書きしています。このように、変数を再度宣言してもエラーは発生しません。

関数スコープ
varで宣言された変数は関数スコープを持ちます。つまり、関数内で宣言された変数はその関数内でのみ有効です。以下の例を見てください。

   function myFunction() {
       var z = 100;
       console.log(z); // 100
   }

   myFunction();
   console.log(z); // エラー

この場合、関数内で宣言されたzは関数の外部からアクセスすることができません。関数の外に出ると、zは存在しなくなるからです。

グローバルスコープへの影響
関数の外でvarを使用して変数を宣言すると、その変数はグローバルスコープに属します。これは、どこからでもアクセスできることを意味します。

   var a = 50;

   function anotherFunction() {
       console.log(a); // 50
   }

   anotherFunction();
   console.log(a); // 50

ここでは、関数内外から変数aにアクセスしていますが、問題なく動作しています。

変数の巻き上げ（ホイスティング）
varは、スクリプト内のどこで宣言されていても、実行時にはスコープの先頭に「巻き上げ」られます。これは、宣言する前に変数にアクセスできることを意味します。

   console.log(b); // undefined
   var b = 10;

上の例では、bを宣言する前にconsole.logで出力していますが、エラーにはならずundefinedが表示されます。これは、bがスコープの先頭に「巻き上げ」られたためです。

varのまとめ

varは、JavaScriptにおける基本的な変数宣言の方法ですが、独特な挙動を持っています。再宣言可能であることや、関数スコープを持つこと、さらには変数の巻き上げが発生する点に注意する必要があります。現在では他の方法もありますが、varの理解はJavaScriptの基礎として非常に重要です。

JavaScriptのletとは

letは、JavaScriptで変数を宣言するために使用されるキーワードです。以前は、変数を宣言するためにvarが一般的に使用されていましたが、letの導入により、変数のスコープ管理がより厳密になり、意図しないバグを防ぎやすくなりました。

letの使い方

変数の宣言には、次のようにletを使います。

let x = 10;

このコードでは、変数xが宣言され、10が代入されています。後からxに新しい値を代入することが可能です。

x = 20;

letとvarの違い

ブロックスコープ
letの大きな特徴は、ブロックスコープを持つことです。ブロックスコープとは、変数が宣言されたブロック（波括弧{}で囲まれた部分）内でのみ有効であることを意味します。これにより、予期しない変数の上書きを防ぐことができます。

   if (true) {
       let y = 30;
       console.log(y); // 30
   }
   console.log(y); // エラー

この例では、yはif文の中でのみ有効であり、外では存在しないためエラーになります。これに対して、varは関数スコープを持つため、同じような状況で変数にアクセスできてしまう可能性があります。

再宣言できない
letを使用した変数は、同じスコープ内で再宣言することができません。これにより、同じ変数名をうっかり使ってしまうことを防ぎます。

   let z = 5;
   let z = 10; // エラー

一方、varの場合は同じスコープ内でも再宣言が可能です。

ホイスティングの違い
varで宣言された変数はスコープの先頭に「巻き上げ」られ、宣言前でもundefinedとしてアクセスできますが、letで宣言された変数はホイスティングされてもそのブロックの先頭まで一時的なデッドゾーンが発生します。そのため、宣言前にアクセスするとエラーになります。

   console.log(a); // エラー
   let a = 15;

varの場合は、宣言前でもundefinedが返されるのに対し、letではエラーが発生します。

letのまとめ

letは、変数のスコープを厳密に管理し、再宣言を防ぐため、より安全で信頼性の高いコードを書くことができます。特に、ブロックスコープの導入により、予期しない変数の上書きを防ぎやすくなっている点が重要です。JavaScriptで変数を管理する際、letを使うことで、よりバグの少ないコードを書くことができるでしょう。

JavaScriptのconstとは

JavaScriptのconstは、変数の再代入を禁止するためのキーワードです。ただし、constで宣言されたオブジェクトや配列の内部のプロパティや要素は変更可能であるため、完全な不変性を持っているわけではありません。この点について理解することが重要です。

constの基本的な特徴

再代入禁止
constで宣言された変数は、宣言後に値を再代入することができません。これは、プリミティブなデータ型だけでなく、オブジェクトや配列などの複雑なデータ型にも当てはまります。

const x = 10;
x = 20; // エラー: 再代入が禁止されています

ブロックスコープ
constで宣言された変数は、ブロックスコープ（{}で囲まれた範囲内）に限定されます。これは、letと同様のスコープ規則です。

if (true) {
  const y = 30;
}
console.log(y); // エラー: yはブロック外では参照できません

初期化必須
constを使う場合、宣言時に初期化が必須です。値を後から代入することはできません。

const z; // エラー: 初期化が必要です

オブジェクトと配列の注意点

constでオブジェクトや配列を宣言すると、そのオブジェクトや配列自体の再代入はできませんが、内部の値は変更可能です。

オブジェクトの例

const person = { name: "John", age: 25 };
person.age = 30; // これは許可されます
console.log(person.age); // 30

person = { name: "Doe", age: 40 }; // エラー: オブジェクト全体の再代入はできません

配列の例

const numbers = [1, 2, 3];
numbers.push(4); // これは許可されます
console.log(numbers); // [1, 2, 3, 4]

numbers = [5, 6, 7]; // エラー: 配列全体の再代入はできません

constとセキュリティ

constは再代入を防ぐため、不必要な値の変更を防ぐという点で、コードの安全性を向上させます。特に、重要な値や設定を保護するために使われます。しかし、オブジェクトや配列の内容が変更可能である点を理解していないと、予期しないバグを引き起こすことがあります。

constの使用例

以下は、constを用いたシンプルなコード例です。

設定オブジェクト

アプリケーションの設定を保存する際に、設定オブジェクトをconstで定義することで、オブジェクト全体の再代入を防ぎます。

const config = {
  apiUrl: "https://example.com/api",
  timeout: 5000
};

// 設定オブジェクト自体の再代入はできませんが、プロパティの変更は可能です
config.timeout = 6000; // OK

定数としての利用

計算に使う定数や変わらない値をconstで宣言することで、後から誤って変更することを防ぎます。

const PI = 3.14159;
const radius = 10;
const area = PI * radius * radius;
console.log(area); // 314.159

constとletの違い

letとconstは似ていますが、最も大きな違いはconstは再代入ができないことです。letは再代入が可能であり、値が変わることが予想される場合に使用します。

let count = 0;
count = 1; // 再代入可能

const maxCount = 10;
maxCount = 20; // エラー: constでは再代入できません

constを使うべき場面

値が変わらないことが確定している場合
関数やクラスの定義
設定オブジェクトや定数

再代入を防ぐことでバグを減らし、コードの可読性や信頼性を向上させることができます。

constのまとめ

constはJavaScriptにおける変数の宣言方法の1つで、再代入を禁止することでコードの安全性を向上させます。しかし、オブジェクトや配列の内部の値は変更可能であるため、その特性を理解した上で使うことが重要です。