[JavaScript] 클로저 | 정의, 동작원리, 데이터은닉, 비동기작업

 

클로저의 정의

 클로저란 내부 함수가 외부 함수의 변수에 접근할 수 있는 기능이다. 다른 말로, 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합이다. 이로 인해 클로저는 변수의 값이 사라져도 그 값을 기억할 수 있다.

 

 

 

 

클로저의 동작 원리

function outer() {
  let count = 0;
  
  function inner() {
    count++;
    console.log(count);
  }
  
  return inner;
}

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

 위 예제에서 outer 함수는 inner 함수를 반환한다. inner 함수는 count 변수에 접근하고 수정할 수 있는 클로저이다. 이로 인해 counter 변수에 할당된 함수를 호출할 때마다 count 변수의 값이 유지되고 증가한다.

 

• 스코프(Scope) : 변수의 영역 및 접근성을 결정하는 범위
• 스코프 체인(Scope Chain) : 스코프들의 계층 구조, 변수를 전역 스코프까지 찾지 못하면 ReferenceError가 발생
• 렉시컬 환경(Lexical Environment) : 코드가 실행되는 동안 스코프와 식별자를 유지

위의 세가지 개념이 클로저를 동작하게 한다.

 

 

 

 

데이터 은닉

클로저를 사용하면, 변수에 직접 접근하는 것을 차단하고 간접적인 방식으로만 허용하여 데이터를 은닉할 수 있다.

반응형

function counter(value) {
  return {
    increase: function() {
      value++;
    },
    decrease: function() {
      value--;
    },
    // 이 부분이 클로저입니다.
    get: function() {
      return value;
    },
  };
}

var myCounter = counter(0);

console.log(myCounter.get()); // 0
myCounter.increase();
console.log(myCounter.get()); // 1
myCounter.decrease();
console.log(myCounter.get()); // 0

위 예시에서 get 메서드는 increment 메서드나 decrement 메서드와 달리 value 값을 변경하지 않는다. 대신 외부에서 value 값에 접근하는 것을 가능하게 하며, 이것이 클로저의 역할인 것이다. 따라서 value 값은 private한 상태로 보호된다.

 

 

 

 

 

비동기 작업에 대한 참조 저장

클로저는 이벤트 처리기나 setTimeout, setInterval과 같은 비동기 작업에서 참조를 저장하는 데 유용하다.

* 비동기 작업: 웹 애플리케이션에서 요청을 보내고 그에 따른 응답이 오기를 기다리지 않고, 다음 작업을 수행하는 것/웹 애플리케이션에서 데이터를 로드하는 동안 다른 작업을 처리할 수 있으므로, 사용자는 데이터 로딩이 완료될 때까지 기다리지 않아도 되며 사용자 경험을 향상.

function delayedGreet(name, delay) {
  setTimeout(function () {
    console.log(`Hello, ${name}`);
  }, delay);
}

delayedGreet('John', 1000); // 1초 후에 'Hello, John' 출력