10분 만에 이해하는 자바스크립트 ‘클로저(Closure)’

클로저(Closure)는 자바스크립트의 핵심 개념이지만, 이해하기 어려운 부분이 있습니다. 공식 문서에서 "클로저는 함수와 렉시컬 환경의 조합"이라고 설명하지만, 쉽게 느껴지지 않죠. 이 글에서는 클로저의 정확한 정의와 예제 코드를 통해 이를 이해해 보겠습니다.

클로저란?

클로저는 "주변 상태에 대한 참조와 함께 묶인 함수"로, 내부 함수가 외부 함수의 변수에 접근할 수 있게 해 줍니다.

1) 클로저의 정의

클로저는 내부 함수가 외부 함수의 변수를 기억함으로써, 외부 함수가 종료된 이후에도 그 변수에 접근할 수 있는 개념입니다.

2) 예제 코드 분석

다음 코드를 통해 클로저의 작동 방식을 살펴보겠습니다.

function outer() {  let count = 0;  return function() {    count++;    console.log(count);  };}const counter = outer();counter(); // 1counter(); // 2

위 코드는 inner 함수가 outer 함수의 count 변수를 클로저를 통해 기억하고 업데이트할 수 있는 예를 보여줍니다.

예제 코드를 통한 클로저 학습

1) 렉시컬 스코프와 내부 슬롯

렉시컬 스코프는 변수의 선언 위치에 따라 다릅니다. 함수가 선언될 때 스코프 체인이 만들어지고, 실행할 때 이는 참고됩니다.

내부 슬롯([[Environment]])은 함수 생성 시 외부 환경 정보를 담고 있습니다. 이 예를 통해 클로저 원리를 다시 확인해 보겠습니다.

let username = 'John';function greetUser() {  const greeting = 'Hello';  return function() {    console.log(`${greeting}, ${username}`);  };}const greet = greetUser();greet(); // Hello, John

2) 클로저에 대한 새로운 정의

클로저란, "내부 함수가 외부 함수의 변수를 기억해 외부 함수 종료 후에도 접근할 수 있는 함수"입니다. 자바스크립트의 강력한 상태 관리와 캡슐화를 가능하게 합니다.

활용 사례

1) 상태 유지 함수

클로저는 상태 유지를 위해 자주 사용됩니다. 간단한 카운터 예제를 보겠습니다.

function clickCounter() {  let clicks = 0;  return function() {    clicks += 1;    console.log(`클릭 횟수: ${clicks}`);  };}const counter = clickCounter();counter(); // 클릭 횟수: 1counter(); // 클릭 횟수: 2counter(); // 클릭 횟수: 3

2) 데이터 은닉과 캡슐화

클로저는 데이터 보호와 관리에 효과적입니다. 다음 예를 통해 살펴보겠습니다.

function createAccount(initialBalance) {  let balance = initialBalance; // 외부에서 접근 불가능한 프라이빗 변수  return {    deposit(amount) {      balance += amount;      console.log(`입금 후 잔액: ${balance}`);    },    withdraw(amount) {      if(amount > balance) {        console.log('잔액이 부족합니다.');      } else {        balance -= amount;        console.log(`출금 후 잔액: ${balance}`);      }    }  };}const myAccount = createAccount(1000);myAccount.deposit(500); // 입금 후 잔액: 1500myAccount.withdraw(300); // 출금 후 잔액: 1200myAccount.withdraw(1300); // 잔액이 부족합니다.

마치며

클로저의 개념을 정의하고 활용 예제를 살펴보며, 클로저가 여러분의 프로그래밍 작업에 도움이 되기를 바랍니다.