[Javascript] 클로저(Closure) 이해하기

 

자바스크립트 클로저(Closure) 이해하기

자바스크립트 클로저는 자바스크립트에서 매우 중요한 개념으로, 함수와 그 함수가 선언된 어휘적 환경(Lexical Environment)의 조합을 의미합니다. 클로저는 함수가 자신의 스코프 외부에 있는 변수들에 접근할 수 있게 해줍니다. 이는 자바스크립트의 스코프와 실행 컨텍스트에 대한 깊은 이해를 필요로 합니다.

클로저란 무엇인가?

클로저는 함수가 선언될 때 그 함수가 선언된 환경을 기억하는 특성입니다. 이로 인해 함수는 자신이 선언된 환경의 변수에 접근할 수 있습니다. 클로저는 함수가 자신의 외부 함수의 변수에 접근할 수 있도록 합니다.

클로저의 기본 예제

다음은 간단한 클로저의 예제입니다.

function outerFunction() {
  let outerVariable = 'I am outside!';

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

  return innerFunction;
}

const inner = outerFunction();
inner(); // "I am outside!"

 

이 예제에서 innerFunction은 outerVariable에 접근할 수 있습니다. 이는 innerFunction이 outerFunction의 어휘적 환경을 기억하고 있기 때문입니다.

클로저의 유용성

클로저는 다양한 상황에서 유용하게 사용됩니다. 몇 가지 주요 활용 사례를 살펴보겠습니다.

1. 데이터 은닉 (Data Encapsulation)

클로저를 사용하면 함수 내부의 변수를 외부로부터 숨길 수 있습니다. 이는 정보 은닉과 캡슐화의 중요한 개념입니다.

function createCounter() {
  let count = 0;

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

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

 

위 예제에서 count 변수는 createCounter 함수 내부에 캡슐화되어 있으며, 외부에서는 직접 접근할 수 없습니다.

 

2. 콜백 함수와 비동기 프로그래밍

클로저는 콜백 함수와 비동기 프로그래밍에서도 중요한 역할을 합니다.

function fetchData(url) {
  fetch(url)
    .then(response => response.json())
    .then(data => {
      console.log(data);
    });
}

fetchData('https://api.example.com/data');

 

위 예제에서 then 메서드 내의 콜백 함수는 fetchData 함수의 환경을 기억하고 있어 data를 올바르게 처리할 수 있습니다.

 

클로저의 작동 원리

클로저는 자바스크립트의 스코프 체인과 실행 컨텍스트에 기반합니다. 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되고, 이 컨텍스트는 해당 함수가 선언된 환경을 참조합니다.

예제: 클로저와 루프

다음은 클로저를 잘못 이해했을 때 발생할 수 있는 일반적인 문제와 해결 방법입니다.

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// 출력: 3, 3, 3

 

위 예제는 많은 자바스크립트 초보자들이 접하는 문제입니다. 이는 var 키워드가 함수 스코프를 가지기 때문에 발생합니다. 이를 해결하기 위해 let 키워드를 사용하거나 클로저를 활용할 수 있습니다.

 

for (var i = 0; i < 3; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, 1000);
  })(i);
}
// 출력: 0, 1, 2

 

이 예제에서 즉시 실행 함수(IIFE)를 사용하여 각 반복에서 i의 값을 캡처하는 클로저를 생성합니다.

 

결론

클로저는 자바스크립트의 강력한 기능 중 하나로, 함수와 그 함수가 선언된 어휘적 환경을 기억하는 특성을 갖습니다. 이를 통해 데이터 은닉, 콜백 함수, 비동기 프로그래밍 등 다양한 상황에서 유용하게 활용될 수 있습니다. 클로저의 작동 원리를 이해하고 적절히 활용하면 더욱 효율적이고 유지보수하기 쉬운 코드를 작성할 수 있습니다.