JavaScript 클로저의 힘-JS 튜토리얼-php.cn

JavaScript 클로저의 힘

Barbara Streisand

풀어 주다： 2024-12-30 07:30:13

원래의

266명이 탐색했습니다.

JavaScript는 코딩을 즐겁게 해주는 보물창고입니다. 수많은 보석 중에서 클로저는 가장 강력하고 흥미로운 개념 중 하나로 돋보입니다. 클로저는 처음에는 약간 추상적으로 느껴질 수 있지만 일단 이해하고 나면 효율적이고 우아한 코드를 작성할 수 있는 가능성의 세계가 열립니다.

클로저에 대해 자세히 알아보고 작동 방식을 알아보고 자바스크립트 기술을 어떻게 향상시킬 수 있는지 살펴보겠습니다.

클로저란 무엇입니까?

핵심적으로 클로저는 자신이 만들어진 환경을 “기억”하는 기능입니다. 이는 클로저가 해당 범위의 실행이 완료된 후에도 외부 범위의 변수에 액세스할 수 있음을 의미합니다. 변수를 위한 타임캡슐과 같아서 겉보기에 사라진 변수를 오랫동안 보존하고 사용할 수 있습니다.

시작하기 위한 예는 다음과 같습니다.

function outerFunction() {
  let message = "Hello, Closure!";

  function innerFunction() {
    console.log(message);
  }

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: Hello, Closure!

로그인 후 복사

이 예에서 innerFunction은 클로저입니다. externalFunction이 실행을 완료했더라도 innerFunction은 여전히 메시지 변수에 액세스할 수 있습니다. 마법? 정답은 아닙니다. 클로저가 작동하는 방식입니다!

클로저가 왜 중요한가요?

클로저는 단지 이론적인 개념이 아닙니다. 실제 문제를 해결하는 데 사용할 수 있는 실용적인 도구입니다.

이렇게 강력한 이유는 다음과 같습니다.

캡슐화: 클로저를 사용하면 변수를 숨기고 비공개 상태를 만들 수 있습니다.
효율성: 변수를 반복적으로 전달하지 않고도 컨텍스트를 유지하는 데 도움이 됩니다.
유연성: 클로저는 커링 및 부분 적용과 같은 패턴을 활성화하여 복잡한 논리를 단순화할 수 있습니다.

클로저의 실제 사용

많은 용도가 있지만 여기에는 몇 가지 용도가 있습니다.

1. 프라이빗 변수 생성

JavaScript에는 private 또는 protected와 같은 전통적인 액세스 한정자가 없지만 클로저는 이 동작을 모방할 수 있습니다.

function createCounter() {
  let count = 0;

  return {
    increment: function () {
      count++;
      console.log(count);
    },
    decrement: function () {
      count--;
      console.log(count);
    },
  };
}

const counter = createCounter();
counter.increment(); // Output: 1
counter.increment(); // Output: 2
counter.decrement(); // Output: 1

로그인 후 복사

여기서 count는 증가 및 감소 함수를 통해서만 액세스할 수 있습니다. 이 캡슐화는 의도하지 않은 수정으로부터 변수를 안전하게 보호합니다.

2. 함수 팩토리

클로저를 사용하면 맞춤화된 기능을 쉽게 생성할 수 있습니다.

function createMultiplier(multiplier) {
  return function (number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5)); // Output: 10
console.log(triple(5)); // Output: 15

로그인 후 복사

클로저를 활용하여 특정 동작에 맞춰 재사용 가능한 기능을 만듭니다.

3. 메모

클로저는 비용이 많이 드는 함수 호출의 결과를 캐싱하여 성능을 최적화하는 기술인 메모이제이션에 자주 사용됩니다.

function memoize(fn) {
  const cache = {};

  return function (key) {
    if (cache[key]) {
      console.log("Fetching from cache:", key);
      return cache[key];
    }
    console.log("Calculating result:", key);
    const result = fn(key);
    cache[key] = result;
    return result;
  };
}

const square = memoize((x) => x * x);
console.log(square(4)); // Calculating result: 4 => Output: 16
console.log(square(4)); // Fetching from cache: 4 => Output: 16

로그인 후 복사

메모이제이션은 클로저를 활용하여 이전에 계산된 결과를 저장함으로써 반복 호출 속도를 높입니다.

4. 이벤트 핸들러

클로저는 이벤트 처리에서 컨텍스트나 상태를 유지하기 위해 자주 사용됩니다.

function setupButton(id) {
  let clickCount = 0;

  document.getElementById(id).addEventListener("click", function () {
    clickCount++;
    console.log(`Button clicked ${clickCount} times`);
  });
}
setupButton("myButton");

로그인 후 복사

버튼을 클릭할 때마다 비공개 카운터가 증가하여 클로저가 여러 상호 작용에서 상태를 유지할 수 있는 방법을 보여줍니다.

일반적인 함정과 이를 피하는 방법

클로저는 매우 유용하지만 주의해서 사용하지 않으면 문제가 발생할 수 있습니다.

의도하지 않은 메모리 보유: 큰 개체에 대한 참조가 불필요하게 지속되면 클로저로 인해 메모리 누수가 발생할 수 있습니다. Chrome DevTools와 같은 도구를 사용하여 메모리 사용량을 검사하세요.
범위 혼란: 클로저를 과도하게 사용하면 코드를 읽기가 더 어려워질 수 있습니다. 깔끔하고 모듈화된 코드 디자인을 고수하세요.