Mingyu Kim

Scope

스코프(Scope)는 “변수가 접근 가능하고 유효한 영역”을 의미한다. JavaScript 엔진이 특정 변수를 찾을 때, 어디까지 검색해야 하는지를 정의하는 규칙이라고 생각할 수 있다.

크게 전역 스코프와 지역 스코프가 있다.

전역 스코프 (Global Scope)

• 정의: 코드의 어느 곳에서든 접근할 수 있는 최상위 레벨의 영역
• 특징: 전역 스코프에 선언된 변수(전역 변수)는 애플리케이션이 종료될 때까지 메모리에 남아 있음
• 주의: 전역 변수를 너무 많이 사용하면 다른 코드와의 충돌 위험이 커지고, 메모리 관리 측면에서 비효율적

지역 스코프 (Local Scope)

• 정의: 특정 영역 내에서만 접근 가능한 영역. 지역 스코프 내에서 선언된 변수(지역 변수)는 해당 스코프를 벗어나면 접근할 수 없음
• 특징: 지역 스코프는 크게 함수 스코프와 블록 스코프로 나뉨

함수 스코프 (Function Scope)

• 키워드: 주로 var
• 정의: 함수가 호출될 때 생성되는 스코프. 함수 내부 전체에서만 유효하며, 함수 바깥에서는 접근할 수 없음
• 특징: var는 if문이나 for문 같은 블록({})을 무시하고, 오직 함수 레벨에서만 스코프를 형성

function calculate() {
  var a = 10; // 함수 스코프
  if (true) {
    var b = 20; // 여전히 함수 스코프 내부에 존재
    console.log(b); // 20
  }
  console.log(b); // 20 (if 블록 밖이지만 함수 내이므로 접근 가능)
}

// console.log(a); // 에러: 함수 밖에서는 a에 접근 불가능

블록 스코프 (Block Scope)

• 키워드: let, const
• 정의: 중괄호({})로 묶인 코드 블록 내에서만 유효한 스코프. 함수, if문, for문, while문 등의 중괄호가 모두 블록 스코프를 만듦
• 특징: 블록을 벗어나면 변수에 접근할 수 없음. 이는 코드의 예측 가능성을 높이고, 변수 이름 충돌을 줄여줌

function checkScope() {
  let c = 30; // 함수 스코프 겸 외부 블록 스코프
  if (true) {
    let d = 40; // if문 블록 스코프
    console.log(c); // 30 (외부 스코프 접근 가능)
  }
  // console.log(d); // 에러: d는 if 블록 스코프 밖에서는 접근 불가능
}

중첩 스코프와 렉시컬 스코프 (Lexical Scope)

JavaScript는 렉시컬 스코프(Lexical Scope) 규칙을 따른다. 이는 정적 스코프(Static Scope)라고도 불린다.

렉시컬 스코프 정의

• 함수가 어디서 호출되었는지가 아니라 어디에 선언되었는지에 따라 변수의 스코프가 결정되는 방식
• 코드를 작성하는 순간(어휘적, Lexical)에 이미 스코프 구조를 결정

스코프 체인 (Scope Chain)

• JavaScript 엔진이 특정 변수에 접근하려고 할 때, 현재 스코프부터 시작하여 바깥 스코프 방향으로 차례대로 검색해 나가는 것
• 변수를 찾으면 검색을 중단하고, 최상위(전역) 스코프까지 갔는데도 변수를 찾지 못하면 ReferenceError를 발생

const globalVar = "전역 변수"; // 1. 전역 스코프

function outerFunction() {
  const outerVar = "외부 함수 변수"; // 2. outerFunction 스코프

  function innerFunction() {
    const innerVar = "내부 함수 변수"; // 3. innerFunction 스코프

    // 3번 스코프에서 2번, 1번 변수 모두 접근 가능
    console.log(innerVar); // 접근 가능 (자신의 스코프)
    console.log(outerVar); // 접근 가능 (바깥 스코프)
    console.log(globalVar); // 접근 가능 (최상위 스코프)
  }

  innerFunction();
  // console.log(innerVar); // 에러: 안쪽 스코프의 변수에는 접근 불가능
}

outerFunction();

let과 const를 사용해야 하는 이유

let과 const가 제공하는 블록 스코프는 다음과 같은 이점을 제공

키워드	스코프 유형	장점
var	함수 스코프	유연하지만, 스코프 범위가 넓어 예상치 못한 값 변경 및 충돌 위험이 높음.
let, const	블록 스코프	스코프 범위가 좁아 변수가 필요한 곳에서만 사용되어 변수 관리 용이성과 코드 안정성이 높아짐.