JavaScript入門 #13 - スコープと巻き上げ

このシリーズについて

「JavaScript入門」第13回です。今回は、変数や関数がどこから使えるのかを決めるスコープを扱います。

スコープとは

スコープは、変数を参照できる範囲です。

変数は、必要な範囲の中だけで使えるようにするのが基本です。どこからでも見える変数が増えると、変更の影響が追いにくくなります。

Step 1: ブロックスコープを確認する

let と const は、{} の中で宣言すると、その中だけで使えます。

if (true) {
  const message = "ブロック内です";
  console.log(message);
}

// console.log(message); // エラー

ブロックの外から message は見えません。

Step 2: 外側の変数を読む

内側のブロックから、外側の変数は読めます。

const userName = "Taro";

if (true) {
  console.log(userName);
}

ただし、内側から外側の変数を書き換えすぎると、処理の流れが読みにくくなります。

Step 3: 関数スコープを確認する

関数の中で宣言した変数は、関数の外からは使えません。

function createMessage(name) {
  const message = `${name}さん、こんにちは`;
  return message;
}

console.log(createMessage("Yuki"));
// console.log(message); // エラー

関数の内部変数は、関数の外へ漏れないようにできます。

Step 4: varとの違いを知る

var はブロックスコープではなく関数スコープです。

if (true) {
  var oldStyle = "varで宣言";
}

console.log(oldStyle);

この挙動は初学者には分かりにくいため、新しく書くコードでは let と const を使います。

Step 5: 巻き上げを軽く確認する

JavaScriptでは、宣言が内部的に先に処理されるような挙動があります。これを巻き上げと呼びます。

sayHello();

function sayHello() {
  console.log("Hello");
}

関数宣言は、定義より前でも呼べる場合があります。ただし、読みやすさのために、基本は定義してから使います。

練習

scope.js を作り、変数の見える範囲を確認します。

const globalMessage = "外側";

function showMessage() {
  const localMessage = "内側";
  console.log(globalMessage);
  console.log(localMessage);
}

showMessage();

localMessage を関数の外で出力するとエラーになることも試してください。

よくあるエラー

次のステップ

JavaScript入門 #14 - DOM要素の取得 で、ブラウザ上のHTMLをJavaScriptから扱います。

まとめ

スコープは、変数が使える範囲です。let と const はブロックスコープを持ち、関数内の変数は外から見えません。変数は必要な場所の近くで宣言すると、影響範囲が小さくなります。

参考リソース

• MDN: スコープ
• MDN: let
• MDN: var

×

PR

×

PR