이 주제는 여러 번 다루어졌지만, 다루고자 하는 문제의 관점에서 (JavaScript를 사용하여) 범위가 무엇인지에 대해 이야기하고 싶습니다.

범위는 실제로 어떤 문제를 해결합니까?

애플리케이션의 크기가 커지면 복잡성도 증가합니다. 범위는 이러한 복잡성을 관리하기 위한 도구입니다.

커플링 대 디커플링

7로 설정된 전역 변수 radius와 "특수" 버튼을 반환하는 createSpecialButton() 함수가 있다고 가정해 보겠습니다.

let radius = 7;

function createSpecialButton(radius) {
  return Click Me!
}

const button = createSpecialButton(radius);

이 함수는 특정 반경을 가진 버튼을 반환하며, 이 경우에는 7로 설정됩니다. 현재로서는 반경이 어떻게 설정되어 있는지 알고 결과 버튼이 무엇인지 알기 때문에 코드에 문제가 없습니다. 처럼 보입니다. 그러나 반경 변수에 의존하는 두 개의 함수를 더 추가하면 어떻게 될까요? 이제 코드는 다음과 같습니다:

let radius = 7;

function createSpecialButton() {
  return Click Me!
}

function profileButton() {
  radius = 10;
  return Click Me!
}

function registrationButton() {
  radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

이렇게 변경한 후 createSpecialButton()을 호출할 때 반경 값은 어떻게 됩니까? 16을 추측했다면 정답입니다.

두 개의 추가 기능을 추가함으로써 코드의 복잡성이 크게 증가했으며 이제는 관련되지 않은 여러 코드 조각이 동일한 종속성에 의존하는 세상에 살고 있습니다. 이제 이것이 훨씬 더 큰 풀 스택 애플리케이션이라고 상상해 보십시오. 특정 상태 부분이 어디에서 왔는지 추론하고 버그가 나타날 때 어떻게 수정하는지 추론하기가 금방 어려워질 것입니다.

이 문제를 해결하기 위해 각 함수에 대해 별도의 반경 변수를 정의할 수 있습니다.

function createSpecialButton() {
  const radius = 7;
  return Click Me!
}

function profileButton() {
  const radius = 10;
  return Click Me!
}

function registrationButton() {
  const radius = 16;
  return Click Me!
}

const profileButton = profileButton();
const registrationButton = registrationButton();
const button = createSpecialButton();

이 변경 사항을 보고 "그래, 그런데 이제 더 많은 코드가 있는데 그건 옳지 않은 것 같아"라고 말할 수도 있습니다. 맞습니다. 코드가 더 많지만, 코드가 적다고 해서 유지 관리가 더 어려워진다면 더 좋지 않습니다. 변경 사항을 적용하면 코드의 유지 관리 가능성이 향상되며 이는 항상 좋은 일입니다.

JavaScript의 범위 유형

글로벌 범위

전체 애플리케이션의 모든 항목에서 전역 범위에 액세스할 수 있습니다. Node.JS 앱을 작성하는 경우 전역 범위를 사용하거나 접하지 않을 수도 있습니다. 그러나 웹 앱에서 작업하는 경우 스크립트 태그를 사용하거나 window.SOMETHING.

예를 들어 스크립트 태그를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

또한 MDN은 "전역 범위"에 대한 정의를 "스크립트 모드에서 실행되는 모든 코드의 기본 범위"로 표현합니다. 나는 위의 예가 그들이 언급하고 있는 것이라고 생각합니다.

창 전역 개체를 사용하는 동안 다음과 같은 작업을 수행할 수 있습니다.

  window.username = "Garrett";

모듈 범위

Node.JS 프로젝트에서 작업하는 경우 모듈 범위는 가장 높은 수준에서 작업하게 되는 것입니다. .js(또는 .ts) 확장자를 가진 각 파일은 별도의 모듈입니다. 즉, 명시적으로 내보내지 않는 한 주어진 파일의 모든 항목에서 선언에 액세스할 수 있습니다.

예를 들어 user.ts에서는 두 함수 모두 변수 이름에 액세스할 수 있습니다.

// user.ts

const name = "Garrett";

function greet() {
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

그러나 이 버전의 user.ts에서는 accessName()만 변수 이름에 액세스할 수 있습니다:

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

이 두 모듈에서는 아무것도 내보내지지 않습니다. 즉, 다른 모듈의 코드는 이 코드에 대해 알 수 없으므로 가져오거나 사용할 수 없습니다. 하지만 이를 변경할 수 있습니다:

// user.ts

export function greet(name: string) {
  console.log("Hello, ", name)
}

이제 두 기능을 모두 내보내므로 다른 모듈에서 사용할 수 있습니다. 이는 앞서 이야기한 전역 범위 개념과 기술적으로 다르지만, 한 모듈에서 다른 모듈로 코드를 가져오는 방식으로 전체 애플리케이션에서 코드를 사용할 수 있도록 한다는 점에서는 유사합니다.

기능 범위

우리는 실제로 이미 함수 범위를 살펴보았습니다. 아래 코드를 확인하세요(위 스니펫 중 하나와 동일한 코드입니다).

// user.ts

function greet() {
  const name = "Garrett";
  console.log("Hello, ", name)
}

function greetAgain() {
  console.log("Hello again, ", name)
}

이것을 실행해 보세요. GreetingAgain()은 읽으려는 이름 변수가 Greeting()의 컨텍스트(예: "범위") 내에만 존재하기 때문에 오류가 발생합니다.

참고: 이를 '로컬 범위'라고 볼 수 있습니다.

블록 범위

블록 범위는 새로운 변수 유형, 특히 var가 아닌 let 및 const에서만 작동하기 때문에 흥미로운 것입니다. 살펴보겠습니다.

{
  let firstName = "Garrett";
  const lastName = "Love";
  var fullName = "Garrett Love";
  // firstName and lastName CAN be accessed here
  // fullName CAN be accessed here
}

// firstName and lastName CANNOT be accessed here
// fullName CAN STILL be accessed here

위 예시에서 1) {} 내에 코드를 배치하면 코드 블록이 생성되는 것을 볼 수 있습니다. 2) let 및 const를 사용하여 정의된 변수는 해당 코드 블록 내에서만 액세스할 수 있습니다. 3) var로 생성된 변수는 {} 외부에서 계속 액세스할 수 있으므로 블록 범위 규칙을 따르지 않습니다.

참고: 최신 JavaScript는 변수 선언에 var가 아닌 let과 const를 사용합니다.

선언은 필요한 최소한의 범위 내에서 이루어져야 합니다.

마지막으로, 범위는 코드의 복잡성을 관리하기 위한 도구라는 점을 기억하세요. 범위 수준이 높아질수록 코드가 더 복잡해집니다. 따라서 선언을 목표로 하는 것이 가장 좋습니다. 필요한 가장 작은 범위에 배치해야 합니다.