클로저란?

[참고] https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

클로저 - JavaScript | MDN

 

웹 개발자라면 기본적으로 알아야 하는 개념이지만 그동안 소홀해지며 정확한 개념을 많이 잊었다는 생각이 들었습니다. 따라서 오늘 확실하게 개념을 잡아놔서 앞으로는 잊지 않기 위해 간단히 정리를 해보려고 합니다.

 

 

의미

클로저란 함수와 함수가 선언될 때의 범위를 기억하고 이 범위를 나중에 참조할 수 있는 함수입니다. 따라서 내부함수에서 외부함수의 범위에 대한 접근을 제공합니다.

 

특징

• 내부함수를 정의 : 클로저는 주로 다른 함수 내에서 정의되고 반환됩니다. 이 내부함수는 외부함수의 지역변수에 접근할 수 있습니다.
• 외부 변수에 접근 가능 : 자신이 정의된 범위의 외부변수에 접근이 가능합니다. 이때 외부 변수의 값을 기억하고 나중에 사용할 수 있습니다

 

사용 예시

private 변수와 함수 : 클로저 사용 시 특정 변수나 함수를 외부에서 접근할 수 없도록 보호하고 정보은닉 구현 가능

function counter() {
  let count = 0;

  return function () {
    return ++count;
  };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

 

콜백함수 : 클로저를 이용하여 함수들을 콜백으로 전달하고, 해당 함수가 호출될 때 클로저를 통해 외부 변수에 접근 가능

function greet(name) {
  return function(message) {
    console.log(`Hello, ${name}! ${message}`);
  };
}

const greetMj = greet('Mj');
greetMj('How are you?'); // 'Hello, Mj! How are you?' 출력

 

비동기 프로그래밍 : 비동기 작업에서 콜백함수로 사용됨, 비동기 작업 완료 후 필요한 데이터 보존 가능

function delayedGreeting(name) {
  setTimeout(function() {
    console.log(`Hello, ${name}!`);
  }, 1000);
}

delayedGreeting('May'); // 1초 후에 'Hello, May!' 출력