스코프(Scope) / 스코프 체인(Scope Chain)

🎯 스코프(Scope)는 변수의 활동 범위입니다. 주로 외부에서 내부에 접근할 수 없도록 보호하기 위해 사용됩니다.

스코프

1. 전역 스코프(Global Scope)

가장 바깥에 선언된 변수나 함수는 전역 스코프에 포함됩니다. 어디에서나 접근 가능한 영역입니다.

let globalVar = "I am global!";

function printGlobal() {
  console.log(globalVar); // "I am global!"
}

printGlobal(); 
console.log(globalVar); // "I am global!"

2. 지역 스코프(Local Scope) = 함수 스코프(Function Scope)

함수 안에서 선언된 변수는 지역/함수 스코프에 포함됩니다.

function localScopeExample() {
  let localVar = "I am local!";
  console.log(localVar); // "I am local!"
}

localScopeExample();
console.log(localVar); // ReferenceError: localVar is not defined

3. 블록 스코프(Block Scope)

블록, {} 안에서 선언되는 변수는 블록 스코프에 포함됩니다.

❗ 지역 스코프와의 차이

function testScope() {
  if (true) {
    let blockScoped = "I am block!";
    console.log(blockScoped); // "I am block!"
  }
  console.log(blockScoped); // ReferenceError: blockScoped is not defined
}
testScope();

4. 모듈 스코프(Module Scope)

특정한 모듈 내에서 선언되는 변수, 함수, 클래스는 모듈 스코프에 포함됩니다.
export 하고 import하는 방식으로 모듈 밖에서 접근 가능합니다.

// file1.js
const age = 40;
export function getAge() {
  return age;
}

// main.js
import { getAge } from './file1.js';
console.log(getAge()); // 40
console.log(age); // ReferenceError: d is not defined

모듈이란?
비슷한 기능을 하는 변수, 함수, 클래스 등을 하나로 묶어 놓은 것이 모듈입니다. 모듈을 통해 같은 이름의 변수나 함수가 다른 파일과 충돌하지 않으며, 한 번 작성된 코드를 재사용할 수 있기 때문에 매우 효율적입니다.

스코프 체인 🔗

스코프가 계층적으로 연결된 구조를 말합니다. 내부에서 찾을 수 없는 변수나 함수를 스코프 체인을 따라 한 단계씩 밖으로 나가며 찾게됩니다.

const name = "eunmi";

function outer() {
	const age = 24;
  
 	function inner() {
    	console.log(`저의 이름은 ${name}이고, 나이는 ${age}입니다.`);
    }
    inner();

}
outer();

• inner 함수에는 name과 age의 값이 없었지만 스코프 체인에 따라 outer 함수에서 age, global 스코프에서 name을 찾을 수 있습니다.

• 이 과정은 실행 컨텍스트에 의해 관리됩니다. 실행 컨텍스트는 함수가 호출될 때 생성되며, 각 함수는 자신의 렉시컬 환경을 기준으로 스코프 체인을 따라 변수와 함수를 검색합니다.

스코프 체인: inner → outer → global

총정리

let globalArray = [1, 2, 3]; // 전역 스코프

function scopeExample() {
  let localObject = { name: "John", age: 30 }; // 지역 스코프
  
  if (true) {
    let blockArray = [4, 5, 6]; // 블록 스코프
    console.log(globalArray); // 전역 배열: [1, 2, 3]
    console.log(localObject); // 지역 객체: { name: "John", age: 30 }
    console.log(blockArray); // 블록 배열: [4, 5, 6]
  }

  console.log(localObject); // 지역 객체 접근 가능
  console.log(globalArray); // 전역 배열: [1, 2, 3]
  console.log(blockArray); // 👻에러: blockArray is not defined
}

scopeExample();

console.log(globalArray); // 전역 배열: [1, 2, 3]
console.log(localObject); // 👻에러: localObject is not defined

---

참고 사이트
https://developer.mozilla.org/ko/docs/Glossary/Scope
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules#introducing_an_example
✨JavaScript Visualized - Scope Chain : https://jwlee.dev/js-visualized/scope-chain/