자바스크립트 클로저(Closure)란? 2편: 클로저의 활용 예시 - 비공개 멤버와 콜백 함수

1편에서는 클로저가 무엇인지와 클로저가 어떻게 동작하는지에 대해 알아보았습니다.
이번에는 클로저의 다른 중요한 개념인 "비공개 멤버"와 "콜백 함수"에 대해서 알아보겠습니다.

 

비공개 멤버

자바스크립트에서는 객체의 속성과 메서드를 외부에서 직접 접근할 수 있습니다.
하지만 때로는 외부에서 직접 접근할 수 없는 비공개 멤버를 가지는 객체가 필요합니다.
이를 위해 클로저를 사용할 수 있습니다.

예를 들어, 다음과 같이 Counter 함수를 정의해봅시다.

 

function Counter() {
  var count = 0;

  function changeBy(val) {
    count += val;
  }

  return {
    increment: function() {
      changeBy(1);
    },

    decrement: function() {
      changeBy(-1);
    },

    value: function() {
      return count;
    }
  };
}

var counter1 = Counter();
console.log(counter1.value()); // 0

counter1.increment();
console.log(counter1.value()); // 1

counter1.increment();
console.log(counter1.value()); // 2

counter1.decrement();
console.log(counter1.value()); // 1

 

위의 예제에서 Counter 함수는 객체를 반환합니다.
객체는 increment, decrement 및 value 메서드를 가지고 있습니다.
이러한 메서드는 count 변수를 조작하고 반환합니다.

Counter 함수의 내부에는 count 변수가 있습니다.
이 변수는 Counter 함수의 외부에서 직접 접근할 수 없습니다.
대신 객체에서 반환된 메서드만이 count 변수를 조작할 수 있습니다.
이는 클로저를 사용하여 구현됩니다.

 

반응형

콜백 함수

콜백 함수는 자바스크립트에서 매우 중요한 개념 중 하나입니다.
콜백 함수란 다른 함수에서 호출되어 실행되는 함수를 의미합니다.

콜백 함수를 사용하여 비동기 코드를 작성할 수 있습니다.
예를 들어, 다음과 같이 setTimeout 함수를 사용하여 1초 후에 메시지를 출력하는 코드를 작성할 수 있습니다.

 

function showMessage() {
  console.log('Hello, world!');
}

setTimeout(showMessage, 1000);

위의 코드에서 showMessage 함수는 setTimeout 함수에 의해 1초 후에 호출됩니다.

콜백 함수는 클로저와 함께 사용할 때 더욱 강력한 기능을 제공합니다.
콜백 함수는 외부 함수의 변수에 접근할 수 있습니다.
이를 이용하여 함수에 비공개 멤버를 추가하는 방법에 대해 알아보겠습니다.

예를 들어, 다음과 같이 Counter 함수를 정의해봅시다.

 

function Counter() {
  let count = 0;

  this.increment = function() {
    count++;
  }

  this.decrement = function() {
    count--;
  }

  this.getCount = function() {
    return count;
  }
}

위의 예제에서 count 변수는 Counter 함수의 지역 변수로 선언되었습니다.
이 변수는 increment, decrement, getCount 함수에서 사용되는데, 이 함수들은 Counter 함수에서 생성된 객체의 메서드로서 호출됩니다.
즉, count 변수는 Counter 함수에서 생성된 객체의 비공개 멤버가 됩니다.

이처럼 클로저를 이용하여 비공개 멤버를 만드는 방법은 객체 지향 프로그래밍에서 매우 유용하게 사용됩니다.
이를 통해 외부에서 직접 접근할 필요가 없는 내부 변수나 함수를 만들 수 있습니다.

다음으로, 클로저를 이용하여 콜백 함수를 만드는 방법에 대해 알아보겠습니다.
콜백 함수는 비동기식 프로그래밍에서 매우 중요한 역할을 합니다.
예를 들어, 다음과 같이 setTimeout 함수를 사용하여 1초 후에 메시지를 출력하는 함수를 만들어봅시다.

 

function showMessage() {
  console.log("Hello, world!");
}

setTimeout(showMessage, 1000);

위의 예제에서 setTimeout 함수의 두 번째 인자로 showMessage 함수가 전달됩니다.
이때 showMessage 함수는 콜백 함수로 사용되며, setTimeout 함수가 지정한 시간이 경과한 후에 실행됩니다.

이번에는 클로저를 이용하여 콜백 함수를 만들어봅시다.

 

function sayHelloLater(name) {
  let message = `Hello, ${name}!`;

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

  return showMessage;
}

let hello = sayHelloLater("John");
setTimeout(hello, 1000);

위의 예제에서 sayHelloLater 함수는 message 변수를 생성하고, showMessage 함수를 내부에서 정의하여 반환합니다.
이때 showMessage 함수는 클로저를 이용하여 외부 함수의 변수인 message 변수에 접근할 수 있습니다.

이후 hello 변수에 sayHelloLater 함수가 반환한 showMessage 함수를 할당하고, setTimeout 함수에 hello 변수를 전달합니다.
이때 hello 변수는 클로저를 이용하여 sayHelloLater 함수의 message 변수에 접근하며, 1초 후에 "Hello, John!" 메시지가 출력됩니다.

 

setTimeout 함수에 대한 설명을 추가해보겠습니다. setTimeout 함수는 지정된 시간이 지난 후에 콜백 함수를 실행하는 함수입니다.
첫 번째 인자로 실행할 함수를 전달하고, 두 번째 인자로 시간을 전달합니다.
시간은 밀리초 단위로 전달되며, 이 예제에서는 1000밀리초, 즉 1초를 전달하였습니다.

그러면 이제 예시 코드를 실행해볼까요? 결과는 "Hello, John!" 메시지가 1초 후에 콘솔에 출력됩니다.
이때 hello 변수는 sayHelloLater 함수가 종료되더라도 message 변수에 접근할 수 있기 때문에, 클로저의 특징을 잘 나타내고 있습니다.

이와 같이 클로저는 비공개 멤버와 콜백 함수를 만드는데 매우 유용하게 사용됩니다.
클로저를 사용하면 내부 함수에서 외부 함수의 변수를 참조할 수 있기 때문에, 함수의 유효 범위를 효과적으로 제어할 수 있습니다.