JavaScript(Closure) 복습

• 클로저 함수란, 외부 함수의 컨텍스트(변수)에 접근할 수 있는 내부함수를 의미한다.

• 클로저 함수는 외부함수와 내부함수로 나뉘어진 함수들 사이 내부함수를 의미하는데, 외부함수의 변수에 접근이 가능하고 이를 활용하거나, 변형 시킬 수 있는 함수이다.

• 클로저는 지역 스코프를 띈다. 클로저 함수는 외부 함수 내에 있는 내부 함수로써 바깥쪽 스코프인 외부함수에 접근할 수 있는 안쪽 스코프 함수이다.

• 클로저를 이용해 가능한 몇가지 중 캡슐화와 모듈화라는 것이 있다.

function global (x) {
  return function (y) {
      return x + y
  }
}

global(2)(3)			// 5
let module = global(3)	// 3(x) + y
let module2 = global(5)
module(4)				// 3(x) + 4(y) = 7
module2(4)				// 5(x) + 4(y) = 9

위의 예시가 모듈화다. 같은 함수를 변수에 담아줬음에도 x에 넣어준 값에 따라 다른 역할을 하는 각각의 모듈이 생성된다.

function tagMaker = tag => content =>
`<${tag}>${content}</${tag}>`

let divMaker = tagMaker('div')
divMaker('hello')		// '<div>hello</div>'

위처럼 div 태그를 생성하는 모듈도 만들 수 있다.


그리고 '클로저 모듈 패턴'이라고 하는 아주 유용한 예시가 있다.

const makeCounter = () => {
    let value = 0;
    return {
        increase: () => {
            value = value + 1
        },
        decrease: () => {
            value = value - 1
        },
    	getValue: () => {value}
    }
}

const couter1 = makeCounter();
counter1.increase();	// 1
counter1.increase();	// 2
counter1.increase();	// 3
counter1.getValue();	// 3
const counter2 = makeCounter();
counter2.decrease();	// -1
counter2.decrease();	// -2
counter2.decrease();	// -3
counter2.getValue();	// -3

살펴보자면, makeCounter 안에는 연산만을 담아줬다.

리턴 값으로는 각 연산을 진행할 함수들을 객체에 담아둔 것이다.

이 모듈 패턴의 특징은 한가지가 더 있는데 바로 캡슐화다.

밖에서는 makeCounter 함수의 value 값에 접근할 수 없기 때문에
정보의 접근제한(캡슐화) 상태인 것이다.

캡슐화가 가능한 이유는 value라는 값을 따로 두지 않고,
굳이 makeCounter라는 스코프 역할을 해주는 함수로 감싸줬기 때문에 가능한 것이다.