JavaScript의 범위

범위는 자바스크립트 코드 실행의 현재 컨텍스트를 나타냅니다.

여기에서 값과 표현식을 사용할 수 있거나 "볼 수"있고 실행 중인 프로그램에서 참조할 수 있습니다.

현재 실행 컨텍스트에서 볼 수 없거나 사용할 수 없는 값은 현재 실행 중인 코드에서 사용할 수 없습니다.

범위는 이해하기 쉬운 개념으로 보일 수 있지만 실제로는 노련한 개발자도 가끔 넘어집니다.

참고: 범위는 일반적으로 하위 범위가 상위 범위를 참조할 수 있지만 상위 범위는 하위 범위를 참조할 수 없도록 계층적으로 중첩됩니다.

JavaScript에는 세 가지 유형의 범위가 있으며 여기에는 다음이 포함됩니다.

글로벌 범위
이것은 스크립트 모드에서 실행되는 모든 코드의 기본 범위입니다. 즉, 모든 것이 엄격한 실행 컨텍스트 없이 한 줄씩 실행됩니다

.

모듈 범위
이 범위는 코드가 모듈 모드에서 실행될 때 발생합니다

.

함수 범위
제안된 대로 이 범위는 함수 내부에서 생성됩니다.

변수 및 범위

위의 3가지 범위 외에도 변수가 ES6 구문( let 및 const )으로 선언되면 다른 범위가 생성됩니다.

블록 범위
이것은 한 쌍의 중괄호 본문 내에 생성된 범위입니다.

var 키워드는 블록 범위를 구현하지 않습니다.

기능 범위 예

function functionScopeExample() {
  var name = "Anjette"; //=> available only within functioScopeExample() body

  console.log(name); //=> Anjette
}

functionScopeExample();

console.log(name); //=> ReferenceError: name is not defined

위 스니펫에서 범위가 name 본문, 즉 함수 범위로 제한되기 때문에 functionScopeExample를 참조할 수 없습니다.

그러나 변수name는 함수 범위 내에서 성공적으로 참조됩니다.

전역 범위 예

변수를 전역 범위로 이동해 보겠습니다.

var name = "Anjette"; //=> available throughout the script i.e global scope
function globalScopeExample() {
  console.log(name); //=> Anjette
}

globalScopeExample();

console.log(name); //=> Anjette

위의 예에서 변수는 전역 범위에서 선언되었으므로 함수 내부와 함수 범위 외부에서 모두 사용할 수 있습니다.

블록 범위 예

블록은 한 쌍의 중괄호로 정의됩니다.

{
  const name = "Anjette";
  // let name = "Anjette";
}
console.log(name); //=> ReferenceError: name is not defined

const 또는 let 를 사용하면 위 스니펫에 표시된 대로 블록 외부에서 변수name에 액세스할 수 없습니다. 선언된 블록 내에서만 액세스할 수 있습니다.
var 키워드를 사용하면 동작이 다릅니다.

{
  var name = "Anjette";
}
console.log(name); //=> Anjette

위 스니펫의 변수는 블록에서 선언되지만 var 키워드는 블록 외부에서 계속 사용할 수 있습니다.

주요 테이크 아웃

범위는 프로그램에서 변수가 표시되는 범위를 정의합니다

.

JS에는 전역, 함수, 모듈 및 블록의 4가지 범위 유형이 있습니다.