클로저, 생성기 함수란 ?

함수란 계산이나 처리를 위한 코드의 묶음이다.

일반적으로 함수는 해당 함수가 다 처리가 되면 함수가 종료가 된다.

이런 함수를 조금 독특하게 사용할 수 있는 방법 중에 하나가 클로져다. 

// 일반적인 함수 
let saveNumber = 1;
function increment() {
    return saveNumber++;
}

console.log(increment());
console.log(increment());
saveNumber = 200;
console.log(increment());

// saveNumber에 접근이 가능해서 값을 임의로 접근하여 변경할 수 있는 문제가 있다.

이런 문제상황에서 특정한 데이터를 보호하고 싶을 때 클로저를 사용할 수 있다.

// 클로저는 함수 안쪽에서 함수가 만들어질 때 
// 함수 안쪽에 있는 코드중에 바깥 함수에 있는 변수에 접근을 하게 되면,
// 접근한 변수를 클로저라고 하는 특별한 공간에 저장을 해둔다.
// 디버깅을 통해 Closure 공간을 확인해보자.

function incrementClosure() {
    let saveNumberClosure = 1;
    return function() {
        return saveNumberClosure++
    }
}

const inc = incrementClosure();

console.log(inc());
console.log(inc());
console.log(inc());

// 어떤 상황에 쓰일까? 
// 클로저 공간은 코드상에서 함수 밖에서 접근할 수 없다. 보호가능
// 타입스크립트에서는 class 를 만들 때 private으로 보호할 수 있다.

 

그렇다면 생성기 함수란 무엇일까 ? 

생성기 함수 (Generator Function)
다른 모든 함수는 값을 반환하면 함수가 종료가 되지만 제너레이터는 값을 반환 후 종료가 되지 않도록 할 수 있다.

 

생성기 함수가 이용되는 예제를 코딩해보자

// 먼저 일반적인 함수
function makeInfiniteEnergyGenerator() {
    let energy = 0;
    return function (booster = 0) {
        if (booster) {
            energy += booster;
        } else {
            energy++;
        }

        return energy;
    }
}
               
const energy = makeInfiniteEnergyGenerator();
// console.log(energy);

// for (let i = 0; i < 5; i++) {
//     console.log(energy());
// }

console.log(energy(5));

 

// 아래는 제너레이터 함수이다.
// 제너레이터 함수는 실제 콘솔로그를 통해 동작을 보면 더 이해하기가 좋은거 같다. 
function* infiniteEnergyGenerator() {
    let energy = 1;
    while (true) {
        // yield : 제너레이터 함수를 정지시킨다.
        // 뒤에 쓰인 값을 호출자에게 반환해준다.
        const booster = yield energy;

        if (booster) {
            energy += booster;
        } else {
            energy++;
        }
    }

    return;
}

// 제너레이터 함수는 선언시에 함수가 실행되지 않고
// 실행시키는데 필요한 도구를 객체에 담아서 전달
// ex) next : 제너레이터 함수 실행을 재개시킨다
const energyGenerator = infiniteEnergyGenerator();
console.log(energyGenerator);

for (let i = 0; i < 5; i++) {
    console.log(energyGenerator.next());
}

console.log(energyGenerator.next(5));

 

코드를 보고 동작에 대한 이해는 되긴 해도 아직 활용되는 예까지는 잘 떠오르지 않는다.. 
서칭을 통해 더 찾아봐야 좋을 거 같다.. 

 

참고 

: https://ko.javascript.info/closure

변수의 유효범위와 클로저