자바스크립트에서의 Closure 에 대해서 알아보자..

heauchi·2024년 8월 1일

JavaScript closure

When I Was Mentee - Front

목록 보기

14/21

closure?

자바스크립트에서 함수가 선언된 어휘적 환경을 기억하고 접근할 수 있는 기능을 클로저라고 한다. 클로저는 함수가 생성될 때의 스코프와 그 내부 변수들에 대한 참조를 유지한다.

자바스크립트에서 클로저는 함수 생성 시 함수가 생성될 때마다 생성된다.

tmi

클로저라는 이름은 수학과 람다 계산법에서 유래했다. 람다 계산법에서 클로저는 함수와 그 함수가 선언된 환경의 조합을 나타낸다. 이 개념이 프로그래밍 언어에 도입되면서, 함수와 그 함수가 선언된 어휘적 환경(lexical environment)을 함께 캡슐화(closing over)하는 특성을 지닌다는 의미에서 클로저(closure)라고 부르게 되었다.

클로저는 함수가 생성될 때의 환경을 "닫아" 둔다고 해서 붙여진 이름이다. 함수가 생성된 시점의 환경을 기억하고, 그 환경 내의 변수들에 접근할 수 있도록 하는 것이 클로저의 핵심이다.

closure는 다음과 같은 이유로 인해 사용된다.

데이터 은닉과 캡슐화

자바스크립트에서는 합수 내부의 변수를 외부에서 접근할 수 없도록 보호해야 할 때가 있는데, 일반적인 함수 호출로는 이를 구현하기 어렵다. 예를 들어서, 어떤 값이 외부에 노출되지 않으면서도 그 값을 조작할 수 있는 방법이 필요할 때가 있다.

closure를 사용해서 문제를 해결해보자.

클로저기법 사용하여 함수 내부에서 변수를 선언하고, 그 변수를 조작하는 함수를 반환함으로써 외부에서 접근할 수 없게 한다.
function createCounter() {
  let count = 0; // 외부에서 접근할 수 없는 변수
  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.getCount());  // 1
여기서 count 변수는 createCounter 함수 외부에서는 접근할 수 없으며, 반환된 객체의 메서드를 통해서만 조작할 수 있다.

상태 유지

함수가 호출될 때마다 새로운 변수를 생성하고 초기화하는 상황에서 특정 함수 호출 간의 상태를 유지해야 할 때가 있다. 예를 들어, 여러 번 호출할 때 상태를 기억하고 싶을 때가 있다.

closure를 사용해서 문제를 해결해보자.

closure 기법을 사용해서 함수가 호출된 이후에도 변수를 유지할 수 있다.
function makeCounter() {
  let count = 0; // 함수가 호출된 이후에도 유지되는 변수
  return function() {
    count++;
    return count;
  }
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
여기서 count 변수는 makeCounter 함수가 반환한 함수가 호출될 때마다 증가하며, 함수 호출 간의 상태를 유지한다.

비동기 처리와 콜백 함수

비동기 작업이 많은 자바스크립트에서는 비동기 함수가 완료될 때까지 특정 상태나 값을 유지해야 할 때가 있다. 예를 들어, 타이머나 AJAX 요청의 콜백 함수 내에서 특정 변수에 접근하고자 할 때가 있다.

closure를 사용해서 문제를 해결해보자.
function setup() {
  let message = 'Hello, World!';
  setTimeout(function() {
    console.log(message);
  }, 1000);
}
setup(); // 1초 후 'Hello, World!' 출력
여기서 setTimeout에 전달된 함수는 setup 함수가 종료된 이후에도 message 변수에 접근할 수 있다.