자바스크립트의 범위(ES6)

범위는 무엇입니까?

컴퓨터 프로그래밍에서 범위는 프로그램의 다른 부분에 대한 코드의 접근성 및 가시성으로 정의할 수 있습니다. 변수, 함수 또는 객체를 선언할 때 작성 방법과 위치에 따라 특정 범위를 갖습니다.

실행 컨텍스트

실행 컨텍스트는 코드가 실행되는 환경을 설명하는 추상적인 개념입니다. 전역 및 로컬 실행 컨텍스트의 두 가지 유형이 있습니다. 전역 실행 컨텍스트는 코드가 실행될 때 가장 먼저 생성됩니다. 로컬 실행 컨텍스트는 함수가 호출될 때 생성됩니다.

글로벌 대 로컬 범위

Javascript에서 전역 범위는 코딩 중인 프로그램 또는 문서의 전체 영역으로 간주되는 반면 로컬 범위는 개별 기능 또는 개체에 고유합니다. 프로그램 내에는 여러 로컬 범위가 있을 수 있지만 전역 범위는 하나만 있을 수 있습니다. 이 개념을 관련시키는 간단한 비유는 다음과 같을 수 있습니다. 다양한 종의 동물이 있는 동물원과 사육사를 생각해 보십시오. 이 비유에서 동물의 각 종에는 기능이 될 고유한 환경(로컬 범위)이 있으며, 내부의 동물은 해당 환경 내에서만 액세스할 수 있는 로컬 변수입니다. 사육사는 전체 동물원(전역 범위)에 액세스할 수 있는 전역 변수입니다.

// Global scope
let zooKeeper = "I'm global!"

function zooAnimalEnivornment() {
  // Local scope
  let zooAnimal = "I'm a local!"
}

console.log(zooKeeper) // I'm global!
console.log(zooAnimal) // Uncaught ReferenceError: zooAnimal is not defined

위의 코드 예제에서는 전역 범위 변수를 선언하고 문자열을 할당합니다. 다음으로, 우리가 zooAnimalEnivornment() 를 선언하는 함수는 전역 범위에서도 선언되지만 자체적으로 로컬인 자체 범위를 생성합니다. 바로 function scope 입니다. 전역 변수 zooKeeper를 기록할 때 전체 프로그램에 액세스할 수 있기 때문에 오류 없이 콘솔에 출력하지만 로컬 범위 변수인 zooAnimal을 기록하려고 하면 자체 함수 외에는 어디에도 표시되지 않기 때문에 Reference Error이 발생합니다. .

차단 범위

변수가 조건문과 같은 코드 블록 내부 또는 for 루프 내부에서 선언되면 해당 블록의 로컬 범위에서만 액세스할 수 있습니다. 이는 let 및 const로 선언할 때 사실이지만 var를 사용하여 변수를 선언할 때는 블록 외부에서 여전히 액세스할 수 있습니다.

if (true) {
  let blockScopedVar = "I'm block scoped!"
  const anotherBlockScopedVar = "I'm also block scoped!"
}
console.log(blockScopedVar) // Uncaught ReferenceError: blockScopedVar is not defined

console.log(anotherBlockScopedVar) // Uncaught ReferenceError: anotherBlockScopedVar is not defined

for (let i = 0; i < 3; i++) {
  console.log(i) // logs: 0 1 2
}
console.log(i) // Uncaught ReferenceError: i is not defined

if (true) {
  var notBlockScopedVar = "I'm not block scoped!"
}
console.log(notBlockScopedVar) // I'm not block scoped!

어휘 범위(중첩 함수)

자바스크립트에서는 다른 함수 안에 함수를 선언할 수 있습니다. 이렇게 하면 Javascript에서 호출되는 중첩 범위 또는 어휘 범위가 생성됩니다. 이것은 모든 내부 함수가 모든 외부 함수 변수에 액세스할 수 있지만 그 반대의 경우에는 액세스할 수 없음을 의미합니다. 내부 함수가 얼마나 깊이 중첩되어 있든 이것은 사실입니다. 다음은 간단한 예입니다.

function outer() {
    let outerVar = 1

    function inner() {
        let innerVar = 2

        console.log(outerVar, innerVar) // 1 2
    }
    inner()
}

outer() // 1 2

inner()가 자신의 로컬 범위 변수와 외부 범위에 할당된 변수에 액세스할 수 있기 때문에 outer()가 호출되면 두 변수의 내용을 모두 콘솔에 기록합니다. 어휘 범위의 주제는 MDN 웹 문서에서 "클로저는 주변 상태(어휘 환경)에 대한 참조와 함께 번들로 묶인(봉입된) 함수의 조합"으로 정의된 Closures 개념으로 이어집니다. 폐쇄here에 대해 자세히 알아볼 수 있습니다.

var 사용을 피하십시오

Javascript ES6(ECMAScript 2015) 이전에는 let 및 const에 대한 지원이 없었으며 변수를 생성할 때 var만 사용되었습니다. Var는 함수 범위이며 블록 범위이고 재할당을 허용하지 않는 let & const에 비해 변수를 재할당할 수 있습니다. 따라서 var에서 발생할 수 있는 많은 버그와 실수를 피하기 위해 var를 사용하지 않는 것이 가장 좋습니다.