[코드스테이츠 TIL] Closure 클로저 함수

[ Closure ]

 

외부 함수의 변수에 접근할 수 있는 내부함수, 또는 이러한 작동원리를 일컫는 용어

 

• 클로저 함수 안에서는 지역변수, 외부함수변수, 전역변수의 접근이 전부 가능하다
• 함수의 재활용이 가능한 것이 장점이다
• 파라미터 하나를 고정해놓고 다른 결과를 도출하기 쉽다
• 함수를 실행하지 않고 함수자체를 리턴할 수 있다
• 클로저는 어떤 데이터(어휘적 환경)와 그 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다
• 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용할 수 있다

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
//myFunc변수는 displayName 함수 자체를 리턴
//유효범위의 어휘적 환경을 유지

myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)
//expected output is "Mozilla"

일반적으로 함수 내 지역 변수는 함수 실행이 끝나고 나면 지역변수(name)에 접근할 수 없다.

하지만 클로저 함수를 통해 함수 내의 지역변수를 계속 유효한 상태로 유지할 수 있다.

 

 

[ 커링 Currying ] 

함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법

function adder(x) {
  return function(y) {
    return x+y;
  }
}

adder(2)(3); // output is 5


//파라미터 값 고정하여 함수 재사용하기

let add100 = adder(100);
add100(2);  // output is 102
add100(10);  // output is 110

 

[ Template 처럼 활용 ] 

• 외부함수의 변수가 저장되어 마치 템플릿 함수와 같이 사용 가능하다.

function htmlMaker(tag) {
  let startTag = '<' + tag + '>';
  let endTag = '</' + tag + '>';
  return function(content) {
    return startTag + content + endTag
  }
}

let divMaker = htmlMaker('div');
divMaker('code');  // <div>code</div>

let h1Maker = htmlMaker('h1');
h1Maker('Headline');  // <h1>Headline</h1>

• 프론트엔드 자바스크립트에서 이벤트 기반의 코드에 클로저를 주로 사용할 수 있다

CSS

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}

Java Script

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);

document.getElementById('size-12').onclick = size12;

HTML

<a href="#" id="size-12">12</a>

 

[ 클로저 모듈 패턴 ] 

변수를 스코프 안쪽에 가두어 함수 밖으로 노출시키지 않는 방법

=> 자바스크립트에서는 프라이빗 개념이 없지만 스코프를 활용하여 프라이빗을 활용할수있음

 

function makeCounter() {
  let privateCounter = 0;
  
  return {
    increment : function() {
      privateCounter++;
    },
    decrement : function() {
      privateCounter--;
    },
    getValue : function() {
      return privateCounter;
    }
  }
}


let counter1 = makeCounter();
counter1.increment();
counter1.increment();
counter1.getValue();  // 2

let counter2 = makeCounter();
counter2.increment();
counter2.decrement();
counter2.getValue();  // 1

위 예제와 같이 두 변수에 다른 privateCounter를 동시에 privateCounter를 밖으로 노출시키지 않는다.

하나의 클로저에서 변수 값을 변경해도 다른 클로저의 값에는 영향을 주지 않는다.

이런 방식으로 클로저를 사용하여 객체지향 프로그래밍의 프라이빗 개념을 얻을 수 있다.