M

MLOG

한국어

실용적인 예시를 통해 JavaScript 클로저를 살펴보고, 클로저의 기능과 소프트웨어 개발에서의 실제 적용 사례를 알아보세요.

JavaScript 클로저: 실용적인 예시로 이해하기

클로저는 모든 수준의 개발자에게 혼란을 야기하는 경우가 많은 JavaScript의 기본 개념입니다. 클로저를 이해하는 것은 효율적이고, 유지 관리 가능하며, 안전한 코드를 작성하는 데 매우 중요합니다. 이 포괄적인 가이드는 실용적인 예시를 통해 클로저를 명확히 설명하고 실제 적용 사례를 보여줍니다.

클로저란 무엇인가?

간단히 말해서, 클로저는 함수와 해당 함수가 선언된 어휘적 환경의 조합입니다. 즉, 클로저를 사용하면 외부 함수가 실행을 완료한 후에도 함수가 주변 스코프의 변수에 액세스할 수 있습니다. 내부 함수가 해당 환경을 "기억"한다고 생각하면 됩니다.

이것을 진정으로 이해하려면 핵심 구성 요소를 분석해 보겠습니다.

내부 함수가 외부 함수가 반환된 후에도 해당 어휘적 스코프의 변수에 대한 액세스를 유지하기 때문에 마법이 일어납니다. 이 동작은 JavaScript가 스코프와 메모리 관리를 처리하는 방식의 핵심 부분입니다.

클로저가 중요한 이유는 무엇인가?

클로저는 단순한 이론적 개념이 아니라 JavaScript에서 많은 일반적인 프로그래밍 패턴에 필수적입니다. 다음과 같은 이점을 제공합니다.

JavaScript 클로저의 실용적인 예시

클로저가 어떻게 작동하고 실제 시나리오에서 어떻게 사용할 수 있는지 설명하기 위해 몇 가지 실용적인 예시를 살펴보겠습니다.

예시 1: 간단한 카운터

이 예시는 클로저를 사용하여 함수 호출 간에 상태를 유지하는 카운터를 만드는 방법을 보여줍니다.


function createCounter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

const increment = createCounter();

increment(); // Output: 1
increment(); // Output: 2
increment(); // Output: 3

설명:

예시 2: 개인 변수를 사용한 데이터 캡슐화

클로저를 사용하여 개인 변수를 생성하여 함수 외부에서 직접 액세스하고 수정하는 것을 방지할 수 있습니다.


function createBankAccount(initialBalance) {
  let balance = initialBalance;

  return {
    deposit: function(amount) {
      balance += amount;
      return balance; //Returning for demonstration, could be void
    },
    withdraw: function(amount) {
      if (amount <= balance) {
        balance -= amount;
        return balance; //Returning for demonstration, could be void
      } else {
        return "Insufficient funds.";
      }
    },
    getBalance: function() {
      return balance;
    }
  };
}

const account = createBankAccount(1000);

console.log(account.deposit(500)); // Output: 1500
console.log(account.withdraw(200)); // Output: 1300
console.log(account.getBalance()); // Output: 1300

// Trying to access balance directly will not work
// console.log(account.balance); // Output: undefined

설명:

예시 3: 루프에서 `setTimeout`과 함께 클로저 사용하기

클로저는 특히 루프 내에서 setTimeout과 같은 비동기 작업으로 작업할 때 필수적입니다. 클로저가 없으면 JavaScript의 비동기 특성으로 인해 예기치 않은 동작이 발생할 수 있습니다.


for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log("Value of i: " + j);
    }, j * 1000);
  })(i);
}

// Output:
// Value of i: 1 (after 1 second)
// Value of i: 2 (after 2 seconds)
// Value of i: 3 (after 3 seconds)
// Value of i: 4 (after 4 seconds)
// Value of i: 5 (after 5 seconds)

설명:

루프에서 var 대신 let을 사용해도 이 문제가 해결되며, let은 각 반복에 대해 블록 스코프를 생성합니다.


for (let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log("Value of i: " + i);
  }, i * 1000);
}

// Output (same as above):
// Value of i: 1 (after 1 second)
// Value of i: 2 (after 2 seconds)
// Value of i: 3 (after 3 seconds)
// Value of i: 4 (after 4 seconds)
// Value of i: 5 (after 5 seconds)

예시 4: 커링 및 부분 적용

클로저는 여러 인수를 사용하는 함수를 각각 단일 인수를 사용하는 함수의 시퀀스로 변환하는 데 사용되는 기술인 커링 및 부분 적용의 기본입니다.


function multiply(a) {
  return function(b) {
    return function(c) {
      return a * b * c;
    };
  };
}

const multiplyBy5 = multiply(5);
const multiplyBy5And2 = multiplyBy5(2);

console.log(multiplyBy5And2(3)); // Output: 30 (5 * 2 * 3)

설명:

예시 5: 모듈 패턴

클로저는 JavaScript 코드를 구성하고 구조화하고, 모듈성을 촉진하고, 이름 충돌을 방지하는 데 도움이 되는 모듈 패턴에서 널리 사용됩니다.


const myModule = (function() {
  let privateVariable = "Hello, world!";

  function privateMethod() {
    console.log(privateVariable);
  }

  return {
    publicMethod: function() {
      privateMethod();
    },
    publicProperty: "This is a public property."
  };
})();

console.log(myModule.publicProperty); // Output: This is a public property.
myModule.publicMethod(); // Output: Hello, world!

// Trying to access privateVariable or privateMethod directly will not work
// console.log(myModule.privateVariable); // Output: undefined
// myModule.privateMethod(); // Output: TypeError: myModule.privateMethod is not a function

설명:

클로저와 메모리 관리

클로저는 강력하지만 메모리 관리에 미치는 잠재적 영향을 인식하는 것이 중요합니다. 클로저는 주변 스코프의 변수에 대한 액세스를 유지하므로 더 이상 필요하지 않은 경우 해당 변수가 가비지 수집되지 않도록 할 수 있습니다. 이로 인해 주의해서 처리하지 않으면 메모리 누수가 발생할 수 있습니다.

메모리 누수를 방지하려면 더 이상 필요하지 않은 경우 클로저 내의 변수에 대한 불필요한 참조를 중단해야 합니다. 변수를 null로 설정하거나 불필요한 클로저 생성을 피하도록 코드를 재구성하여 이를 수행할 수 있습니다.

피해야 할 일반적인 클로저 실수

결론

JavaScript 클로저는 모든 JavaScript 개발자가 이해해야 하는 강력하고 필수적인 개념입니다. 데이터 캡슐화, 상태 보존, 고차 함수 및 비동기 프로그래밍을 가능하게 합니다. 클로저의 작동 방식과 효과적으로 사용하는 방법을 이해하면 보다 효율적이고, 유지 관리 가능하며, 안전한 코드를 작성할 수 있습니다.

이 가이드에서는 실용적인 예시를 통해 클로저에 대한 포괄적인 개요를 제공했습니다. 이러한 예시를 연습하고 실험함으로써 클로저에 대한 이해를 높이고 더 능숙한 JavaScript 개발자가 될 수 있습니다.

추가 학습