2021.07.01(Thu.) <클로저를 더 살펴보자 + 덤으로 스코프도>

1. 클로저

• 함수가 함수를 리턴하는 형태의 함수.
• 클로저의 맹점은 함수가 2개가 있는 형태에 있다. 외부의 함수에 변수를 설정하면, 내부의 함수에는 영향을 준다.
  이때, 내부 함수도 외부 함수에 선언된 변수를 가져와 쓸 수 있게 된다.
• 예시를 보자.

const sum = x => y => x + y; // 화살표 함수로 외부 함수와 내부함수를 만들고, 내부함수의 x와 내부함수의 y 를 더해주는 함수를 만들었다.
const sum3 = sum(3) // sum3을 선언해 먼저 sum에 x에 3을 넣어 준다.
sum3(2) // 5 
// 이후, sum3의 y를 2로 넣어주면, 위에 할당된 x = 3 덕분에 2가 더해진 5가 리턴된다.
sum3(5) // 8 
// 마찬가지로 위에 할당된 x = 3 덕분에 8이 리턴된다.

• 이처럼, 외부함수에 선언된 변수를 계속 사용할 수 있다.
• 클로저의 진정한 재사용성의 끝판왕은 아래의 예시로 볼 수 있다.

const count = () => {
    let value = 0; // value를 초기값을 0 으로 준다.

    return { // count 함수에 키로 데이터를 조작할 함수들을 만든다.
        plus: () => { 
            value = value + 1
        },
        minus: () => {
            value = value - 1
        },
        getValue: () => value
    }
}

const counter1 = count(); // 첫번째 계산할 데이터를 준다.
counter1.plus(); // vlaue === 1
counter1.plus(); // vlaue === 2
counter1.plus(); // vlaue === 3
counter1.getValue(); // vlaue === 3 리턴.

const counter2 = count(); // 두번째 계산할 데이터를 준다.
counter.plus(); // vlaue === 1
counter.minus(); // vlaue === 0
counter.plus(); // vlaue === 1
counter.getValue(); // vlaue === 1 리턴.

• 이러한 것을 '클로저 모듈 패턴'이라고 한다.
• 어떠한 수를 입력 받더라도, 외부 함수에서 정해준 변수를 계속 가져와 사용하기 때문에 가능하다!

2. 덤으로 보는 간단한 스코프

• 우리가 생각하는 그 스코프가 맞다. 영향을 주는 범위이다.
• 위의 클로저가 이미 스코프의 원리로 동작하기 때문에 모르면 사용할 수 없다.
• 가장 중요한 포인트는, 선언된 변수는 한 변수 안에서만 사용 가능하다.
• 하지만, 바깥쪽에서 선언된 변수는 안쪽 스코프가 또 있다면 사용이 가능하다.
• 스코프가 중첩이 가능하다고 생각하면 쉽다.

이때가지 배운 것들이 모두 딱딱 맞아 들어가는 느낌이다.
이제 무작정 사용하던 것에서 원리를 알고, 설명까지도 할 수 있을 정도의 단계가 되어 가고 있다.
활용과 응용을 더 연습해서 완전히 내 것으로 만들면 완벽하다!