예제가 포함된 다양한 수준의 범위

이 과거 단계를 코딩하는 동안 저는 스코프의 정의를 기억할 뿐만 아니라 어떤 스코프가 함수의 어떤 부분과 함께 가는지 이해하는 데 약간의 어려움이 있었습니다. 때로는 그들이 제공하는 모든 정보로 코딩의 다른 부분에 대한 정의를 기억하기 어렵습니다. 이 블로그에서는 Three Scope 레벨을 설명하고 각 레벨이 무엇인지 예를 들어 설명하겠습니다.

JavaScript에는 세 가지 수준이 있습니다. 첫 번째는 전역 범위입니다.

Global Scope의 기술적 의미는 Javascript 프로그램의 모든 것이 기본적으로 실행되는 컨텍스트입니다. 여기에는 다른 범위에 포함되지 않은 모든 변수, 개체 및 참조가 포함됩니다.

간단히 말해서 이것은 전체 코드에서 액세스할 수 있는 모든 변수가 전역 범위의 일부로 간주됨을 의미합니다. let, const 및 var를 사용하여 전역 범위에서 모든 변수를 정의할 수 있습니다.

경고: var는 키워드 중 하나이지만
할 수 있기 때문에 사용하지 않는 것이 좋습니다.
실수로 재정의되어
버기 프로그램.

이제 정의가 있으므로 내 코드에서 전역 범위의 몇 가지 예를 살펴보겠습니다.

     `const mainDiv = document.getElementById("main")

     function chores(event){
      //code here can use mainDiv variable
      }

    function antherFunction(event){
     //and the code here can use mainDiv variable
      }`

이제 이 예에서 사용되는 키워드는 const입니다. 전체 코드를 통해 도달할 수 있는 변수로 설정되어 있는 것이 mainDiv입니다. 마지막은 변수 mainDiv가 document.getElementById("main")에 할당되는 것입니다.

이것이 이해하기 조금 어렵다면 여기에서 좀 더 간단합니다.

    `let submitchore = 'theChores';

    function chores(event){
    //code here can use mainDiv variable
            }

           function newChores(event){
    //code here can use mainDiv variable
            }`

다시 우리는 전역 변수를 할당해야 하는 let, const 또는 var 키워드 중 하나를 가지고 있습니다. 할당되는 변수는 submitChore입니다. 마지막으로 필요한 부분은 변수가 할당되는 'theChores'입니다. 동일한 변수가 두 함수 외부에 있으므로 하나의 함수가 아닌 두 함수 모두에 액세스할 수 있습니다.

JavaScript에서 범위의 두 번째 수준은 기능적 범위라고 합니다.

기능 범위에 대한 기술 용어는 함수 내부에서 선언된 변수이며 해당 함수 내에서만 액세스할 수 있으며 해당 함수 외부에서 사용할 수 없습니다.

더 간단한 분류는 각 기능이 기능 범위를 생성한다는 것입니다. 예를 들어:

 `function chores(event){
  let submitchore = 'theChores'; //This is a Functional scope
  }

 function chores(event){
 const submitchore = 'theChores'; //This is a Functional scope
 }

 function chores(event){
 var submitchore = 'theChores'; //This is a Functional scope
 }`

보유하고 있는 기능의 수에 관계없이 모두 고유한 기능 범위가 있습니다.

함수 내부에 변수를 만들 때 발생하는 로컬 범위가 있습니다. Local Scope의 예를 들어 위의 함수를 사용하여 차이를 볼 수 있습니다.

    Global Scope Example:

       `let submitchore = 'theChores';

    function chores(event){
    //code here can use mainDiv variable
            }

            function newChores(event){
    //code here can use mainDiv variable
            }`

로컬 범위 예:

    `function chores(event){
    let submitchore = 'theChores';
    //code here can use submitchore
            }

            function newChores(event){
    //code here cannot use submitchore
            }`

이제 각각의 예를 보면 뚜렷한 차이점을 볼 수 있습니다. 변수 submitchore는 두 함수 외부에서 chores 함수로 이동했습니다. 이렇게 하면 변수 submitchore가 newChores 함수에 액세스할 수 없게 됩니다. submitchore 변수를 newChore 함수에 넣더라도 chores 함수에 다시 액세스할 수 없습니다.
예시:

    `function chores(event){
    //code here cannot use submitchore
            }

            function newChores(event){
            let submitchore = 'theChores';
    //code here can use submitchore
            }`

이제 세 범위 중 마지막 범위는 블록 범위입니다.

The technical definition for the Block Scope variable means that the variable defined within a block will not be accessible from outside the block.

이에 대한 좋은 분석은 { } 내의 모든 것이 블록 범위라는 것입니다. 이에 대한 몇 가지 예:

    `//Can’t be used here

           {let submitchore = 'theChores';
    //code here can use submitchore
            }

           //Can’t be used here`

블록은 함수 내부에 있을 수 있으며 변수는 여전히 { } 외부에서 사용할 수 없습니다.

따라서 이 블로그에서 얻을 수 있는 내용은 글로벌 범위, 기능 범위 및 블록 범위의 세 가지 다른 범위를 더 잘 이해하는 것입니다. 또한 각 게재위치와 나중에 생성하는 코드에 적용되는 방식을 더 잘 이해하는 데 도움이 되기를 바랍니다. 즐거운 코딩하세요!