자바스크립트에서 클로저를 사용하면 함수 내에서 선언한 변수를 외부에서도 사용할 수 있습니다. 이는 변수를 다른 함수에서도 공유할 수 있게 해줍니다.

function outerFunction() {
  let sharedVariable = 10;

  function innerFunction() {
    console.log(sharedVariable);
  }

  return innerFunction;
}

const myFunction = outerFunction();
myFunction(); // 출력 결과: 10

위 예제에서 innerFunction은 sharedVariable을 사용할 수 있습니다. outerFunction이 실행될 때 sharedVariable이 메모리에 유지됩니다. 이후에 myFunction을 호출하여 sharedVariable을 참조할 수 있습니다.

이러한 클로저를 이용하면 상태를 유지하고 변수를 안전하게 은닉할 수 있습니다.

클로저 활용 예시

클로저는 비동기 작업, 콜백 함수, 프라이빗 변수 등 다양한 상황에서 활용됩니다. 아래는 클로저가 사용된 몇가지 예시입니다.

반복문과 클로저

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

위 예제에서는 setTimeout 안에서 i값을 출력하는데, i값은 setTimeout이 실행될 때의 값(3)으로 공유됩니다. 이를 해결하기 위해서는 클로저를 사용할 수 있습니다.

for (let i = 0; i < 3; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, 1000);
  })(i);
}

위 예제에서 즉시실행함수(IIFE)를 사용하여 클로저를 구현하여 setTimeout을 호출할 때 i값이 유지되도록 합니다.

모듈 패턴

const myModule = (function() {
  let privateVariable = 10;

  function privateFunction() {
    // ...
  }

  return {
    publicFunction: function() {
      console.log(privateVariable);
    }
  };
})();

myModule.publicFunction(); // 출력 결과: 10

위 예제에서 myModule은 클로저를 사용하여 privateVariable에 접근 가능한 publicFunction 함수를 반환합니다.

클로저를 이용하면 변수를 안전하게 은닉하고 다른 함수에서 공유할 수 있어 상태 유지나 정보 은닉에 유용하게 활용할 수 있습니다.

결론

자바스크립트에서 클로저를 사용하여 변수를 공유하면 상태를 유지하고 안전하게 은닉할 수 있습니다. 클로저는 다양한 상황에서 활용될 수 있으며, 비동기 작업이나 모듈 패턴 등에서 유용하게 사용될 수 있습니다.