Closure

HeeChan·2020년 8월 5일
1

JS_처음 본 시점

목록 보기
6/11

Closure

scope 의 연장 개념

  
       function outFn(){
  let outVar = 'out';
  console.log(outVar);
  function inFn(){
      let inVar ='in';
      console.log(inVar);
  }
  return inFn;
	}
  
	**예제 실행**
    
    
    
    
    
    
	outFn ()();
	
	out
	in
   
 let inFn =outFn();
	out

	inFn
ƒ inFn(){
     let inVar ='in';
     console.log(inVar);
 }
	inFn()
	in
   

클로저

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

위 예제에 inFn() 부분이 클로저 함수 이다.

클로저 함수 안에서는 지역 변수 외부 함수의 변수 전역 변수 의 접근이 전부 가능하다.

클로저 예제

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

   
	function adder(x) {
     return function(y) {
       return x + y;
     }
   }
	
	adder(2)(3); // 5

x의 값을 고정해놓고 재사용할 수 있다.

  
  	let add100 = adder(100);
      add100(2);//102
      add100(10);//110
      
      let add5 = adder(5);
      add5(2); //7
      

사용 예시

        
        function htmlMaker(tag){
    let startTag = '<' + tag + '>';
    let endTag = '<' + tag + '>';
    return function(content) {
        return startTag + content + endTag;
    	}
    }
    
    
    let divMaker = htmlMaker('div'); // inner 함수 만들었당
    undefined
    
    divMaker //inner 	 확인
    ƒ (content) {
            return startTag + content + endTag;
        }
        
    divMaker('HI'); //inner 에 인자 넣기
    "<div>HI<div>"
    
    divMaker('다른값')
    "<div>다른값<div>
    
    let spanMaker = htmlMaker('span')
    undefined
    spanMaker('스펜이지롱')
    "<span>스펜이지롱<span>"

클로저 모듈 패턴

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

function makeCounter() {
let privateCounter = 0;

return {
    increment : function() {
        privateCounter++;
     },
    decrement: function() {
        privateCounter--;
    },
    getValue: function() {
        return privateCounter;
    }
}
	}
	
let ct = makeCounter()
undefined
ct.increment();
undefined
ct.increment();
undefined
ct.increment();
undefined
ct.getValue();
3

let ct2 = makeCounter()
undefined
ct2.increment();
undefined
ct2.increment();
undefined
ct2.getValue();
2
ct.getValue();
3
//서로 영향을 주지않는다. 각각 의 privateCounter 의 값을 가진다. 
'함수를 리턴하는 함수'가 클로저의 정의라고 오해하는 경우가 많은데, 이는 정의가 아니라 클로저 패턴의 일반적인 특징입니다. '외부함수의 컨텍스트에 접근할 수 있는 내부함수' 가 클로저라는 사실을 꼭 기억해 주세요.
profile
생각이란걸해

0개의 댓글