자바스크립트 클로저(Closure)란? 1편: 클로저 개념과 예시 코드

클로저(Closure)란 무엇인가?

자바스크립트에서 클로저는 매우 중요한 개념 중 하나입니다.
클로저는 내부 함수가 외부 함수의 변수와 매개변수에 접근할 수 있는 것을 말합니다.
즉, 내부 함수가 생성된 시점에서 외부 함수의 변수와 매개변수를 기억하고 있는 것입니다.
이렇게 기억된 변수와 매개변수는 내부 함수가 호출될 때 사용됩니다.

 

클로저의 예시

아래의 예시 코드를 보면서 클로저를 이해해보도록 하겠습니다

function outerFunction(x) {
  function innerFunction(y) {
    console.log(x + y);
  }
  return innerFunction;
}

let newFunction = outerFunction(5);
newFunction(3); // 결과: 8

위의 코드에서 outerFunction은 내부 함수인 innerFunction을 반환합니다.
그리고 반환된 innerFunction은 newFunction 변수에 할당됩니다. 이제 newFunction 변수를 통해 innerFunction을 호출할 수 있습니다.
innerFunction에서는 x 변수를 사용하는데, 이 변수는 이미 outerFunction의 실행이 끝난 후에도 기억됩니다.
이것이 클로저의 개념입니다.

 

반응형

클로저의 활용

클로저는 매우 강력한 개념으로, 다양한 방법으로 활용될 수 있습니다.
대표적인 예시로는 함수 팩토리(Function Factory)와 비동기 처리(Asynchronous Processing)가 있습니다.

함수 팩토리는 함수를 생성하는 패턴 중 하나로, 클로저를 이용해서 함수를 생성하고 반환할 수 있습니다.
이렇게 생성된 함수는 클로저에 의해 생성 시점에서의 환경을 기억하고 있기 때문에, 함수가 반환된 후에도 환경 정보를 유지할 수 있습니다.

비동기 처리에서는 클로저를 이용해서 비동기적으로 처리된 데이터를 기억하고 관리할 수 있습니다.
예를 들어, Ajax 요청을 통해 가져온 데이터를 처리하는 경우 클로저를 이용해서 데이터를 처리하는 함수를 만들어 둘 수 있습니다.
그리고 이 함수는 클로저에 의해 데이터를 기억하고 있기 때문에, 데이터가 도착했을 때 즉시 처리할 수 있습니다.

 

 

클로저를 활용한 private 변수 구현

function Counter() {
  let count = 0;
  
  function increase() {
    count++;
    console.log(count);
  }
  
  return increase;
}

const counter = Counter();
counter(); // 1
counter(); // 2
counter(); // 3

위 예제에서 Counter 함수는 내부에서 count 변수를 정의하고, increase 함수를 반환합니다.
increase 함수는 count 변수를 참조하고 있으며, 이를 통해 count 변수에 접근할 수 있습니다.

그리고 Counter 함수가 반환하는 increase 함수를 counter 변수에 할당한 후, 이 함수를 세 번 호출하면서 count 변수의 값을 증가시키고 있습니다.
결과적으로 콘솔에는 1, 2, 3이 출력됩니다.

이 예제에서 count 변수는 Counter 함수 내에서 정의되었으며, increase 함수 내에서만 접근할 수 있습니다.
외부에서는 count 변수에 접근할 수 없으므로, 이를 private 변수로 구현한 것입니다.

결론적으로, 클로저는 자바스크립트에서 매우 중요한 개념 중 하나입니다. 클로저를 사용하면 함수 내부에서 정의한 변수를 외부에서 접근할 수 없게 만들거나, 함수를 리턴하는 다른 함수를 작성하거나, 비동기적인 동작을 수행하는 함수를 작성할 수 있습니다.
이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다.

다음 편에서는 클로저를 사용하는 예제를 더욱 다양하게 살펴보겠습니다.