JavaScriptの変数について

JavaScriptの変数について

JavaScriptにおける変数は、データを一時的に保持するための名前付きの容器です。このセクションでは、変数の基本的な概念、宣言方法、スコープ、再代入のルールなどを詳しく説明します。

変数の宣言方法

JavaScriptでは、変数を宣言する際に var, let, または const を使用します。これらは、それぞれ異なる特性を持っています。

// varでの宣言
var x = 10;

// letでの宣言
let y = 20;

// constでの宣言
const z = 30;

var キーワード

var は、JavaScriptで最も古くから使われている変数宣言キーワードです。スコープのルールが特に重要です。

特徴:

  • 関数スコープを持つ(ブロックスコープではない)。
  • 再代入可能。
  • ホイスティングの影響を受ける。
// var の例
if (true) {
    var message = "こんにちは";
}
console.log(message); // "こんにちは" と表示される

let キーワード

let は、ES6で導入されたキーワードで、var よりも制御しやすい変数を作成します。

特徴:

  • ブロックスコープを持つ。
  • 再代入可能。
  • ホイスティングの影響を受けるが、初期化前にアクセスできない。
// let の例
if (true) {
    let message = "こんにちは";
    console.log(message); // "こんにちは"
}
console.log(message); // ReferenceError: message is not defined

const キーワード

const は、値の再代入を禁止するために使用されます。主に定数として使用されます。

特徴:

  • ブロックスコープを持つ。
  • 再代入不可。
  • ホイスティングの影響を受けるが、初期化前にアクセスできない。
// const の例
const pi = 3.14;
console.log(pi); // 3.14
pi = 3.14159; // TypeError: Assignment to constant variable.

スコープ(有効範囲)

変数のスコープとは、変数がどこでアクセス可能かを決定するルールのことです。

  • 関数スコープ: var で宣言された変数は、関数内でのみアクセス可能です。
  • ブロックスコープ: letconst で宣言された変数は、ブロック内でのみアクセス可能です。
// 関数スコープの例
function test() {
    var localVar = "関数内";
    console.log(localVar); // "関数内"
}
console.log(localVar); // ReferenceError

// ブロックスコープの例
{
    let blockVar = "ブロック内";
    console.log(blockVar); // "ブロック内"
}
console.log(blockVar); // ReferenceError

変数のホイスティング

JavaScriptでは、変数宣言がスコープの先頭に持ち上げられることをホイスティングと呼びます。ただし、letconst では初期化がホイスティングされません。

// var のホイスティング例
console.log(hoistedVar); // undefined
var hoistedVar = "ホイスティングされた変数";

// let のホイスティング例
console.log(hoistedLet); // ReferenceError: Cannot access 'hoistedLet' before initialization
let hoistedLet = "ホイスティングされない変数";

さまざまな例

以下に、変数を使用した実践的な例を示します。

// 配列の操作
let fruits = ["りんご", "みかん", "バナナ"];
fruits.push("ぶどう");
console.log(fruits); // ["りんご", "みかん", "バナナ", "ぶどう"]

// オブジェクトの操作
const person = {
    name: "太郎",
    age: 25
};
person.age = 26; // プロパティの変更は可能
console.log(person); // { name: "太郎", age: 26 }

// 数値の計算
let a = 10;
const b = 20;
let sum = a + b;
console.log(sum); // 30

これでJavaScriptにおける変数の基本的な使い方や特性についての解説を終了します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です