Skip to main content

ブロックスコープ

@serverSerrverlesskiy

可視領域 (англ. Scope) - 変数を使用できるプログラムの部分. .jsファイルを作成するときは、ファイル全体のスコープを作成します内部スコープを作成するには、中括弧で宣言する必要があります { ... }.

file

// 最初のスコープ
let fruit = 'Banana'
{
  // 2番目のスコープ
  let fruit = 'Apple'
  {
    // 3番目のスコープ
    let fruit = 'Lime'
  }
}

この例では、異なるスコープで3つの変数を作成しました。これらの変数には、独自のバージョンの変数が含まれています。 fruit, したがって、エラーは発生しませんが、同じスコープで同じ名前の2つの変数を作成しようとすると、エラーが発生します。

// 最初のスコープ
let fruit = 'Banana'
{
  // 2番目のスコープ
  let fruit = 'Apple'
  let fruit = 'Lime' // ここでエラーが発生します
}

中括弧のブロックを使用するため、さまざまな構成を作成するときは、この構成のスコープも作成します { ... }.

if (true) {
  // 条件文の範囲
}

for (let i = 0; i > 5; i++) {
  // ループスコープ
}

function test() {
  // 関数スコープ
}

これらの例では、各構成に独自のスコープがあります。

グローバルスコープ​

Global

グローバルスコープとは、他のすべてのスコープがこのスコープの子であることを意味します。グローバルスコープには、すべての関数とブロックの外部で宣言された変数が含まれています。

// グローバルスコープ
let fruit = 'Banana'

グローバルスコープで作成された変数は呼び出されます グローバル変数 . グローバル変数は、すべての子スコープで使用できます。

Live Editor
Result
Loading...

ローカルスコープ​

Local

ローカルスコープには、コードの特定の部分で宣言されている変数が含まれています。たとえば、ループ内で作成された変数はローカルになります。

for (let i = 0; i > 5; i++) {
  // 変数 i ローカルです
}

ローカル変数は、それらが宣言されたブロック内でのみ使用できます。

function learnFavaScript() {
  function showFruit() {
    // 変数 fruit ローカルです
    let fruit = 'Banana'
  }
  // したがって、関数外では使用できません。
  return fruit
}

// ReferenceError: fruit is not defined

の例​

Math

異なるスコープで同じ名前の2つの変数を使用します。関数 otherFruit() 変数を返します fruit それが初期化されるスコープから Lime

Live Editor
Result
Loading...

持ち去ったら let 関数から otherFruit(), 次に、変数を作成する代わりに 書き直します .

Live Editor
Result
Loading...

ローカル変数を呼び出そうとするとどうなりますか 親スコープで？グローバルスコープで変数を呼び出そうとしているため、エラーが発生します , 作成しませんでした。

function learnJavaScript() {
  let num
  for (let i = 0; i != 5; i++) {
    num += i
  }
  return i
}

//ReferenceError: i is not defined

Primer

禁止 var​

eye

記事 変化する 使用するように言いました var 私たちはしません、それはスコープとだけ接続されています。

  1. 同じスコープ内で、キーワードを使用して同じ名前の2つの変数を作成する場合 let または const, 次に、インタープリターはエラーを表示してこれについて警告します。
function learnJavaScript() {
  let fruit = 'Banana'
  let fruit = 'Lime'
  return fruit
  // SyntaxError: Identifier 'fruit' has already been declared
}

しかし、使用する場合 var 同じ名前の変数を作成すると、再割り当てされます.

Live Editor
Result
Loading...

エラーは発生しません。var 変数を上書きしました fruit

  1. グローバル変数を作成することによって var を使用して同じ名前で別の変数を作成することにより、ローカルスコープから変更できます var. 範囲 var 関数またはスクリプトのいずれかに限定.
Live Editor
Result
Loading...
  1. で作成された変数 var 宣言がどこにあるかに関係なく、スクリプトの起動の最初から宣言されていると見なされます。
Live Editor
Result
Loading...
  1. に JavaScript 前 ES6 ブロックスコープはありませんでした。それら。キーワードを使用して作成された変数 var ブロックの内側と外側が表示されます。
if (true) {
  var fruit = 'Apple' // 変数はこのブロックの外側に表示されます
}
console.log(fruit) // "Apple"

javascript

if (true) {
  let fruit = 'Apple' // 変数はこのブロックの外側には表示されません
}
console.log(fruit) // "Apple"

javascript

記載されている理由により、開発者は使用を拒否しました var

問題?​

Problem

に書く Discord または電報 チャット, また、私たちの購読 ニュース

質問と回答​

Question

最初のスコープはいつ作成しますか？

  1. サイクルを作成するとき
  2. ファイルを作成するとき
  3. ブロックを作成するとき

条件文を作成するとき、新しいスコープが作成されますか？

  1. はい
  2. いいえ

ローカル変数はどこで作成されますか？

  1. コードの特定の部分
  2. すべてのブロックの外側

このレッスンをどれだけ学んだかを理解するために、 モバイルアプリ このトピックについて私たちの学校で.

Sumerian school

リンク​

  1. JavaScript Scope
  2. Learn JavaScript
  3. MDN Web Docs

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


IIo3iTiv

Dmitriy Vasilev
💵
Resoner2005
🐛 🎨 🖋
Navernoss
🖋 🐛 🎨

EnglishMoji!