자바스크립트에서 스코프란?

Javascript의 범위는 Javascript의 변수 또는 기타 리소스의 접근성/가시성을 나타냅니다.

시간을 낭비하지 않고 범위를 이해하기 위해 몇 가지 예를 살펴보겠습니다.

글로벌 범위

Javascript 문서에는 전역 범위가 하나만 있습니다. 모든 기능 이외의 영역은 전역 범위로 간주되지 않습니다. 전역 범위에서 선언된 변수는 다른 범위에서 액세스하고 변경할 수 있습니다.

//global scope
var fruit = 'apple'

function printApple() {
    console.log(fruit)
}

printApple()

위의 예에서 변수fruit는 전역 범위에서 선언되며 문서 내부 어디에서나 액세스할 수 있습니다. let 대신 var를 써도 답은 바뀌지 않는다.

로컬 범위

함수 내에서 선언된 변수는 변수가 선언된 함수에 대해 지역적이라고 합니다. 모든 함수에는 고유한 범위가 있습니다.

function a() {
    // local scope a
    function b() {
        // local scope b
    }
}

function c() {
    // local scope c
}

이제 로컬 범위에 대해 자세히 살펴보겠습니다. 로컬 범위는 블록 범위와 함수 범위의 두 부분으로 나뉩니다.

기능 범위

함수 내에서 변수를 선언할 때마다 변수는 함수 내에서 표시되거나 액세스 가능합니다. 키워드var로 선언된 변수는 기능 범위와 연결됩니다.

function a() {
    var fruit = 'apple'
    console.log(fruit)
}

a()                // apple
console.log(fruit) // error: fruit is not defined

블록 범위

Javascript에서는 if , for , switch 및 while 내의 영역을 블록으로 간주합니다. 간단히 말해서 {}(중괄호)를 사용할 때마다 블록이 생성되고 그 안에 선언된 변수는 해당 특정 블록에 블록 범위가 지정된 것으로 간주됩니다.
var 키워드로 선언된 변수는 블록 범위의 속성을 표시하지 않습니다. let 및 const로 선언된 변수는 블록 범위 속성을 보여줍니다.

function a() {
    if (true) {
        var x = 'hello'
        let y = 'hey'
        const z = 'bey'
    }

    console.log(x)
    console.log(y)
    console.log(z)
}

a()
// console.log(x) will print hello
// console.log(y) will throw error
// console.log(z) will throw error

위에서 논의한 모든 스코프 외에도 Lexical Scope라는 언급이 필요한 스코프가 하나 더 있습니다.

어휘 범위

간단히 말해서 부모에 선언된 변수를 자식이 액세스할 수 있음을 의미합니다. 자식 함수는 부모의 실행 컨텍스트에 어휘적으로 바인딩됩니다.

function a() {
    var x = 'hello'
    let y = 'hey'
    const z = 'bey'

    function b() {
        console.log(x)
        console.log(y)
        console.log(z)
    }

    return b
}

b = a()
b()
// console.log(x) will print hello
// console.log(y) will print hey
// console.log(z) will throw print

이 기사가 Javascript의 범위가 정확히 무엇인지 요약하기를 바랍니다. 또한 스코프에 대해 훨씬 더 깊이 파고들려면 let , const 및 var 가 정확히 어떻게 작동하는지 알아야 합니다.

Github 및 (으)로 연락해 주세요.

날 따라와

좋은 하루 되세요 :)