js

✅ 7. 스코프와 클로저 이해

📌 요약 설명

이 단원에서는 JavaScript에서 매우 중요한 개념인 스코프(Scope)와 클로저(Closure)를 학습합니다. 스코프는 변수가 어디서 유효한지를 결정하고, 클로저는 함수가 외부 변수에 접근할 수 있게 해주는 원리입니다. 코드를 이해하고 유지보수하는 데 핵심이 되는 개념이므로, 예제와 함께 꼼꼼히 이해해야 합니다.

🧭 7.1 스코프(Scope)란?

개념 정리

스코프는 변수에 접근할 수 있는 범위를 의미합니다. JavaScript에서는 크게 전역 스코프와 지역 스코프로 나눌 수 있습니다.

let a = 10; // 전역 변수

function showNumber() {
  let b = 5; // 지역 변수
  console.log(a); // 가능
  console.log(b); // 가능
}

showNumber();
console.log(b); // 오류 (b는 지역 변수이기 때문에 함수 밖에서는 사용 불가)

🧩 7.2 블록 레벨 스코프

let, const는 블록 레벨 스코프를 가지며, var는 함수 레벨 스코프만 가집니다.

if (true) {
  let x = 10;
  var y = 20;
}
console.log(x); // 오류
console.log(y); // 20

🔁 7.3 중첩 함수와 스코프 체인

let outerVar = '밖';

function outer() {
  let innerVar = '안';

  function inner() {
    console.log(outerVar); // '밖'
    console.log(innerVar); // '안'
  }

  inner();
}

outer();

🧠 7.4 클로저(Closure)란?

개념 정리

클로저는 함수가 자신이 선언된 렉시컬 환경(Lexical Environment)을 기억하는 것을 의미합니다. 즉, 함수가 외부 함수의 변수에 접근할 수 있는 현상을 말합니다.

function outer() {
  let count = 0;

  return function inner() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 1
counter(); // 2

🔒 7.5 클로저의 실용 예시

상태 유지 예제

function createCounter() {
  let num = 0;

  return function () {
    num++;
    return num;
  };
}

const countUp = createCounter();

console.log(countUp()); // 1
console.log(countUp()); // 2
console.log(countUp()); // 3

🧠 마무리