JavaScript에서 범위가 작동하는 방식

JavaScript에서 Scope가 작동하는 방식과 Global Scope, Local Scope, Lexical Scope의 차이점에 대해 알아보세요.

범위 함수 또는 변수에 액세스할 수 있는 컨텍스트를 나타냅니다. JavaScript에는 전역 범위, 로컬 범위, 어휘 범위의 세 가지 범위 유형이 있습니다.

• 전역 변수 코드 블록 외부에 선언된 변수입니다.
• 로컬 변수 코드 블록 내에서 선언된 변수입니다.

알아두면 좋은 정보: 함수는 외부에 설정된 변수 및 기타 함수에 액세스할 수 있습니다. 자체 — 그러나 내부에 설정된 변수는 아님 기타 기능.

1분 안에 이해가 될 것입니다.

전역 범위

전역 범위의 모든 변수 또는 함수는 다른 함수 내에서 액세스할 수 있습니다.

// 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()