🔒자바스크립트 Closure

🔒Closure❓

🧠함수가 선언될 때의 외부 변수들을 기억하는 함수💡

다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우
외부 함수(outerFunction)가 실행을 완료하고 해당 변수가
해당 함수 외부에서 더 이상 액세스 할 수 없는 경우에도
해당 내부 함수는 외부 함수의 변수 및 범위에 액세스 할 수 있음

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log('Outer function: ' + outerVariable);
    console.log('Inner function: ' + innerVariable);
  }
}

const newFunction = outerFunction('outside');

newFunction('inside');

✅ 내부 함수는 외부 함수가 끝나도 외부 변수에 계속 접근할 수 있다 ❗
👉 이게 클로저 🔥

...

let a = 'a'; // ✅ 전역 변수

function functionB() {
  let c = 'c';
  console.log(a, b, c); // ❌ b는 여기서 정의된 적 없음 → 에러
}

function functionA() {
  let b = 'b'; // ✅ functionA 안에서만 쓸 수 있음
  console.log(a, b); // ok, 출력 : a b
  functionB(); // 여기서 functionB 실행!
}

functionA();

🙋‍♀️ 왜 b is not defined 에러가 뜨냐면 ❓

functionB()는 functionA() 안에
"정의"된 게 아니라 그냥 "호출"만 된 거임
👉 functionB의 스코프는 오직 자기 자신 + 전역 변수만 접근 가능⭕

b는 functionA 안에서만 쓸 수 있는 지역 변수라
functionB에서는 보이지 않음

🔑 핵심 포인트

자바스크립트는 "함수를 어디서 호출했는가"가 아니라,
"어디서 정의했는가"에 따라 스코프가 결정됨🤩

👇

이걸 클로저로 바꾸려면 functionB를 functionA 안에 중첩해서 정의해주면됨
이렇게 하면 functionB는 functionA의 지역 변수인 b도 접근할 수 있음🙆‍♀️

let a = 'a'; // ✅ 전역 변수

function functionA() {
  let b = 'b'; // ✅ functionA의 지역 변수

  function functionB() {
    let c = 'c'; // ✅ functionB의 지역 변수
    console.log(a, b, c); // ✅ 모두 접근 가능!
  }

  console.log(a, b); // 출력: a b
  functionB(); // 출력: a b c
}

functionA();

a b
a b c

내부함수는 외부함수의 실행이 끝나더라도
외부함수에 있는 해당 변수를 참조할 수 있게되는 것😎