このトピックは何度も取り上げられていますが、対処しようとしている問題の観点から (JavaScript を使用して) スコープとは何かについて話したいと思います。

スコープは実際にどのような問題を解決しますか?

アプリケーションのサイズが大きくなるにつれて、複雑さも増します。スコープは、そのような複雑さを管理するためのツールです。

カップリングとデカップリング

7 に設定されたグローバル変数 radius と、「特別な」ボタンを返す関数 createSpecialButton() があるとしましょう。

let radius = 7;

function createSpecialButton(radius) {
  return Click Me!
}

const button = createSpecialButton(radius);

この関数は、特定の半径を持つボタンを返します。この場合は 7 に設定されています。現時点では、半径が何に設定されているかがわかっているので、コードに問題はありません。したがって、結果のボタンがどのようになるかがわかっています。のように見える。しかし、両方とも radius 変数に依存するさらに 2 つの関数を追加するとどうなるでしょうか?コードは次のようになります:

let radius = 7;

function createSpecialButton() {
  return Click Me!
}

function profileButton() {
  radius = 10;
  return Click Me!
}

function registrationButton() {
  radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

この変更を行った後、createSpecialButton() を呼び出すときの半径の値はどうなりますか? 16 と推測したなら、正解です。

関数を 2 つ追加しただけで、コードの複雑さが大幅に増加し、現在は、無関係な複数のコードが同じ依存関係に依存している世界に住んでいます。ここで、これがはるかに大規模なフルスタック アプリケーションであったと想像してください。特定の状態の部分がどこから来たのか、バグが発生したときにどのように修正するかを推論するのはすぐに困難になります。

これを修正するには、関数ごとに個別の半径変数を定義できます:

function createSpecialButton() {
  const radius = 7;
  return Click Me!
}

function profileButton() {
  const radius = 10;
  return Click Me!
}

function registrationButton() {
  const radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

この変更を見て、「まあ、分かったが、コードが増えた - それは正しくないようだ」と思うかもしれません。その通りです。コードの量は増えていますが、コードが減って保守性が低下するのであれば、コードが少ない方が良いというわけではありません。私たちが行った変更により、コードの保守性が向上します。これは常に良いことです。

JavaScript のスコープの種類

グローバルスコープ

グローバル スコープには、アプリケーション全体のすべてからアクセスできます。 Node.JS アプリを作成している場合、おそらくグローバル スコープを使用したり、グローバル スコープに遭遇したりすることはありません。ただし、Web アプリで作業している場合は、script タグまたは window.SOMETHING.

を使用して宣言をグローバル スコープに置くことができます。

たとえば、script タグを使用すると、次のようなことができます:

ユーザー名 = "ギャレット" にします。

また、MDN は「グローバル スコープ」の定義を「スクリプト モードで実行されるすべてのコードのデフォルト スコープ」と表現しています。彼らが言及しているのは上の例だと

思います。

ウィンドウ グローバル オブジェクトを使用しているときに、次のようなことを行う可能性があります:

window.username = "ギャレット";

モジュールのスコープ

Node.JS プロジェクトで作業している場合、モジュール スコープは最高レベルで作業することになります。 .js (または .ts) 拡張子を持つ各ファイルは別個のモジュールです。つまり、明示的にエクスポートしない限り、宣言には最大でも特定のファイル内のすべてのものがアクセスできます。

たとえば、user.ts では、両方の関数が変数名にアクセスできます。

// user.ts const name = "ギャレット"; 関数greet() { console.log("こんにちは、"、名前) } 関数greetAgain() { console.log("またこんにちは、", 名前) }

ただし、このバージョンの user.ts では、accessName() のみが変数名にアクセスできます:

// user.ts 関数greet() { const name = "ギャレット"; console.log("こんにちは、"、名前) } 関数greetAgain() { console.log("またこんにちは、", 名前) }

これらのモジュールでは何もエクスポートされないことに注意してください。言い換えれば、他のモジュールのコードはこのコードについて知る方法がないため、それをインポートして使用することはできません。ただし、これは変更できます:

// user.ts エクスポート関数greet(名前:文字列) { console.log("こんにちは、"、名前) }

これで、両方の関数がエクスポートされ、他のモジュールで使用できるようになります。これは、最初に説明したグローバル スコープの概念とは技術的に異なりますが、あるモジュールから別のモジュールにコードをインポートすることで、アプリケーション全体でコードを利用できるようにするという点では似ています。

機能範囲

実際には関数スコープについてはすでに見てきました。以下のコードをチェックしてください (上記のスニペットの 1 つと同じコードです):

// user.ts 関数greet() { const name = "ギャレット"; console.log("こんにちは、"、名前) } 関数greetAgain() { console.log("またこんにちは、", 名前) }

これを実行してみてください。greetAgain() はエラーになります。読み取ろうとしている name 変数は、greet() のコンテキスト (つまり、「スコープ」) 内にのみ存在するためです。

注: これは「ローカル スコープ」と呼ばれる場合があります。

ブロックスコープ

ブロック スコープは、新しい変数タイプ、具体的には var ではなく let と const でのみ機能するため、興味深いスコープです。見てみましょう。

{ firstName = "ギャレット" にします; const lastName = "愛"; var fullName = "ギャレット・ラブ"; // ここで firstName と lastName にアクセスできます // ここからフルネームにアクセスできます } // ここでは firstName と lastName にアクセスできません // ここでは fullName にまだアクセスできます

上記の例では、1) {} 内にコードを配置するとコード ブロックが作成されることがわかります。 2) let と const を使用して定義された変数は、そのコード ブロック内でのみアクセスできます。 3) var で作成された変数は、{}.

の外側でもアクセスできるため、ブロック スコープの規則に従っていません。

注: 最新の JavaScript では、変数宣言に var.

ではなく let と const を使用します。

申告は必要最小限の範囲内で行うこと

最後に、スコープはコードの複雑さを管理するためのツールであることを覚えておいてください。宣言を置くスコープのレベルが高くなるほど、コードの複雑さが増すため、宣言を目標にするのが最善です。必要な最小のスコープに配置する必要があります。