자바스크립트 범위

범위란 무엇입니까?

범위는 변수의 액세스 가능성을 결정합니다. 범위는 변수의 액세스 가능성을 제한합니다. 예를 들어 이해합시다.

function greeting() {
  var greet = "Hello there";
}

greeting();
console.log(greet);

위의 코드는 greet is not defined 라는 오류를 발생시킵니다. 이는 Greeting이 로컬 범위를 가지고 있기 때문에 발생했으며 함수 내에서만 액세스할 수 있습니다.

범위 유형

자바스크립트에는 3가지 유형의 스코프가 있습니다.

블록 범위

기능 범위

전역 범위

ES6 이전에는 javascript에 기능적 범위와 전역 범위만 있었습니다. ES6는 블록 범위가 있는 let 및 const 키워드를 도입했습니다.

블록 범위

블록 범위를 생성하려면 {...}만 있으면 됩니다. {...} 내의 변수는 블록 범위를 갖습니다. Let 및 const에는 블록 범위가 있습니다.

let a = 2;

if (a > 1) {
  let b = a * 3;
  console.log(b); //6

  for (let i = a; i <= b; i++) {
    let j = i + 10;
    console.log(j); // 12 13 14 15 16
  }
  let c = a + b;
  console.log(c);  //8
}

위 스니펫에서 if 문에만 존재하는 변수와 for 루프에만 존재하는 변수는 무엇입니까?

답변: if 문에 b 및 c 차단 범위 변수가 포함되어 있습니다. for 루프에는 i 및 j 블록 범위 변수가 포함됩니다.

기능 범위
함수 내에서 선언된 변수는 기능 범위를 가지며 해당 함수 내에서 액세스할 수 있습니다.

function getName() {
  var name = "Adam";
  let age = 24;
  console.log(name, age); // Adam 24
}

getName();
console.log(name); // name is not defined

위의 스니펫 이름과 나이에는 기능적 범위가 있으며 함수에 대해 로컬이며 함수 getName() 내에서만 액세스할 수 있습니다. 함수 외부에서 액세스하려고 하면 ReferenceError가 발생합니다.

글로벌 범위

함수 외부에서 선언된 변수는 전역 범위를 가지며 프로그램의 어디에서나 액세스할 수 있습니다.

const globalVariable = "accessible from anywhere";

function getName() {
  var name = "Adam";
  let age = 24;
  console.log(globalVariable);  
}

console.log(globalVariable)

let 및 Var 동작

너무 일찍 let 변수에 액세스하려고 하면 참조 오류가 발생합니다.

console.log(a); //ReferenceError: cannot access 'a' before initialization
console.log(b); //undefined

let a;
var b;

이것은 TDZ(Temporal Dead Zone)라고 불리며 선언되었지만 초기화되지 않은 변수에 액세스하고 있음을 의미합니다.

왜 이것이 let에서만 발생하고 var에서는 발생하지 않았습니까?

이것은 변수 호이스팅 때문입니다. 인터프리터는 var b 선언을 코드 맨 위로 이동합니다. 초기화하지 않았기 때문에var b 값이 정의되지 않습니다.
let a는 코드 실행이 변수가 선언된 줄에 도달할 때까지 TDZ입니다.

TDZ에서 let or const에 액세스하려고 하면 연결할 수 없습니다. 그들은 범위에 있지만 선언되지 않았습니다.

{
  // temporal dead zone
  // temporal dead zone
  // temporal dead zone
  // temporal dead zone
  // temporal dead zone

  let name = "Anna"; // no more TDZ , let name is declared and initialized.
  console.log(name); //Anna
}

변수 선언은 메모리에 이름을 예약하는 것을 의미합니다.
초기화는 변수에 값을 설정하는 것을 의미합니다.