소개

폐쇄에 대해 들어본 적이 있을 것입니다. 그것이 무엇인지 완전히 알지 못하더라도 이미 사용하고 있는 것이 가장 확실합니다. 폐쇄를 위해서는 다음 사항을 알아야 합니다.

세 가지 사실:

사실 1: 자바스크립트에서는 현재 함수 외부에 정의된 변수를 참조할 수 있습니다.

function makeCookies(){
    const secretIngredient = "coconut oil"
    function bake(chocolate){
        return secretIngredient + " and " + chocolate
    }

    return bake("white chocolate")
}

makeCookies() // coconut oil and white chocolate

여기서 우리는 외부 makeCookies 함수에 정의되어 있더라도 내부 함수 bake가 변수 secretIngredient에 액세스할 수 있음을 알 수 있습니다.

사실 2: 함수는 외부 함수가 반환된 후에도 외부 함수에 정의된 변수를 참조할 수 있습니다!

함수는 일급 객체이기 때문에 변수 안에 함수를 저장하고 나중에 호출할 수 있습니다. 나는 고차 함수에 대해 이야기했습니다.

function cookiesMaker(){
    const secretIngredient = "coconut oil"
    function bake(chocolate){
        return secretIngredient + " and " + chocolate + " chocolate."
    }

    return bake
}

const func = cookiesMaker() // Storing the function in a variable

여기에서 cookieMaker가 호출되고 해당 함수의 결과를 변수 안에 저장합니다. 지금 func 변수를 출력하면 베이크 함수가 표시됩니다.

베이킹 함수는 베이킹 함수 외부에 선언된 변수(secretIngredient)를 사용합니다. 베이킹 함수는 cookieMaker가 이미 반환된 경우에도 해당 변수를 계속 기억할 수 있습니다.

func("black") // coconut oil and black chocolate.
func("white") // coconut oil and white chocolate.

이것이 어떻게 가능한지? 자, 자바스크립트에서 함수 값은 호출될 때 실행하는 데 필요한 코드만 저장하는 것이 아닙니다. 또한 실행해야 하는 변수에 대한 참조를 저장합니다. 포함 범위에 선언된 변수를 참조하는 베이크 함수와 같은 함수를 클로저라고 합니다.

여기에서 베이킹 함수는 포함 범위에 선언된 두 개의 변수(secretIngredient 및 초콜릿)를 추적합니다.

나중에 베이킹을 호출할 때 클로저에 저장되어 있기 때문에 이 두 변수를 계속 기억합니다.

클로저는 해당 범위의 모든 변수 또는 매개변수를 참조할 수 있습니다. 이것 좀 봐:

function cookiesBaker(cook){
    return function addSecretIngredient(secretIngredient){
        return function bakeCookie(chocolate){
            return `${cook} cooked a ${secretIngredient} ${chocolate} chocolate cookie.`
        }
    }
}

이 예에서 내부 함수 bakeCookie는 외부 cookieBaker 함수(cook)의 매개변수, 외부 addSecretIngredient 함수(secretIngredient)의 매개변수 및 자체 범위(초콜릿)의 매개변수를 참조합니다.

const cook = cookiesBaker("Damien")

const secret = cook("peanut butter")

const result = secret("white")
// Damien cooked a peanut butter white chocolate cookie.

여기서 우리는 한 걸음 더 나아가고 있습니다.

내부 함수 addSecretIngredient를 반환하고 변수에 저장합니다. 그런 다음 저장 함수를 호출합니다. 결과( bakeCookie )는 다른 변수 안에 저장됩니다. 마지막으로 그 함수를 호출합니다. 최종 결과는 보시다시피 클로저 내부에 저장된 모든 변수를 기억합니다.

이것을 사용하여 보다 범용적인 기능을 만들 수도 있습니다.

Johnny가 구운 모든 쿠키에 대한 함수를 만들고 싶다고 가정해 보겠습니다.

const bakedByJohnny = cookiesBaker("Johnny")

bakedByJohnny("coconut oil")("black") // Johnny cooked a coconut oil black chocolate cookie.

bakedByJohnny("")("milk") // Johnny cooked a  milk chocolate cookie.

변수를 선언하고 그 안에 중간 함수를 저장하는 대신에 주목하십시오. BakeryByJohnny("coconut oil") 가 함수를 반환하기 때문에 내부 함수를 즉시 호출할 수 있습니다!

좋아, 또 다른 작은 예. Sarah가 땅콩 버터로 구운 모든 쿠키에 대한 함수를 만들어 보겠습니다.

const bakedBySarahPeanutButter = cookiesBaker("Sarah")("peanut butter")

bakedBySarahPeanutButter("white")
//Sarah cooked a peanut butter white chocolate cookie.

bakedBySarahPeanutButter("black")
// Sarah cooked a peanut butter black chocolate cookie.

bakedBySarahPeanutButter("milk")
// Sarah cooked a peanut butter milk chocolate cookie.

우리가 만든 두 함수는 같은 함수 정의에서 나왔지만 두 개의 별개의 객체이며 둘 다 다른 변수를 저장합니다.

참고: 함수는 다음과 같이 익명일 수 있습니다.

let cookiesBaker = function(cook){
    return function(secretIngredient){
        return function(chocolate){
            return `${cook} cooked a ${secretIngredient} ${chocolate} chocolate cookie.`
        }
    }

이 코드는 이전과 똑같은 결과를 제공합니다!

사실 3: 클로저는 포함된 범위의 변수를 기억할 수 있을 뿐만 아니라 업데이트할 수도 있습니다.

다음 예를 고려하십시오.

const secretIngredient = function(){
    let ingredient = undefined
    return {
        changeIngredient: newIngredient => { ingredient = newIngredient },
        showIngredient: () => ingredient,
        type: () => typeof ingredient
    }
}

이 함수는 3개의 클로저를 반환합니다. 반환된 개체의 각 메서드는 포함 범위에 정의된 변수를 참조합니다.

이제 클로저가 외부 변수를 읽을 수 있을 뿐만 아니라 업데이트할 수도 있음을 증명해 보겠습니다.

let i = secretIngredient()

i.showIngredient() // undefined
i.type() // undefined

i.changeIngredient("coconut oil")

i.showIngredient() // coconut oil
i.type() // string

타다아아아!

결론

클로저는 가장 자주 사용하는 것 중 하나입니다. 아마 당신은 그것에 대해 몰랐을 것입니다! 코드를 확인하고 클로저를 식별하고, 익숙해지고, 모든 기능을 사용하십시오!