JavaScript 15. 클로져

심화 개념 1. 클로저

 

> 내부함수가 실행시점을 포함해서 외부함수의 맥락에 접근할 수 있는것

 

> 어떤 함수를 정의할때 외부 스코프에 정의된 변수들까지 캡쳐해서 함수가 실행될 때 사용할 수 있도록 합니다.

 

>> 정보 은닉과 캡슐화를 제공할수 있다!

 

 

어떤 함수를 만들면 해당 함수가 선언 했을때랑 실행했을때의 타이밍이 다르다

 

어떤 변수 b가 있는데 선언시에는 0이었는데, 실행될때 시점에는 b가 2가 된다

 

> 선언될때의 b의 값과 실행됬을때의 b의 값이 다르다

 

>> 실행될때의 변수 b의 값이 아닌 선언되는 시점의 변수 b를 사용하고 싶을때 사용한다

 

>>>어떤 함수를 정의할때 외부 에 선언된 변수 캡처하여 선언시점에 사용할수 있도록 한다!

 

예시 ) 

 

Function createTodayExchangeRate(wonPerDollar){

Return function(dollar){

var result = dollar*wonPerDollar;

console.log(result);

return result;

}

 

Var convertExchange = createTodayExchangeRate(1200); // 새로운 내부함수가 생성되면서 1200변수가 캡쳐되어 같이 저장됨 => 환율 기준값이 캡슐화됨

 

이걸 convertExchange(20); 이 동작을 실행하면 1200원 기준으로 20달로 변환되는 함수를 호출한다 >. 함수도 객체 이므로

 

> 배열과 비슷한 느낌이다

 

Var arr = [1,2,3]; 여기서 배열 첫번째 항의 값을 호출할때 arr[0]이렇게 사용한것과 비슷한 느낌이다!

 

여기서 특이점은 createTodayExchangeRate 함수의 매개변수 wonPerDollar를 function 함수에서 사용하였다는점이다

 

If wonPerDollar가 1200원이라고 대입하면 function 에서의 wonPerDollar 값은 1200원으로 고정된다.

 

즉 1200원을 기준으로 환율을 계산해주는 function이 return이 된다

 

예시2) logo 클릭시 count가 하나씩 올라가게 하기

 

var icon = document.getElementById('logo');

 

var iconCount = 0; //초기값 0 설정

 

logo.addEventListener('click' , function(){

      iconCount ++;

      console.log(iconCount);

});

 

이런방식으로 해야하는데 화면에 클릭 count를 해야할 요소가 엄청 많다면 전부 초기값을 0으로 만들게 하기 위해 변수를 하나하나 추가해주어야 한다. 

 

그러나~!

 

여기서 클로저를 사용한다면?

 

var icon = document.getElementById('logo');

 

function createCounter(counter){ //여기서 counter가 격리가 되는 변수

    return function(){

        counter ++;

        console.log(counter);

  }

}

 

logo.addEventListener('click' , createCounter(0)); //초기값 0 으로 click 할때마다 하나식 counter가 증가한다

 

위와 같은 경우 counter가 격리되었으므로 즉 여러 요소에서도 createCounter를 이용한다면 변수를 추가 선언할필요 없이 가능해진다