범위

실행 중인 코드에서 값과 표현식을 참조할 수 있는 범위입니다.
자바스크립트에는 다음의 5개의 스코프가 존재한다.
1. 글로벌 스코프
2. 스크립트 스코프
3. 함수 루스코프
4. 블록 스코프
5. 모듈 스코프

글로벌 범위 및 스크립트 범위

우선 아래의 코드의 거동을 개발 툴로 확인해 보겠습니다.

JS

let a = 0;
var b = 0;
function c() {};
debugger

Scope 중에는 Script와 Global을 확인할 수 있습니다.
일부 스크립트에서는 let에서 정의한 a 값을, Global에서는 var로 정의한 b와 함수 c를 확인할 수 있습니다. 이렇게 let, const로 선언한 것은 스크립트 스코프, var나 함수는 글로벌 스코프에 속합니다. 다만, 일반적으로는 스크립트 스코프도 글로벌 스코프라고 불립니다.
전역 객체에 대해 좀 더 자세히 살펴 보겠습니다.

이전 개발 도구에서 전역 객체에 b와 함수 c가 저장되어 있음을 확인할 수있었습니다. 일반적으로 b의 값을 얻고 싶을 때
↓ 같은 쓰는 방법은 없습니다.

JS

let a = 0;
var b = 0;
function c() {};

console.log(window.b);

일반 획득

JS

let a = 0;
var b = 0;
function c() {};

console.log(b);

여기에서 알 수 있듯이 전역 객체는 생략하고 쓸 수 있습니다. (※console.log(window.b)에서도 b의 값은 취득할 수 있습니다)
따라서 JavaScript에서는 window 객체 자체가 글로벌 스코프라고 할 수 있습니다.

함수 범위 및 블록 범위

함수 범위는 function(){}의 {} 안의 범위를 의미합니다.

JS

function a() {
 let b = 0;
 console.log(b);
};

a();

함수 스코프내에서 선언한 b 의 값을 취득할 수 있습니다.
다음과 같이 다시 작성하면 어떻게 됩니까?

JS

function a() {
 let b = 0;
};

console.log(b);
a();

오류가 발생합니다. 범위는 실행 중인 코드에서 값과 식을 참조할 수 있는 범위이므로 함수 범위에서 선언된 변수는 범위 외부에서 참조할 수 없습니다.

그런 다음 블록 범위를 확인합니다.
먼저 블록 범위에 변수를 선언하고 console로 출력합니다.

JS

{
  let a = 1;
  console.log(a);
}

다음으로 블록 스코프 밖에서 출력해 봅니다.

JS

{
  let a = 1;
}

console.log(a);

이 오류는 범위 외부에서 볼 수 없기 때문입니다.
여기서 변수 선언을 var로 해 봅시다.

JS

{
  var a = 1;
}

console.log(a);

var를 사용하면 블록 범위가 무시됩니다. 따라서 블록 범위 내에서 변수 선언은 let, const로 선언해야합니다. 또 함수 선언도 블록 스코프를 무시해 버리는 특성이 있으므로 블록 스코프내에서의 함수 선언은 아래와 같이 한 번 변수에 격납할 필요가 있습니다.

JS

{
  const b= function (){
    console.log("b is called");
  }
}
b()

이 경우는 const에 한 번 저장하고 있기 때문에 블록 범위 밖에서 참조 할 수 없으므로 오류가 발생합니다. 이번은 단순한 블록으로 설명했지만, 본래는 if문이나 for문으로 사용됩니다.

스코프 체인

스코프 체인이란 스코프가 복수 계층으로, 묶여 있는 상태를 가리킵니다.

JS

let a = 1;
function fn1() {
  let b =1;
  function fn2() {
    let c = 3;
  }
  fn2();
}
fn1();

우선, fn2의 함수는 렉시컬 스코프인 변수 b, a가 참조 가능하게 됩니다.
만약 아래의 코드로 재기록했을 때 콘솔에서는 어떤 값이 취득됩니까?

JS

let a = 1;
function fn1() {
  let a =1;
  function fn2() {
    let a = 3;
    console.log(a);
  }
  fn2();
}
fn1();

대답은 3입니다. 일러스트에서도 확인할 수 있도록 스코프 체인은 실행 스코프에 가까운 것부터 순서대로 값을 찾으러 가기 때문입니다.

참고

Udemy: 【JS】가치에서 배우고 싶은 사람을 위한 JavaScript 메커니즘