자바스크립트 범위

따라서 JavaScript를 처음 사용하고 "범위"라는 단어를 계속 듣고 있지만 그것이 무엇이며 왜 관심을 가져야 하는지 잘 이해하지 못합니다. 당신을 구하러 왔습니다. 이것은 이해해야 할 매우 중요한 기본 개념이므로 몇 가지 예를 살펴보고 그것이 무엇인지 설명하겠습니다.

TLDR: 변수에 액세스할 수 있는 위치

범위

JavaScript의 범위는 참조하는 모든 항목의 접근성을 나타냅니다.

어휘 범위

JavaScript에는 어휘(일명 정적) 범위가 있습니다. 멋지지 않나요? 이는 자식이 부모 범위(변수, 함수 등 포함)에 액세스할 수 있지만 부모는 자식 범위에 액세스할 수 없음을 의미합니다.

function example() {
  let a = 'test' 
  //This has access to a but not b or c
  function exampleParent() {
    let b = 'hello'
    //This has access to a and b but not c
    function exampleChild(){
      let c = 'Children are special'
      //This has access to a, b, and c
    }
  }
}

JavaScript의 Lexical은 컴파일 시간을 의미합니다. 즉, JavaScript는 동적으로 값을 가져오는 다른 언어가 아니라 컴파일 시간에 값을 가져옵니다.

let animal = 'dog';
function myAnimal() {
  console.log(animal);
}
function quack() {
  let animal = 'duck';
  myAnimal();
}
function meow() {
  let animal = 'cat';
  myAnimal();
}

quack(); // returns dog
meow(); // returns dog

이것이 동적 언어 동물에서 실행된다면 실행된 함수에 따라 다를 수 있지만 어휘 범위(런타임이 아닌 컴파일 시)이기 때문에 동일하게 유지됩니다. 그러나 이것은 다음과 같이 작성한 경우 해당 변수를 재할당하는 것과 동일하지 않습니다.

let animal = 'dog';

function myAnimal() {
  console.log(animal);
}
function quack() {
  animal = 'duck';
  myAnimal();
}
function meow() {
  animal = 'cat';
  myAnimal();
}

quack(); // returns duck
meow(); // returns cat

동일한 변수를 다시 선언하려고 시도하지 않고 선언된 변수를 재할당하므로 예상한 것을 얻을 수 있습니다.

JavaScript에는 전체 어휘 범위와 함께 3가지 종류의 범위가 있습니다.

글로벌

로컬(또는 기능)

블록

각각이 무엇인지 간략하게 알아보자

글로벌 범위

전역 범위는 중괄호 외부에 정의된 모든 것입니다. 이것은 일반적으로 여러 함수가 액세스해야 하는 파일 또는 상수에 대한 가져오기입니다.

const testLog = 'test' //this is global scope

function logger(){
  const example = 'not global' //this is not global scope it is local/function scope
  console.log(testlog) //this will work as testLog is globally scoped
}

console.log(example) //this will not work (will error Uncaught ReferenceError: example is not defined) as example is not globally scoped it is locally scoped and is not in the scope of this console log

로컬(또는 기능) 범위

함수 범위라고도 하는 로컬은 함수의 중괄호 안에 정의된 모든 것입니다. 즉, 함수 내부에 무언가가 정의되어 있으면 해당 함수만 해당 함수에 액세스할 수 있습니다. 이전 예제를 다시 사용하겠습니다.

const testLog = 'test' //this is global scope

function logger(){
  const example = 'not global' //this is not global scope it is local/function scope
  console.log(testlog) //this will work as testLog is globally scoped
  console.log(example) //this will work as example is locally scoped and we are still within that scope
}

console.log(example) //this will not work (will error Uncaught ReferenceError: example is not defined) as example is not globally scoped it is locally scoped and is not in the scope of this console log

블록 범위

블록 범위는 let 및 const와 함께 ES6에 추가된 것입니다. 이것은 let과 const가 정의된 중괄호에서 사용할 수 있음을 의미합니다. 이 예제에서는 var, let, const의 차이점을 보여주는 방법을 보여주지만 이에 대해 자세히 알고 싶다면 이 기사를 확인하세요. .

function blockScopeExample(){
    const IAmCool = true
    if(IAmCool){
        var dog = 'Dakota';    //local/function scoped
        const cat = 'Boo';     //block scoped
        let lizard = 'Lucifer'; //block scoped
        console.log(1, dog); //'1 Dakota'
        console.log(2, cat); //'2 Boo'
        console.log(3, lizard); //'3 Lucifer'
    }
    console.log(4, dog); //'5 Dakota'
    console.log(5, cat); // Uncaught ReferenceError: cat is not defined
    console.log(6, lizard); // Uncaught ReferenceError: lizard is not defined
}

여기에서 우리가 같은 중괄호 안에 있을 때 블록 범위 변수를 사용할 수 있었지만 중괄호를 벗어나자 마자 사용할 수 없는 것을 볼 수 있습니다. 함수 범위는 함수 내에서 사용할 수 있지만 외부에서는 사용할 수 없습니다. 모든 것을 합치려면 이 예가 있습니다.

const global = 'i am global' //global scope
function blockScopeExample(){
    const IAmCool = true
    if(IAmCool){
        var dog = 'Dakota';    //local/function scoped
        const cat = 'Boo';     //block scoped
        let lizard = 'Lucifer'; //block scoped
        console.log(1, dog); //'1 Dakota'
        console.log(2, cat); //'2 Boo'
        console.log(3, lizard); //'3 Lucifer'
        console.log(4, global) //'4 I am global'
    }
    console.log(4, dog); //'5 Dakota'
    console.log(5, cat); // Uncaught ReferenceError: cat is not defined
    console.log(6, lizard); // Uncaught ReferenceError: lizard is not defined
    console.log(7, global); //'7 I am global'
}
    console.log(8, dog); //'Uncaught ReferenceError: dog is not defined'
    console.log(9, cat); // Uncaught ReferenceError: cat is not defined
    console.log(10, lizard); // Uncaught ReferenceError: lizard is not defined
    console.log(11, global); //'11 I am global'

여기에서 우리가 같은 중괄호 안에 있을 때 블록 범위 변수를 사용할 수 있었지만 중괄호를 벗어나자 마자 사용할 수 없는 것을 볼 수 있습니다. 함수 범위는 함수 내부에서 사용할 수 있지만 외부에서는 사용할 수 없었고 전역 범위 변수는 어디에서나 사용할 수 있었습니다.