JavaScriptの変数について

構文

変数を宣言するキーワードと共に変数名を記述します。

let 変数名;

初期値を合わせて指定することも可能です。

let 変数名 = 初期値;

複数の変数をまとめて記述してもかまいません

let 変数名1, 変数名2;

変数を宣言するキーワード

JavaScriptでは、変数を宣言するために以下の3つのキーワードを使用できます。

var x = 10;
console.log(x); // 10

let y = 20;
console.log(y); // 20

const z = 30;
console.log(z); // 30

変数のスコープ（有効範囲）

変数のスコープとは、変数がどこで使えるかを決めるルールです。

• 関数スコープ： var は関数の中で有効
• ブロックスコープ： let や const は {}（ブロック）の中でのみ有効

function example() {
  var a = 1; // 関数スコープ
  if (true) {
    let b = 2; // ブロックスコープ
    const c = 3; // ブロックスコープ
    console.log(a, b, c); // 1 2 3
  }
  console.log(a); // 1
  // console.log(b); // エラー（b はブロック内のみ有効）
  // console.log(c); // エラー（c はブロック内のみ有効）
}

example();

グローバル変数

グローバル変数は、プログラムのどこからでもアクセスできる変数であり、適切に使用することでコードの柔軟性を高めることができますが、注意点もいくつかあります。

• グローバル変数は、関数の外側で宣言された変数、またはキーワードを使わずに宣言された変数のことです。
• プログラムのどこからでもアクセスできるため、複数の関数やスクリプト間でデータを共有するのに便利です。

関数の外で変数を宣言します。

let globalLet = "これはグローバル変数（let）";
const globalConst = "これはグローバル変数（const）";

console.log(globalLet); // これはグローバル変数（let）
console.log(globalConst); // これはグローバル変数（const）

function test() {
  console.log(globalLet); // アクセス可能
  console.log(globalConst); // アクセス可能
}
test();

• const で宣言したグローバル変数は再代入不可
• let は再代入可能
• let や const のほうが var よりスコープが限定されるため、安全性が高い

See the Pen js-exp01 by Miki Iwamura (@robby_b9) on CodePen.

宣言キーワードまとめ