클로저(closure)

김기범·2023년 4월 25일
0

JS-Study

목록 보기
11/11

클로저

클로저(closure)는 내부함수가 외부함수에 접근할 수 있는 것을 가르킨다.

내부함수

자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있다. 아래는 5가 찍힐것이다.

function outter() {
    function inner() {
      const num = 5;
      console.log(num);
    }
    inner();
  }
  outter(); // 5

위의 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있다. 함수 inner를 내부 함수라고 한다.

내부함수는 외부함수의 지역변수에 접근할 수 있다. 아래의 예제를 보자. 마찬가지로 결과는 5이다.

  function outter() {
    const num = 5;
    function inner() {
      console.log(num);
    }
    inner();
  }
  outter(); // 5

위의 예제는 내부함수 inner에서 num을 호출 했을때 외부함수인 outter의 지역변수에 접근할 수 있음을 알수있다.


클로저

클로저(closure)는 내부함수와 밀접한 관계를 가지고 있다. 내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다.

즉, 함수가 정의되었던 위치에서 상위 스코프(outter)식별자를 기억하고 있는 형태이다.
아래는 클로저의 예시이다.

  function outter() {
    let x = 10;
    return function inner(y) { // inner 함수는 클로저다.
      return x = x + y;
    }
  }
  let a = outter(); // 외부함수 호출은 한번만. 이제 a 변수는 inner 함수를 참조한다.
  a(5) // 15;
  a(5) // 20;
  a(5) // 25;

클로저의 장점

1. 데이터를 보존할 수 있다.

클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다.
클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는 폐쇄성을 갖는다.

2. 정보의 접근 제한 (캡슐화)

‘클로저 모듈 패턴’을 사용해 객체에 담아 여러 개의 함수를 리턴하도록 만든다.
이러한 정보의 접근을 제한하는 것을 캡슐화라고 한다.

3. 모듈화에 유리하다.

클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존할 수 있다.
이와 같이 함수의 재사용성을 극대화 함수 하나를 독립적인 부품의 형태로 분리하는 것을 모듈화라고한다.
클로저를 통해 데이터와 메소드를 묶어다닐 수 있기에 클로저는 모듈화에 유리하다.

클로저의 단점

1. 메모리를 소비한다.

이벤트에 대한 콜백 함수 등으로 등록했던 함수들이 메모리에 계속 남아있게 되면, 해당하는 클로저도 같이 메모리에 계속 남아있기때문에 루프를 돌면서 클로저를 계속 생성하는 설계는 지양해야한다.

2. 코드가 복잡해진다.

클로저를 사용하면 함수 내부의 변수를 외부에서도 접근할 수 있기 때문에, 코드의 의도를 파악하기 어려워질 수 있다. 따라서 클로저를 사용할 때는 주의해서 사용해야 한다.


요약
클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경인 스코프를 기억하여, 해당 스코프 밖에서 호출되어도 그 환경에 접근할 수 있는 함수로 자신이 생성될 때의 환경을 기억하는 함수!

profile
프론트 개발 공부를 정리한 블로그입니다.

0개의 댓글