JavaScript 스코프와 클로저

🔍 자바스크립트의 스코프와 클로저 – 이해하면 진짜 고수!

오늘은 개발자들 사이에서 종종 "헷갈려서 머리 쥐어뜯는" 주제, 스코프(scope)와 클로저(closure)에 대해 확실하게 정리해 봅니다.

🧭 1. 스코프(Scope): 변수의 '활동 범위'

스코프는 변수가 어디서 선언되고, 어디까지 접근 가능한지를 결정합니다. 자바스크립트에는 크게 두 가지 스코프가 있어요.

• 전역 스코프(Global Scope) – 함수 밖에서 선언된 변수
• 지역 스코프(Local Scope) – 함수 안에서 선언된 변수

let a = "밖";

function test() {
  let b = "안";
  console.log(a); // '밖' 접근 가능
  console.log(b); // '안'
}

test();
console.log(b); // ❌ 에러! 'b'는 함수 안에서만 접근 가능

🧠 요약: let, const는 블록 스코프! var는 함수 스코프! 기억해 둬야 돼요!

🎯 2. 클로저(Closure): 함수 안에서 함수를 만드는 마법!

클로저는 함수가 자신이 선언된 시점의 환경(스코프)을 기억하는 능력입니다. 즉, 함수가 함수 안에 있고, 내부 함수가 외부 함수의 변수에 접근할 수 있는 거죠!

function outer() {
  let counter = 0;

  function inner() {
    counter++;
    console.log(counter);
  }

  return inner;
}

const count = outer(); 
count(); // 1
count(); // 2
count(); // 3

👀 여기서 inner는 outer가 끝났는데도 불구하고 counter 값을 기억하고 있어요. 이게 바로 클로저의 핵심입니다!

💡 한 줄 요약: 클로저 = "함수가 선언될 당시의 스코프를 기억하는 함수"

🔥 클로저는 어디에 쓰일까?

• 비공개 변수 만들기 (정보 은닉)
• 함수 팩토리 만들기
• 이벤트 핸들러 안에서 상태 유지

📌 실전 예제: 클릭 수 세는 버튼

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(`클릭 횟수: ${count}`);
  };
}

const buttonClick = createCounter();

document.querySelector("#btn").addEventListener("click", buttonClick);

#btn을 누를 때마다 count가 1씩 증가하면서도 외부에 노출되지 않아요. 이게 클로저의 진짜 매력✨