JS Closure

클로저는 자바스크립트의 고급 주제 중 하나로, 함수와 그 함수가 선언된 렉시컬 환경의 조합을 의미합니다. 이는 자바스크립트에서 매우 강력한 기능을 제공하며, 데이터를 은닉하고 캡슐화하는 데 유용하게 사용됩니다.

클로저는 내부 함수가 외부 함수의 스코프에 접근할 수 있게 해주며, 외부 함수의 실행이 끝난 후에도 외부 함수의 변수에 접근할 수 있게 합니다. 이러한 특성 때문에 클로저는 모듈 패턴, 콜백 함수, 고차 함수 등 다양한 곳에서 활용됩니다.

왜냐하면 클로저를 통해 생성된 함수는 각자의 독립적인 변수 스코프를 가지게 되므로, 데이터의 안전성과 무결성을 보장할 수 있기 때문입니다.

클로저 (Closure) 란 ?

클로저는 일반적으로 어떤 함수가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것을 뜻합니다.

다음과 같이 미국 달러를 대한민국 원으로 환전해주는 간단한 함수를 예를 들어 설명해보겠습니다. 이 함수는 미국 달러(usd)를 인자로 받아서 함수 내부에 선언된 환율(rate)을 이용하여 대한민국 원(krw)으로 환전한 결과를 반환합니다.

function convertUsdToKrw(dollar) {
  const rate = 1113.5;
  return dollar * rate;
}

인자로 5달러를 넘겨서 이 함수를 호출하면 예상대로 5567,5원이 반환됩니다.

> convertUsdToKrw(5)
5567.5

이번에는 환율(rate)을 함수 외부에 선언하면 어떨까요?

const rate = 1113.5;

function convertUsdToKrw(dollar) {
  return dollar * rate;
}

이 함수를 동일한 인자를 넘겨서 호출해보면 완전히 동일한 결과값이 반환되는 것을 알 수 있습니다.

> convertUsdToKrw(5)
5567.5

이렇게 자바스크립트에서 함수는 매개 변수와 로컬 변수 뿐만 아니라 외부에서 선언된 변수도 자유롭게 접근을 할 수 있습니다. 그리고 이렇게 함수가 자신의 밖에서 선언된 변수에 접근하는 것을 클로저라고 합니다.

예시를 하나 더 보겠습니다.

let rate= 1.05;
function app() {
  let base = 10;
  return function (price) {
    return price* rate + base;
  };
}
constgetPrice= app();
getPrice(120) // 136

• base 는 app 함수 내부, rate 는 app 함수 외부의 스코프에 존재한다.
• 함수가 참조하는 변수는 실행 시점에 실행 컨텍스트에 의해 스코프가 결정된다.

letrate= 1.05;
function app() {
  let base = 10;
  return function (price) {
    returnprice* rate + base;
  };
}
console.log(app()(1));// 11.05
rate = 1.1;
console.log(app()(1)); // 11.1

• 스코프에 따라서 변수에 영향을 받는다.
• rate의 변경은 두 클로저 함수 호출에 반영되지만, base는 증가해도 영향을 미치지 않는다.
• base 는 app 호출 시 매번 생성되는 반면, rate는 매번 생성되지 않는다.

클로저를 사용하는 이유 (중요!)

클로저를 사용하는 이유는 상태를 안전하게 은닉하고 보존시키기 위함입니다.
그리고 이를 수정하는 방법은 특정 함수한테만 그 권한을 줍니다.

즉, 다수의 개발자와 함께 일을 할 때 실수를 방지하고 더 탄탄한 코드를 만들기위한 코드 패턴입니다.
따라서 다음과 같이 클로저를 만들어 사용합니다.

function createCard() {
    let title= "";
    let content= "";
    
    function changeTitle(text) {
      title= text
    }
    
    function changeContent(text) {
      content= text
    }
    
    function print() {
      console.log("TITLE -", title);
      console.log("CONTENT -", content);
    } 

    return { changeTitle, changeContent, print};
}

createCard 함수 본문에 있는 title, content 변수는 외부에서 접근할 수 없습니다.
따라서 changeTitle, changeContent 함수를 통해 수정할 수 있도록 해주었습니다.
값을 읽을 수 있도록 제공하는 함수는 print로 해주었습니다.

그리고 이 모든 함수를 객체로 묶어서 createCard 함수에서 return 합니다.
const myCard = createCard()와 같은 형태로 인스턴스를 만들어서 사용할 수 있습니다.