ジャバスクリプトスコープ💡

イントロ
今、我々は巻上げを理解して、それはスコープについて話す時間です.

テストあなたの知識
いつものように、我々はクイズであなたの知識をテストして起動します.次の4つのコンソールを教えてください.ログプリントアウト?

var greet = 'Hello!'

function sayHi () {
  console.log('2: ', greet)
  var greet = 'Ciao!'
  console.log('3: ', greet)
}

console.log('1: ', greet)
sayHi()
console.log('4: ', greet)

答えは以下の通りです.
1 :こんにちは!
2 :未定義
3:チャオ!
4 :こんにちは!
そして、はい、その順序で!
それは混乱しているかもしれません、そして、私はあなたを非難しません.我々は本当にこの権利を得るために巻物やスコープのしっかり理解を持っている必要があります.これらの2つの概念で快適であることはJavaScript開発者として不可欠です.
それで、更なるADOなしで、それに飛び込みましょう.
NBスコープと実行コンテキストは密接に関連しますが、同じではありません.それは自分で別々のトピックですので、別の時間のためにそれを維持します.我々は、このポストの範囲を理解することに集中します.

スコープとは
JavaScript内のスコープでは、コード内の(物理的な位置)に応じて、どの変数と関数をアクセスできるかを定義します.
次の2つの例を考えてみましょう.

var greet = 'Hello!'

function sayHi () {
  console.log('1: ', greet)
}

sayHi()
console.log('2: ', greet)

// 1: Hello!
// 2: Hello!

function sayHi () {
  var greet = 'Hello!'
  console.log('1: ', greet)
}

sayHi()
console.log('2: ', greet)

// 1: Hello!
// ReferenceError: greet is not defined

2番目のコンソールはなぜですか.例2のログはエラーをスローしますか?
つの違いは、変数greetが異なる場所で定義されるということです最初の例のSayhi関数の外側、2番目の内部.この関数は、関数の外側から、つまりどこでコンソールからgreetへアクセスできるかを指示します.log (' 2 :', greet )を指定します.これは第1の例でgreetがグローバルにスコープされているのに対し、第2の例では局所的にスコープされているからです.
では、グローバルスコープとローカルスコープとは?

グローバルスコープ
グローバルスコープは最も外側のスコープであり、コードの1行を書く前に定義されています.典型的には、1つのグローバルスコープだけがあり、JavaScriptエンジンで自動的に作成されます.ブラウザ内のグローバルスコープ内にあるものを簡単に確認できます.
開発ツールを開きます(Chrome用ショートカットはAlt + Cmd + Iです)、コンソールパネルに行き、これを入力します.既定でこのキーワードは、グローバルスコープ内にあるウィンドウオブジェクトを指します.
さて、同じコンソールパネルで変数greetを宣言して初期化します.それから、これをタイプすることによって、再びウインドウオブジェクトにアクセスしてください.ウィンドウのオブジェクトを展開し、すべての方法をスクロールダウンする場合は!greet変数はウィンドウオブジェクトのプロパティとして追加され、グローバルに利用可能です.それで、コンソールでgreetをタイプするならば、それはあなたに「Hello !」を与えます.
グローバル変数をアクセスすることができます
スコープ.

// Global scope

var greet = 'Hello!' // Globally scoped

function changeGreet () {
  console.log('2: ', greet) // Accessible
  greet = 'Hey!' // Modified
  console.log('3: ', greet) // Accessible
}

console.log('1: ', greet) // Accessible
changeGreet()
console.log('4: ', greet) // Accessible

// 1: Hello! 
// 2: Hello!
// 3: Hey!
// 4: Hey!

ローカルスコープ
ローカルスコープは、グローバルスコープ内で作成されたスコープです.新しい関数が宣言されるたびに、新しいローカルスコープが作成され、関数内で宣言された変数はその一意スコープに属します.
実行段階では、ローカル変数は同じスコープ内でのみアクセスできます.JavaScriptエンジンが関数の実行を終了すると、ローカルスコープを終了し、そのスコープ内の変数へのアクセスを失い、グローバルスコープに戻ります.
これが2番目のコンソールです.例2では、グローバルスコープからローカル変数にアクセスしようとするとgreetが定義されていないというエラーを投げました.
ここでは、我々がちょうど議論したものを示すもう一つの例です.

// Global scope

function sayHi () {
  // Local scope

  var greet = 'Hello!' // Localy scoped
  console.log('1: ', greet) // Accessible within the same scope

  greet = 'Hey!' // Modified within the same scope
  console.log('2: ', greet) // Accessible within the same scope
}

sayHi()
console.log('3: ', greet) // NOT accessible from outside the scope (global scope)

// 1: Hello!
// 2: Hey!
// ReferenceError: greet is not defined

グローバルスコープ内で複数のローカルスコープを持つことができます.各ローカルスコープは孤立したエンティティであるため、スコープに属する変数はその特定のスコープに制限されます.

// Global scope

function sayHello () {
  // Local scope 1

  var greet = 'Hello!' // Scoped to local scope 1
  console.log('1: ', greet) // Accessible from local scope 1
}

function changeGreet () {
  // Local scope 2

  console.log('2: ', greet) // NOT Accessible from local scope 2
}

sayHello()
changeGreet()

// 1: Hello!
// ReferenceError: greet is not defined

巻上げと範囲
大丈夫、我々は今までのグローバルとローカルのスコープをカバーしてきた.我々のクイズに戻って、我々が何が起こっているかについて理解することができるかどうか見ましょう.コードを実行しているJavaScriptエンジンであるかのようにスニペットに従ってください.行9にログを記録し、Sayhi関数の中の2番目に移動します.

var greet = 'Hello!'

function sayHi () {
  console.log('2: ', greet)
  var greet = 'Ciao!'
  console.log('3: ', greet)
}

console.log('1: ', greet)
sayHi()
console.log('4: ', greet)

コンソールの理由を説明できますか?ログは以下のそれぞれの値になりますか?
1 :こんにちは!
2 :未定義
3:チャオ!
4 :こんにちは!
具体的には、なぜコンソールを説明できますか?6行目のログ(' 2 :', greet )は未定義ですか?
以下に、混乱の可能な源をハイライトするために、スニペットを注釈しました.

// Global scope

var greet = 'Hello!' // Scoped to the global scope

function sayHi () {
  // Local scope

  console.log('2: ', greet) // undefined... Why? Isn't greet a global variable? 

  var greet = 'Ciao!' // Modified greet to 'Ciao!'
  console.log('3: ', greet) // Ciao!... Yeah make sense.
}

console.log('1: ', greet) // Hello!... Fair enough, it's a global variable right?
sayHi()
console.log('4: ', greet)  // Hello!... Wait, didn't we just change it to Ciao?

キーはhoisting -変数と関数は、それらが属する範囲内でhoistedされます.
すべてのフィードバック、質問、またはトピックの要求を投稿してください.私も感謝👏 あなたがポストのような場合、他の人もこれを見つけることができます.
ありがとう、次回お会いしましょう!