1. Scope란?

🛰️ 자바스크립트 함수가 실행되는 과정

자바스크립트에서 함수가 실행되는 과정을 간략하게 설명하자면, '함수가 실행될 때 각 스코프에 해당하는 실행 컨텍스트가 콜스택에 쌓인다' 라고 표현할 수 있다.

이 문장을 이해하기 위해 알아야 할 개념이 스코프(Scope)와 실행 컨텍스트(Execute Context)인데 우선 스코프에 대해 정리해보자.

🎪 Scope

스코프란 단어의 뜻 그대로 '범위'라는 의미를 가지고있다. 코드에서의 스코프는 '변수에 접근할 수 있는 범위'라고 보면 된다.

자바스크립트의 스코프는 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나눌 수 있다.

전역 스코프(Global Scope): 자바스크립트 코드의 최상위 레벨에 해당하는 스코프로 함수 어디에서든 접근이 가능하다.

지역 스코프(Local Scope) :특정 함수에 해당하는 스코프로 해당 함수 자신과 하위 함수에서만 자원에 접근이 가능하다.

블록 스코프:
{}로 묶인 블록 내에서 선언된 변수는 해당 블록 안에서만 접근 가능 (예: let, const)

렉시컬 스코프: 변수의 범위는 코드 작성 시(정적) 결정되며, 호출 위치가 아닌 선언 위치에 따라 스코프를 결정

여기서 코드의 최상위 레벨, 즉 전역에서 변수를 선언하면 그 변수는 전역 변수이므로 global scope에 속하는 거라고 생각이 들지만 한가지 유의해야 할 점이 있다.

1. 전역스코프

전역 스코프 = 집 전체, 집 어디에서나 물건을 사용할 수 있는 상태

예) 집 안에 공용으로 두는 시계가 있다고 가정하자. 가족 누구나 모든 방에서 이 시계를 사용할 수 있다.

let clock = "Wall Clock"; // 전역 변수

function livingRoom() {
  console.log(clock); // "Wall Clock"
}

function kitchen() {
  console.log(clock); // "Wall Clock"
}

livingRoom();
kitchen();

2. 함수 스코프 (Function Scope)

함수 스코프 = 방 안에만 보이는 물건

방(함수) 안에서만 사용 가능하고, 다른 방에서는 보이지 않는다고 생각하면 됨.

예) 거실에 있는 소파는 거실에서만 보이고 사용할 수 있다. 다른 방에서는 보이지 않음.

function livingRoom() {
  let sofa = "Sofa";
  console.log(sofa); // "Sofa"
}

livingRoom();
console.log(sofa); // Error: sofa is not defined

3. 블록 스코프 (Block Scope)

블록 스코프 = 서랍 안에 넣어둔 물건

서랍(블록 {}) 안에서만 보이고, 밖에서는 볼 수 없다.

예) 거실의 서랍에 숨겨 둔 리모컨은 서랍을 열었을 때만 사용할 수 있다.

if (true) {
  let remote = "Remote Control";
  console.log(remote); // "Remote Control"
}

console.log(remote); // Error: remote is not defined

4. 렉시컬 스코프 (Lexical Scope)

렉시컬 스코프는 방에서 찾을 수 없으면 집 전체를 뒤지는 것과 같다.

안쪽에서 선언되지 않은 변수를 찾으면, 바깥(상위 스코프)에서찾는다.

예) 거실에서 물건을 못 찾으면 주방, 현관 등 집 전체를 찾아본다.

let light = "Ceiling Light";

function livingRoom() {
  console.log(light); // "Ceiling Light"
}

livingRoom();

5. 중첩 스코프

방 안에 서랍이 있는 경우, 서랍 속 물건은 방 안에서는 보이지만, 집 전체에서는 보이지 않는다.

예) 방 안에 있는 노트와 서랍 속 펜.

function livingRoom() {
  let note = "Notebook";
  
  if (true) {
    let pen = "Pen";
    console.log(note); // "Notebook" (상위 스코프에서 가져옴)
    console.log(pen); // "Pen"
  }

  console.log(pen); // Error: pen is not defined
}

livingRoom();

전역 스코프: 집 전체에서 사용 가능.

함수 스코프: 특정 방에서만 사용 가능.

블록 스코프: 특정 서랍에서만 사용 가능.

렉시컬 스코프: 안쪽에서 못 찾으면 바깥으로 나가며 찾음.