JavaScriptでスコープがどのように機能するか

JavaScriptでスコープがどのように機能するか、およびグローバルスコープ、ローカルスコープ、レキシカルスコープの違いについて説明します。

範囲 関数または変数にアクセスできるコンテキストを指します。 JavaScriptには、グローバルスコープ、ローカルスコープ、字句スコープの3つのスコープタイプがあります。

• グローバル変数 コードブロックの外部で宣言された変数です
• ローカル変数 コードブロック内で宣言された変数です

知っておきたいこと： 関数は、外部に設定されている変数やその他の関数にアクセスできます。 それ自体—ただし、内部に設定されている変数は含まれません その他の機能。

すぐに意味があります。

グローバルスコープ

グローバルスコープ内の変数または関数は、他の関数内からアクセスできます：

// Global scope
let dogBreed = "Labrador"

let getDogBreed = function() {
  // dogBreed is accessible because it’s in the global scope
  console.log(dogBreed)
  // "Labrador"
}

// Run function
getDogBreed()

これには、関数内の関数が含まれます：

// Global scope
let dogBreed = "Labrador"

let getDogBreed = function() {
  // function inside function
  let getDogBreedFromGlobalScope = function() {
    // accesses dogBreed from the global scope
    console.log(dogBreed)
    // "Labrador"
  }
  // Run function
  getDogBreedFromGlobalScope()
}

// Run function
getDogBreed()

ローカルスコープ

ローカルスコープを持つ変数または関数は、それ自体のコンテキスト（スコープ）内からのアクセスのみです：

let getDogBreed = function() {
  // local variable scope
  let dogBreed = "Labrador"
  // We can access the dogBreed variable because it’s local
  console.log(dogBreed)
  // "Labrador
}

変数dogBreed にはローカルスコープがあり、そのスコープ内（中括弧{ .. }内）からのみアクセスできます。 ）

上記と同じコードですが、今回はconsole.log(dogBreed)を移動します ローカルスコープの外にあるため、グローバルスコープになりました：

let getDogBreed = function() {
  // local variable scope
  let dogBreed = "Labrador"
}

// Try to access a locally scoped variable
console.log(dogBreed)
// Uncaught ReferenceError: dogBreed is not defined

“dog breed is not defined”という参照エラーが発生します 、グローバルスコープからローカルスコープの変数をログアウトしようとしているためです。

レキシカルスコープ

ネストするとき 関数（関数を関数内に配置）、親関数（最も外側の関数）内の変数および関数には、内部関数からアクセスできます。これは字句スコープと呼ばれます。

ただし、親（最も外側の）関数自体は、内部関数内の変数または関数にアクセスできません。それはそれよりも混乱しているように聞こえるかもしれません。例を見てみましょう。そうすれば意味があります：

// Global scope
let animals = function() {
  // Lexical scope
  let dogBreed = "Labrador"
  // Nested function
  let getAnimals = function() {
    // We can access dogBreed because it's in the lexical scope
    console.log(dogBreed)
    // "Labrador"

    // Here’s a locally scoped variable
    let catBreed = "Persian"
    console.log(catBreed)
    // "Persian"
  }
  // Run function
  getAnimals()

  // This works because the dogBreed variable is in the lexical scope
  console.log(dogBreed)
  // "Labrador"

  // This won’t work, because catBreed is not in the lexical scope, it’s local to the getAnimals() function
  console.log(catBreed)
  // Uncaught ReferenceError: catBreed is not defined
}

animals()