[ 기술 스터디 ] 클로저의 활용 방식

참고 :

https://meetup.toast.com/posts/90

1. 콜백 함수 내부에서 외부 데이터를 사용하기

let champions = ['Singid', 'Malphite', 'Maokai', 'Shen']

let $ul = documnet.createElement('ul'); 

let alertChampion = function (champion) {  // 클로저를 이용한 부분
	return function () { // (A)
    	alert(`you choose ${champion}`)
    }
}

champion.forEach(function (champion){
	let $li = document.createElement('li')
    $li.innerText = champion
  	$li.addEventListner('click', alertChampion(champion))
  	$li.appendChild($li)
})

addEventListner 내부에서

$li.addEventListner('click', function(){
	alert(`you choose ${champion}`)
})

이런 식으로 사용해도 되지만, 클로저를 이용하여 반복을 줄일 수 있었으며 외부 데이터를 콜백함수(여기서는 (A)를 의미)에 전달할 수 있었다.

2. 반복의 제거

클로저를 이용한 커링함수를 사용해서 지연 실행에 의해 재사용이 가능한 코드를 만들 수 있다.

지연실행 : 정보를 일부만 받다가 마지막 인자까지 주어지면 함수가 실행되는 함수

let parrot = function (equipment) {
	return function (exercise) {
      return function (reps) {
      	return `${equipment}-${exercise}를 ${reps}번 실행은 로이더만 가능`
      }
    }
}

//
let parrot = equipment => exercise => reps => `${equipment}-${exercise}를 ${reps}번 실행은 로이더만 가능`

위는 장난식으로 작성했지만 아래처럼 작성하여 활용하면 좋을 것 같다.

let getPost = baseUrl => path => id => fetch(baseUrl + path + '/' + id)

이런 식으로 작성하면 공통적인 요소는 놔두고 id값 만을 이용해서 서버에 요청할 수 있다.

3. 은닉화

클로저를 활용해서 은닉화를 구현할 수 있지만 함수에서 이런 행위가 필요한 경우가 지금까지의 경험 내에서는 잘 생각나지 않는다.

function makeSingidOverPower(){
  let champion = 'singid'
  
  return function () {
  	console.log(champion)
  }
}

let op = makeSingidOverPower()
op() // 'singid'

이렇게 하면 신지드는 영원히 OP챔프가 된다.