var, let, constの違い | 変数の宣言方法 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

解説の概要

JavaScriptには、変数を定義するための3つの主要なキーワードがあります。それがvar、let、そしてconstです。それぞれの役割や使い方が異なるため、これらを正しく理解することが、より良いプログラムを書くためには重要です。この解説では、各キーワードの違いをできるだけ丁寧に、そして詳しく説明していきます。

JavaScriptにおける変数とは？

変数とは、データを一時的に保存するための「箱」のようなものです。プログラムを書く際には、数値や文字など、様々な情報を処理するために一時的に保存しておく必要があります。JavaScriptでは、この保存する「箱」を定義するために、var、let、constというキーワードを使います。

それぞれのキーワードには、以下のような使い方があります。


// varを使って変数を定義
var username = "Alice";

// letを使って変数を定義
let age = 16;

// constを使って変数を定義
const birthYear = 2007;

このように、どのキーワードも変数を定義できますが、それぞれの特性や使用方法に違いがあります。次に、これらの違いについて詳しく見ていきましょう。

var, let, constの主な違い

まず、それぞれのキーワードの違いを整理した表を見てみましょう。

特性 var let const
再宣言 可能 不可能 不可能
再代入 可能 可能 不可能
スコープ 関数スコープ ブロックスコープ ブロックスコープ
初期化なしの使用 可能 不可能 不可能
ホイスティング あり なし なし

次に、表に出てきた「再宣言」「再代入」「スコープ」「ホイスティング」について、それぞれ詳しく説明していきます。

再宣言についての違い

「再宣言」とは、既に存在する変数と同じ名前で再び変数を定義することを指します。varでは再宣言が許されていますが、letやconstでは再宣言が許されていません。


// varの場合
var color = "red";
var color = "blue"; // 問題なく動作します

// letの場合
let size = "large";
let size = "medium"; // エラーが発生します

// constの場合
const weight = 70;
const weight = 80; // エラーが発生します

varは再宣言が可能なため、意図しない上書きが起こる可能性があり、バグの原因となります。一方、letとconstは、再宣言を禁止することでコードの安全性を保っています。

再代入についての違い

「再代入」とは、変数に新しい値を割り当てることです。varとletは再代入が可能ですが、constは再代入ができません。constは「定数」を意味するため、一度値を設定したら変更できません。


// varの場合
var score = 100;
score = 120; // OK

// letの場合
let price = 500;
price = 600; // OK

// constの場合
const taxRate = 0.08;
taxRate = 0.10; // エラーが発生します

constは、値が変更されるべきでない場合（例えば固定の値を扱う場合）に使用します。これにより、誤って値を変更してしまうことを防ぎ、コードの信頼性が向上します。

スコープの違い

「スコープ」とは、変数がどの範囲で有効かを指す概念です。JavaScriptには主に「グローバルスコープ」「関数スコープ」「ブロックスコープ」という3つのスコープがあります。

関数スコープ

varは「関数スコープ」を持ち、関数内で定義された変数はその関数内でのみ有効です。


function showMessage() {
    var message = "Hello";
    console.log(message); // "Hello"が表示されます
}
console.log(message); // エラーが発生します

上記の例では、messageは関数内で定義されているため、関数外からはアクセスできません。

ブロックスコープ

letとconstは「ブロックスコープ」を持ち、{}で囲まれたブロック内でのみ有効です。


if (true) {
    let greeting = "Hi";
    const name = "Alice";
}
console.log(greeting); // エラーが発生します
console.log(name); // エラーが発生します

letとconstはブロック外からアクセスできません。これにより、変数が意図しない範囲で使用されることを防ぐことができ、コードがより予測しやすくなります。

ホイスティングの違い

「ホイスティング」とは、変数の宣言がその定義される位置に関係なく、スコープの先頭に移動される現象を指します。varはホイスティングが発生しますが、letやconstでは発生しません。


// varのホイスティング
console.log(name); // undefinedが表示されます
var name = "Alice";

// letのホイスティング
console.log(age); // エラーが発生します
let age = 16;

varで定義された変数は、宣言前にアクセスしてもエラーは発生せず、undefinedが返されますが、letやconstは宣言前にアクセスするとエラーが発生します。

まとめ

JavaScriptで変数を定義する際には、var、let、constを状況に応じて使い分ける必要があります。それぞれの特性を理解することで、コードの安全性や効率を向上させることができます。

  • var: 再宣言可能、再代入可能、関数スコープ、ホイスティングあり。意図しない再宣言やホイスティングが原因でバグが発生しやすい。
  • let: 再宣言不可、再代入可能、ブロックスコープ、ホイスティングなし。ブロック内で有効範囲が限定されるため、より安全に変数を管理できる。
  • const: 再宣言不可、再代入不可、ブロックスコープ、ホイスティングなし。値が変更されない定数に使用する。

変数を定義する際には、特に理由がない限り、letかconstを使うことが推奨されます。varは旧来のJavaScriptではよく使われていましたが、現在では使用を避けるべきです。

スポンサーリンク