JavaScript의 클로저

이전 게시물에서 React 및 JavaScript의 오래된 클로저에 대해 말했듯이(자세한 내용은 내 페이지를 확인하세요!), 이 게시물에서는 클로저에 대해 자세히 설명하려고 합니다.

그렇다면 폐쇄란 무엇입니까?

클로저를 이해하려면 먼저 Lexical Scoping이라는 것에 대해 이야기해야 합니다.

다음 예를 확인하십시오.

const outerFunc = () => {
  const name = "Khan";

  const innerFunc = () => {
    console.log(name);
  }

  return innerFunc;
}

"JavaScript의 어휘 범위는 함수 외부에서 정의된 변수가 변수 선언 후에 정의된 다른 함수 내부에서 액세스할 수 있음을 의미합니다."

내가 준 예에서 innerFunc 함수는 어휘 범위가 outerFunc 함수 내부에 있고 name 변수 선언 뒤에 있기 때문에 name 변수에 액세스할 수 있습니다.

이제 우리가 가진 정보로 클로저가 무엇인지 아래 예제에서 확인해보자.

const outerFunc = () => {
  const name = "Khan";

  const innerFunc = () => {
    console.log(name);
  }

  return innerFunc;
}

const nameLogger = outerFunc();

nameLogger(); // Will log "Khan" to the console

그러나 innerFunc는 outerFunc가 호출되고 이름 변수가 더 이상 범위에 있지 않은 후에도 이름 변수를 어떻게 기억합니까?

이것을 JavaScript에서는 클로저라고 합니다. innerFunc 함수는 외부 변수 이름을 닫았고 이로 인해 outerFunc 함수가 호출된 후에도 이를 기억할 수 있습니다.

클로저에는 많은 사용 사례가 있습니다. 아래 예와 같이:

const adder = (x) => {
  return (y) => x + y;
}

const addTwo = adder(2);
const four = addTwo(2);

console.log(four); // Will log 4

위의 예에서 우리는 가산기 함수를 만들기 위해 클로저를 사용했습니다. 여기서 가산기 함수 내부의 반환된 화살표 함수는 변수 x를 닫기 때문에 여전히 기억할 것입니다.

위 예제의 함수 생성기는 Currying이라고도 합니다. 즉, 함수를 사용하여 우리가 작성하는 코드의 양을 줄이는 데 도움이 될 수 있는 다른 함수를 생성한다는 의미입니다. 커링과 클로저가 아니라면 다음과 같이 해야 합니다.

const addTwo = (x) => x + 2;
const addFour = (x) => x + 4;
const addTen = (x) => x + 10;

클로저 덕분에 작성하는 코드의 양을 줄일 수 있고 코드를 훨씬 더 깔끔하게 만들 수 있습니다.

결론

클로저는 JavaScript의 매우 필수적인 부분이며 다양한 방법으로 사용될 수 있습니다. 예를 들어 React 후크는 클로저에 크게 의존합니다. 방법을 알고 싶다면 제 기사인 React에서 부실 클로저 방지하기를 확인하세요. 클로저를 더 잘 이해하는 데 도움이 될 수 있으며 올바르게 사용하지 않으면 실수로 코드에 함정을 만들 수도 있습니다.

그리고 언제나처럼 여기까지 제 글을 읽어주셔서 정말 감사합니다! 내가 실수했다고 생각되면 댓글에 자유롭게 적어주세요. 나는 그들 모두를 절대적으로 확인하고 내 기사에서 올바른 변경을 할 것입니다.