[JS] 클로저 (Closer)

Closer?

MDN에서의 Closer 정의에 따르면

함수와 함수가 선언된 어휘적 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위내에 있는 모든 지역변수로 구성된다.

간단히 정의하면

Closer
함수와 함수가 선언된 어휘적 환경의 조합
Closer함수
외부함수의 변수에 접근할 수 있는 내부 함수이다.

Closer 함수 특징

함수를 리턴하는 함수

const adder = x => y => x + y;
adder(5)(7); //12
typeof adder(5); // 'function'
adder(5) // y => x + y

adder(5)의 리턴 값이 함수의 형태이다.

const adder = function (x) {
  return function add (y) {
    return x + y;
  }
}

여기서 바깥쪽 adder함수는 외부함수이고 안쪽 add함수는 내부함수이다.
이 클로저 함수는 scope가 분리되있다.

• 외부함수는 변수y에 접근 불가능
• 내부함수는 변수x에 접근 가능

Closer 활용

데이터를 보존하는 함수

const adder = function (x) {
  return function (y) {
    return x + y;
  }
}
const add5 = adder(5); // 함수실행이 끝나도 5값을 사용할 수 있다!
add5(7) //12 
add5(10) //15

외부 함수 내 변수가 메모리 상에 저장된다.

Closer 모듈 패턴

const makeCounter = () => {
  let value = 0;
  return {
    increse: () => {
      value += 1
    },
    decrease: () => {
      value -= 1
    },
    getValue: () => value
  }
}
const counter1 = makeCounter(); //서로 영향을 주지않는 여러개의 counter를 만들 수 있다.
counter1 // { increase: f, decrease: f, getValue: f }

함수 여러개를 포함한 객체를 리턴하는 함수가 있다.

캡슐화

• makeCounter함수 내 변수 value에 새로운 값을 할당 불가능! -> 정보접근제한(캡슐화)

모듈화

• 새로운 변수에 makeCounter함수를 할당하는 방식으로 서로 영향을 주지않는 여러개의 counter를 만들 수 있다. -> 모듈화