▪︎ 스코프란?

모든 식별자(변수, 함수, 클래스 등)는 자신이 선언된 위치에 따라 참조할 수 있는 유효 범위(scope)가 결정된다. 이를 스코프라고 하며, 크게 전역 스코프와 지역 스코프로 나눌 수 있다.

구분	설명	스코프	변수 종류
전역	코드의 가장 바깥 영역	전역 스코프	전역 변수
지역	함수나 블록 내부	지역 스코프	지역 변수

---

▫︎ 전역 스코프

• 코드의 가장 바깥 영역에 선언된 변수는 어디서든 전역적으로 참조 가능하다.
• 예를 들어 함수 바깥에서 선언된 변수는 모든 함수 내부에서 사용할 수 있다.

▫︎ 지역 스코프

• 지역 변수는 자신이 선언된 지역과 하위 지역에서만 참조할 수 있다.
• 즉, 특정 함수나 블록 내부에서 선언된 변수는 그 범위 내에서만 유효하다.

예시 설명:

• outer 함수 내부에서 선언된 z 변수는 지역 변수이며,
  • outer 함수 내부와 그 하위 지역인 inner 함수에서도 참조할 수 있다.
  • 하지만 전역 스코프에서는 참조할 수 없기 때문에 참조 에러가 발생한다.
• inner 함수 내부에서 선언된 x 변수는 inner 함수 안에서만 참조할 수 있다.
  • 전역 스코프 또는 outer 함수에서는 참조할 수 없으며, 참조 시 에러가 발생한다.

▫︎ 스코프 체인

• 스코프는 함수의 중첩 구조에 따라 계층적으로 형성된다.
• 자바스크립트 엔진은 변수를 참조할 때 자신의 스코프에서 시작하여 상위 스코프 방향으로 올라가며 식별자를 검색한다.
• 이를 스코프 체인이라고 하며, 다음과 같은 특징이 있다:
  • 하위 스코프에서는 상위 스코프의 변수를 자유롭게 참조할 수 있다.
  • 반대로 상위 스코프에서는 하위 스코프의 변수에 접근할 수 없다.

▫︎ 코드의 문맥과 환경: 렉시컬 환경 & 실행 컨텍스트

• 렉시컬 환경: 코드가 어디에서, 어떤 문맥에서 선언되었는지를 의미하며, 스코프의 기반이 된다.
• 실행 컨텍스트는 이러한 렉시컬 환경을 구현한 개념으로, 코드가 평가되고 실행되는 환경이다.

▫︎ 식별자란?

• 식별자는 변수, 함수, 클래스 등의 이름을 나타내는 고유한 문자열이다.
• 동일한 스코프 내에서는 중복될 수 없으며, 하나의 값은 하나의 식별자에만 연결되어야 한다.

▫︎ var, let, const의 스코프 차이

🔹 블록 레벨 스코프 (let, const)

• let과 const는 코드 블록({})을 기준으로 스코프가 생성된다.
• if, for, while, try/catch 등 모든 코드 블록 내에서 유효한 스코프를 블록 레벨 스코프라 부른다.
• 동일한 스코프 내에서 중복 선언이 허용되지 않는다.

function bar() {
  let x = 1;
  let x = 2; // ❌ SyntaxError: Identifier 'x' has already been declared
}
bar();

🔹 함수 레벨 스코프 (var)

• var는 오직 함수 코드 블록만을 지역 스코프로 인식한다.

• 블록(if, for 등) 안에서 선언해도 함수 전체에서 접근 가능하다.

• 동일한 스코프 내에서 중복 선언이 허용되며, 의도치 않게 변수값이 덮어쓰일 수 있다.

function example() {
  var y = 1;
  var y = 2; // ✅ 가능하지만 예기치 않은 동작을 유발할 수 있음
  console.log(y); // 2
}
example();