JavaScript(JS)의 범위

범위란 무엇입니까? Merriam-Webster에 따르면 범위는 방해받지 않는 동작, 활동 또는 생각을 위한 공간 또는 기회입니다. Merriam-Webster는 또한 이를 치료, 활동 또는 영향의 범위로 정의합니다. 컴퓨터 과학 용어의 범위는 바인딩이 유효한 컴퓨터 프로그램의 영역으로 정의됩니다. 여기서 이름은 엔터티를 참조하는 데 사용될 수 있습니다. MDN(JavaScript 문서)에 따르면 - “범위는 현재 실행 컨텍스트입니다. 값과 표현식이 '보이거나' 참조할 수 있는 컨텍스트입니다.”

JavaScript(JS)에는 세 가지 수준의 범위가 있습니다.

1. 글로벌 범위
2. 기능 범위

이 읽기에서 이러한 각 범위를 살펴보겠습니다. 이 글 전체에서 동일한 코드 스니펫을 사용할 것임을 빠르게 지적하고 싶습니다. 코드 스니펫에서 주석을 찾으십시오. 범위, 컨텍스트 및 범위 체인에 대해 논의하고 있기 때문에 의도적으로 이 작업을 수행했습니다. 그 댓글을 확인하세요!

전역 범위는 JS에서 가장 바깥쪽 범위입니다. {} 의 외부(함수가 아님)에서 정의된 모든 변수는 전역 범위에 있습니다. 전역 범위에 정의된 변수는 응용 프로그램 파일의 모든 위치에서 "볼 수"있습니다.

예를 들어:

let pizzaDough = 'brooklyn style'

// The variable pizzaDough lives in global scope (notice it is defined outside of any function). You can ignore the rest of this code for now.

function orderPizza() {
  const sauce = 'marinara'

  function pizzaToppings() {
    const cheese = 'mozzarella'

    return pizzaDough + ' with ' + sauce + ' and ' + cheese + ' please!'

  }

  const wholePizza = pizzaToppings();

  return wholePizza;
}

orderPizza();

함수 범위와 블록 범위는 모두 로컬 범위로 간주됩니다. 로컬 범위에 정의된 변수는 '표시'되므로 코드의 특정 부분에서만 실행할 수 있습니다.

먼저 함수 범위의 예를 살펴보겠습니다.

let pizzaDough = 'brooklyn style'

// The variable sauce is NOT visible here (sauce's outer context). Remember, this context is global scope.

function orderPizza() {
  const sauce = 'marinara'

  // The variable sauce is defined and visible in the function orderPizza. The variable sauce is not visible in it's outer context.

  function pizzaToppings() {
    const cheese = 'mozzarella'

    return pizzaDough + ' with ' + sauce + ' and ' + cheese + ' please!'

  }

  const wholePizza = pizzaToppings();

  return wholePizza;
}

orderPizza();

블록 범위의 예를 살펴보기 전에 먼저 JS의 범위 체인에 대해 간략하게 논의하고 싶습니다.
변수를 해결할 때 내부 함수는 먼저 자신의 범위를 확인합니다. 변수가 로컬로 할당되지 않은 경우(앞서 언급한 내부 함수 범위 내) JS는 변수 값에 대해 해당 함수의 외부 컨텍스트를 확인합니다. 필요할 때 외부 컨텍스트를 지속적으로 확인하는 이 프로세스가 스코프 체인입니다.

앞서 우리는 전역 범위에 정의된 변수가 응용 프로그램 파일의 어디에서나 "볼 수 있음"을 보았습니다. 이것이 사실인 것은 스코프 체인 때문입니다! 스코프 체인에 대한 마지막 참고 사항: 스코프 체인은 단방향입니다. 이는 JS가 한 방향으로만 연결된다는 것을 의미합니다. 가장 안쪽 컨텍스트(예제 코드의 함수 범위)에서 가장 바깥쪽 컨텍스트(항상 전역 범위)로. 범위를 시각적으로 표현한 아래 이미지를 확인하고 예제 코드를 다시 보기 전에 범위 체인에 대해 생각해 보십시오.



이제 아래 코드에서 작동 중인 스코프 체인의 예를 볼 수 있습니다. 계속해서 이 코드를 직접 실행해 보세요!

다음 출력이 표시되어야 합니다.

let pizzaDough = 'brooklyn style'

function orderPizza() {
  const sauce = 'marinara'

  function pizzaToppings() {
    const cheese = 'mozzarella'

    return pizzaDough + ' with ' + sauce + ' and ' + cheese + ' please!'

  }

  const wholePizza = pizzaToppings();

  return wholePizza;
}

orderPizza();

// => 'brooklyn style with marinara and mozzarella please!'

코드가 실행될 때 어떤 일이 발생하는지 분석해 보겠습니다. 위의 코드에서 pizzaToppings 함수는 먼저 자체 범위 내에서 pizzaDough sauce 및 cheese 변수에 대한 값을 찾습니다. cheese에 "mozzarella"값이 할당된 것을 확인하지만 다른 두 변수에 할당된 값은 아직 볼 수 없습니다. 그런 다음 JS는 pizzaToppings 의 외부 컨텍스트(이 경우 orderPizza 의 컨텍스트)를 확인하고 sauce에 할당된 값인 "marinara"를 확인합니다. 마지막으로 JS는 범위 체인을 계속 올라가서 pizzaDough에 할당된 값인 "brooklyn style"을 찾습니다.

꽤 깔끔하죠!? 이제 JS의 범위 및 범위 체인에 대해 조금 더 이해하셨기를 바랍니다.