JavaScript: 범위 소개(함수 범위, 블록 범위)

범위란 무엇입니까?

범위는 코드 영역에서 변수 또는 기타 리소스의 가시성 또는 액세스 가능성을 결정합니다.

글로벌 범위

JavaScript 문서에는 전역 범위가 하나만 있습니다. 모든 함수 외부 영역은 전역 범위로 간주되며 전역 범위 내에서 정의된 변수는 다른 범위에서 액세스하고 변경할 수 있습니다.

//global scope
var fruit = 'apple'
console.log(fruit);        //apple

function getFruit(){
    console.log(fruit);    //fruit is accessible here
}

getFruit();                //apple

로컬 범위

함수 내에서 선언된 변수는 함수에 대해 로컬이 되며 해당 로컬 범위에서 간주됩니다. 모든 함수에는 고유한 범위가 있습니다. 동일한 변수는 각각의 함수에 바인딩되어 있고 서로 볼 수 없기 때문에 다른 함수에서 사용할 수 있습니다.

//global scope
function foo1(){
    //local scope 1
    function foo2(){
        //local scope 2
    }
}

//global scope
function foo3(){
    //local scope 3
}

//global scope

로컬 범위는 함수 범위와 블록 범위로 나눌 수 있습니다. 블록 범위의 개념은 변수를 선언하는 새로운 방법인 const 및 let과 함께 ECMA 스크립트 6(ES6)에 도입되었습니다.

기능 범위

함수에서 변수를 선언할 때마다 변수는 함수 내에서만 볼 수 있습니다. 함수 외부에서는 액세스할 수 없습니다. var는 함수 범위 접근성에 대한 변수를 정의하는 키워드입니다.

function foo(){
    var fruit ='apple';
    console.log('inside function: ',fruit);
}

foo();                    //inside function: apple
console.log(fruit);       //error: fruit is not defined 

블록 범위

블록 범위는 if, switch 조건 또는 for 및 while 루프 내의 영역입니다. 일반적으로 {중괄호}가 표시될 때마다 블록입니다. ES6에서 const 및 let 키워드를 사용하면 개발자가 블록 범위에서 변수를 선언할 수 있습니다. 즉, 해당 변수는 해당 블록 내에만 존재합니다.

function foo(){
    if(true){
        var fruit1 = 'apple';        //exist in function scope
        const fruit2 = 'banana';     //exist in block scope
        let fruit3 = 'strawberry';   //exist in block scope

    }
    console.log(fruit1);
    console.log(fruit2);
    console.log(fruit3);
}

foo();
//result:
//apple
//error: fruit2 is not defined
//error: fruit3 is not defined

어휘 범위

언급해야 할 또 다른 요점은 어휘 범위입니다. 어휘 범위는 하위 범위가 상위 범위에 정의된 변수에 액세스할 수 있음을 의미합니다. 자식 함수는 부모의 실행 컨텍스트에 어휘적으로 바인딩됩니다.

function foo1(){
    var fruit1 = 'apple';        
    const fruit2 = 'banana';     
    let fruit3 = 'strawberry';
    function foo2(){
        console.log(fruit1);
        console.log(fruit2);
        console.log(fruit3);
    }
    foo2();
}

foo1();

//result:
//apple
//banana
//strawberry

var, let 및 const 간의 자세한 비교는 !