[JS Log] 좀 더 클로저

클로저 내용이 너무 길어져서 둘로 나눴다. 보다보니 너무 흥미로운 주제.

24.4 클로저의 활용

> 클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다. 다시 말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.

 

let num = 0 ;
const increase = function () {
  return ++num;
};

console.log(increase())
console.log(increase())
console.log(increase())

> 책의 예시는 카운터를 만들려고하는데 기대한 것과 같이 코드를 쓰면 작동하지만 num이 전역 변수로 선언되어 있기 때문에 전역 변수 오염을 걱정하고 있다. 

const increase = function () {
  let num = 0 ;
  return ++num;
};

console.log(increase())
console.log(increase())
console.log(increase())

> 다음 예제로는 num을 함수 안으로 넣어주었지만 이 함수는 기대한대로 작동하지 않는다. 이유는 호출 할 때마다 num은 새로게 정의되고 0이 되기 때문이다..

 

const increase = (function () {
  let num = 0;
  return function () {
    return ++num;
  };
}());

console.log(increase());
console.log(increase());
console.log(increase());

> 이처럼 클로저는 상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용한다. 

 

> 이 내용은 리트코드 JS 30의 두 번째 문제로 나왔을 정도로 클로저의 기본을 설명해주는 부분이다.

 

https://leetcode.com/problems/counter/?envType=study-plan-v2&envId=30-days-of-javascript 

LeetCode - The World's Leading Online Programming Learning Platform

> 책은 함수형 프로그래밍의 중요한 조건인 부수 효과 억제와 클로저를 연결지어 이야기한다.

 

function makeCounter(aux) {
  let counter = 0;

  return function () {
    counter = aux(counter);
    return counter;
  };
}

function increase(n) {
  return ++n;
}

function decrease(n) {
  return --n;
}

const increaser = makeCounter(increase);
const decreaser = makeCounter(decrease);

> 함수에 return을 함수로 넣는 고차 함수로 만들어 처리하면 다양한 변주가 가능하다. 

 

> 주의해야 할 것은 makeCounter 함수를 호출해 함수를 반환할 때 반환된 함수는 자신만의 독립된 렉시컬 환경을 갖는다는 것이다. 

 

24.4 캡슐화와 정보 은닉

> 캡슐화는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것을 말한다. 아래 예시가 정보 은닉의 한 예시가 될 것이다. _age를 클로저를 통해 참조하지만 인스턴스를 통한 호출은 불가능하다.

> 하지만, 아래 예시와 같이 즉시 실행 함수로 매번 새롭게 정의되기 때문에 _age의 값은 유동적이다. 하지만 JS도 private 문법이 들어왔고 이제는 무엇보다도 TypeScript가 존재한다.

24.5 자주 발생하는 실수