클로저 뿌시기

아무리 봐도 이해가 안나가는 나를 위한 정리본..

클로저

• 클로저는 함수가 선언된 환경의 (렉시컬) 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도
  이 스코프에 접근할 수 있게 하는 기술이다.
• 외부함수 안에 있는 독립적인 변수를 가르기는 내부함수 (리턴함수)

function outer(name) {
	const text = `Hi, ${name} Welcome.`;
  //여기서 중요 포인트! 나중에 리턴 함수가 실행될때 text를 불러 올수 있다는점. 
  //리턴함수는 outer 함수의 환경 스코프를 기억하고 있다.
  return () => text;
}

const user1 = outer('Risa');
const user2 = outer('jakong'); 

클로저를 사용하여 할수있는 것은

1. 은닉화
   • 외부에서 text 에 직접적인 접근을 제한 할 수 있다.

2. 반복문의 클로저 사용

let i;
for(let i = 0; i < 10; i++) {
	setTimeout(function(){
		console.log(i)
    }, 100)
}

코드를 보고 숫자가 순차적으로 잘 나올꺼라고 생각했지만 아니였다!
setTimeout 으로 인해 늦어진 그 순간 i 는 벌써 연산이 끝나있는 상태로
onsole.log(i) 의 값은 10이 10번 찍혀있게 된다

let i;
for(let i = 0; i < 10; i++) {
  (function (j) {
    setTimeout(function(){
		console.log(j)
    }, 100)
  })(i);
}

변하는 i 값을 변수 j 에 넣어놓고 저장된 j 변수를 이용해 console.log 를 찍는다.

3. 커링

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

//x 값을 고정해놓고 사용할 수 있음
let add10 = adder(10);
add10(5); //15

4. 템플릿 처럼 사용 가능

function htmlMaker(tag){
	let start = `<${tag}>`;
  	let end = `<${tag}>`;
  	return function(text){
  	 return	start + text + end;
  }
}
let div = htmlMaker('div');
div('hi');

5. 클로저 모듈 패턴

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

let counter1 = counter();
counter1.increment(); //1
counter1.increment(); //2
counter1.decrement() //1
counter1.getValue(); //1 출력

재사용이 가능한 점에서 매우 유용하다!