이 주제는 여러 번 다루었지만, 해결하려는 문제의 관점에서 (JavaScript를 사용하여) 범위가 무엇인지 이야기하고 싶습니다.
애플리케이션의 크기가 커지면 복잡성도 증가합니다. 범위는 이러한 복잡성을 관리하기 위한 도구입니다.
7로 설정된 전역 변수 radius와 "특수" 버튼을 반환하는 createSpecialButton() 함수가 있다고 가정해 보겠습니다.
이 함수는 특정 반경을 가진 버튼을 반환하며, 이 경우에는 7로 설정됩니다. 지금 당장은 코드에 문제가 없습니다. 반경이 무엇으로 설정되어 있는지 알고 그에 따라 결과 버튼이 어떻게 보일지 알 수 있기 때문입니다. . 그러나 반경 변수에 의존하는 두 개의 함수를 더 추가하면 어떻게 될까요? 이제 코드는 다음과 같습니다.
이렇게 변경한 후 createSpecialButton()을 호출할 때 radius 값은 어떻게 되나요? 16을 추측했다면 정답입니다.
두 가지 추가 기능을 추가함으로써 코드의 복잡성이 크게 증가했으며 이제는 관련되지 않은 여러 코드 조각이 동일한 종속성에 의존하는 세상에 살고 있습니다. 이제 이것이 훨씬 더 큰 풀 스택 애플리케이션이라고 상상해 보십시오. 특정 상태 부분이 어디에서 왔는지 추론하고 버그가 나타날 때 어떻게 수정하는지 추론하기가 금방 어려워질 것입니다.
이 문제를 해결하려면 각 함수에 대해 별도의 반경 변수를 정의할 수 있습니다.
이 변경 사항을 보고 "그래, 그런데 이제 코드가 더 많아졌는데 그건 아닌 것 같아"라고 말할 수도 있습니다. 맞습니다. 코드가 더 많지만, 코드가 적다고 해서 유지 관리가 더 어려워지면더 좋지는 않습니다. 변경 사항을 적용하면 코드의 유지 관리 가능성이 향상되며 이는 항상 좋은 일입니다.
글로벌 범위는 전체 애플리케이션의 모든 항목에서 액세스할 수 있습니다. Node.JS 앱을 작성하는 경우 전역 범위를 사용하거나 접하지 않을 수도 있습니다. 그러나 웹 앱에서 작업하는 경우 스크립트 태그를 사용하거나 window.SOMETHING을 사용하여 전역 범위에 선언을 넣을 수 있습니다.
예를 들어 스크립트 태그를 사용하면 다음과 같은 작업을 수행할 수 있습니다.
또한 MDN은 "전역 범위"에 대한 정의를 "스크립트 모드에서 실행되는 모든 코드의 기본 범위"로 표현합니다. 나는생각위의 예가 그들이 말하는 것입니다.
window 전역 개체를 사용하는 동안 다음과 같은 작업을 수행할 수 있습니다.
Node.JS 프로젝트에서 작업하는 경우 모듈 범위는 가장 높은 수준에서 작업하게 되는 것입니다. .js(또는 .ts) 확장자를 가진 각 파일은 별도의 모듈입니다. 즉, 명시적으로 내보내지 않는 한 주어진 파일의 모든 항목에서 선언에 액세스할 수 있습니다.
예를 들어 user.ts에서는 두 함수 모두 변수 이름에 액세스할 수 있습니다.
그러나 이 버전의 user.ts에서는 accessName()만 변수 이름에 액세스할 수 있습니다.
이 두 모듈에서는 아무것도 내보내지지 않습니다. 즉, 다른 모듈의 코드는 이 코드에 대해 알 수 없으므로 가져오거나 사용할 수 없습니다. 하지만 우리는 그것을 바꿀 수 있습니다:
이제 두 기능을 모두 내보내므로 다른 모듈에서 사용할 수 있습니다. 이는 앞서 이야기한 전역 범위 개념과 기술적으로 다르지만, 코드를 한 모듈에서 다른 모듈로 가져오는 방식으로 전체 애플리케이션에서 사용할 수 있도록 한다는 점에서는 유사합니다.
실제로 함수 범위를 이미 살펴봤습니다. 아래 코드를 확인하세요(위 스니펫 중 하나와 동일한 코드입니다).
다음을 실행해 보세요. GreetingAgain()은 읽으려는 이름 변수가 Greeting()의 컨텍스트(예: "범위") 내에만 존재하기 때문에 오류가 발생합니다.
참고: 이를 “로컬 범위”라고 볼 수 있습니다.
블록 범위는 새로운 변수 유형, 특히 var가 아닌 let 및 const에서만 작동하기 때문에 흥미로운 것입니다. 살펴보겠습니다.
위 예시에서 1) {} 내에 코드를 배치하면 코드 블록이 생성되는 것을 볼 수 있습니다. 2) let 및 const를 사용하여 정의된 변수는 해당 코드 블록 내에서만 액세스할 수 있습니다. 3) var로 생성된 변수는 {} 외부에서 계속 액세스할 수 있으므로 블록 범위 규칙을 따르지 않습니다.
참고: 최신 JavaScript는 변수 선언에 var가 아닌 let과 const를 사용합니다.
마지막으로, 범위는 코드의 복잡성을 관리하기 위한 도구라는 점을 기억하세요. 범위 수준이 높아질수록 코드가 더 복잡해지므로 선언을 배치하는 것을 목표로 하는 것이 가장 좋습니다. 필요한 가장 작은 범위에서.
위 내용은 JavaScript의 범위 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
