JavaScript에서 Closure를 배우는 가장 좋은 방법은 무엇입니까?

클로저가 무엇인지 설명하는 수많은 리소스가 웹에 있습니다...

나는 이것을 주는 쓰레기를 잘라낼 것입니다:

a function inside a function bla bla... is closure.

대신 내가 할 일은 아래 👇 코드의 출력을 스캔하고 이해하는 데 필요한 1 minute 스니펫을 제공하는 것입니다(컴파일러에서 실행하거나 답을 조사하지 않고).

완료되면 답변을 확인하고 개념을 배울 수 있습니다.
자유롭게 댓글을 달아주세요. 응답하고 함께 배우기를 원합니다.

let cachedFunc = null

function log(message) {
  if (!cachedFunc) {
    // creates a function that closes over `message`
    // keep in mind `message` inside `log` is different
    // on each call
    cachedFunc = () => console.log(message)
  }
  cachedFunc();
}

log("hello")
log("goodbye")

아래 답변을 비교하십시오.

답변을 확장하려면 클릭하세요.

단계별 실행:

cachedFunc 는 null 와 함수 log 로 선언됩니다.

log("hello")를 호출할 때 log 함수를 호출하는 컨텍스트는 선언된 cachedFunc와 동일하므로 외부 범위에서 선언된 값을 null로 찾습니다.

if condition 내부에서 인수cachedFunc를 콘솔에 인쇄하는 인라인 함수로 message를 업데이트합니다.

그런 다음 "hello"메시지를 생성하는 cachedFunc 메서드를 호출합니다.

두 번째 호출log("goodbye")에서 메서드를 다시 초기화하지 않습니다.

So it will call the method that was in previous scope, in which the value of message is "hello" and that's why it will print the same "hello" again.

Reactjs와 관련된 추가 설명:

후드 아래에서 useCallback는 매우 유사한 방식으로 작동합니다. 첫 번째 렌더링에서 React는 전달한 함수useCallback를 어딘가에 저장하고 항상 해당 함수를 반환합니다.

다른 모든 렌더링에는 저장된 기능이 있으며 이전 값을 포함하여 생성된 범위를 "기억"합니다.
useCallback 또는 종속 항목을 추가하지 않으면 각 렌더링 또는 종속 항목 변경 시 새 함수가 생성됩니다. 즉, 최신 값으로 new를 참조할 수 있습니다.




다음은 codepen에 대한 링크입니다. :)

문안 인사.