JavaScript 마스터하기 🧑‍💻: 클로저

안녕하세요 여러분 👋 잘 지내고 계시길 바랍니다.

이 게시물에서는 클로저가 예제를 사용하여 코드를 더 잘 작성하는 데 사용할 수 있도록 설명합니다.

어휘 범위 ✍️

클로저가 무엇인지 직접 설명하기 전에 범위(scope)와 어휘 범위(lexical scope)의 개념을 설명하는 것이 적절합니다.

함수의 범위는 변수가 "보이고"사용할 수 있는 코드 영역을 나타냅니다.
한 함수 내에서 다른 함수가 생성되면 다른 내부 범위가 생성되는 식으로 이를 범위 체인이라고 합니다.

정적 범위라고도 하는 어휘 범위는 함수 정의 위치에 따라 액세스할 수 있는 변수가 결정되는 시기를 나타냅니다.

예를 들어 :

const life = () => {
  const pastEvents = 'past'

  //console.log(actualEvents) this will create an error because that inner variable is not accesible here

  const present = () => {    
    const actualEvents = 'present'

    console.log(pastEvents, actualEvents)//ok
    //console.log(futureEvents) same for this one

    const future = () => {
      const futureEvents = 'future'

      console.log(pastEvents, actualEvents, futureEvents)//ok      
    }

    future()
  }

  present()
}

life()
/*
Outputs:
  past present
  past present future
*/

보시다시피 중첩된 함수 그룹에서 내부 함수는 부모 범위의 변수 및 기타 리소스에 액세스할 수 있습니다.

폐쇄 🪆

이전의 코드를 약간 변경해 보겠습니다.

const life = () => {
  const pastEvents = 'past'

  const present = () => {    
    const actualEvents = 'present'

    console.log(pastEvents, actualEvents)

    const future = () => {
      const futureEvents = 'future'

      console.log(pastEvents, actualEvents, futureEvents)  
    }

    return future
  }

  return present
}

const newFunc = () => {
  //different scope
  const newLife = life()
  const future = newLife()

  future() 
}

newFunc()
/*
Outputs:
  past present
  past present future
*/

newFunc 함수 내에서 생성된 새 함수는 변수 pastEvents, actualEvents 및 futureEvents가 다른 범위에 있더라도 액세스할 수 있습니다.
이는 future와 present 함수가 클로저이기 때문입니다. 변수에 할당될 때(우리의 경우 newLife와 future) 어휘 범위의 변수를 닫습니다(여기서 클로저라는 용어).

이로 인해 클로저는 메모리 효율적인 저장 코드 반복입니다.
여기 또 다른 예가 있습니다:

const addTo = x => y => x + y //x = outer func; y = inner.
const addToTen = addTo(10)
addToTen(3) // returns 13

그들이 가져오는 또 다른 이점은 데이터 캡슐화입니다.

const createCounter = () => {
  let count = 0

  return {
    increment() {
      count++
    },
    decrement() {
      count--
    },
    showCount() {
      console.log(count)
    }
  }
}

const myCounter = createCounter()

for(let i = 0; i < 100; i++)
  myCounter.increment()

myCounter.decrement()

console.log(myCounter.count)//returns undefined
myCounter.showCount()//returns 99

이런 식으로 count 변수는 비공개이며 개발자가 작성한 적절한 함수를 통해서만 액세스할 수 있습니다.

결론

여기까지 읽으셨다면 감사합니다. 게시물이 마음에 드셨다면 좋아요를 남겨주시고 제 다른 게시물도 확인해주세요 🙂.