클로저(Closure)

🎯 클로저(Closure)는 함수 안의 함수에서 생기는 관계입니다. 주로 외부에서 내부에 접근할 수 없도록 보호하기 위해 사용됩니다.

클로저

함수가 선언될 때의 렉시컬 환경을 기억하는 기능을 말합니다. 이를 통해서 외부 스코프의 변수에 접근할 수 있게 됩니다.

렉시컬 환경(Lexical Environment)

변수나 함수가 선언된 위치에 따라 범위를 정하는 방식이다.
즉, 어디서 호출되는지 보다 어디에서 선언되었는지에 따라 값이 결정된다.

let message = "I am global!"; 

function sayMessage() {
  console.log(message); 
}

function checkScope() {
  let message = "I am local!"; 
  sayMessage();
}

sayMessage(); // "I am global!"
checkScope(); // "I am global!"

• sayMessage()는 전역 스코프에서 선언되었기 때문에 전역 스코프의 message를 참조합니다.
• checkScope() 안의 sayMessage 또한 전역 스코프에서 선언되었기 때문에 전역 스코프의 변수를 참조합니다. 내부의 message는 지역 변수로 연결되지 않습니다.

클로저 예시

function outer() {
    let outerVar = "I'm an outer variable!";
    
    function inner() {
        console.log(outerVar); // outer 렉시컬 스코프를 기억함 
    }
    
    return inner;
}

const closure = outer(); // outer 실행이 끝났지만, inner 함수와 outerVar가 클로저로 남음
closure(); // "I'm an outer variable!"

outer를 실행했지만, inner함수에는 outerVar에 대한 기억이 있기 때문에 closure를 실행했을 때 정상적으로 값이 출력되는 것을 알 수 있습니다.

클로저의 필요성

1. 데이터 은닉🔒

function createPassword() {
  let password = "12345678"; // 은닉된 데이터

  return {
    
    getPassword() {
      return password;
    },
    
    setPassword(newPassword) {
      if (newPassword.length >= 8) {
        password = newPassword;
        console.log("Password updated!");
      } else {
        console.log("Password must be at least 8 characters.");
      }
    },
  };
}

const password = createPassword();

console.log(password.getPassword()); // "12345678"
password.setPassword("1234"); // "Password must be at least 8 characters."
password.setPassword("87654321"); // "Password updated!"
console.log(password.getPassword()); // "87654321"

2. 상태 유지🔄

function createCounter() {
  let count = 0; 

  return {
    increment() {
      count++;
      console.log(`Current count: ${count}`);
    },
    getCount() {
      return count; 
    }
  };
}

const counter = createCounter();
counter.increment(); // Current count: 1
console.log(counter.getCount()); // 1

레퍼런스
https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
🎥 https://www.youtube.com/watch?v=6Ixyltr8_R0&t=127s