오늘은 underscore라이브러리를 구현해보는 과제를 받았다 구현해야 될 기능에는 map,filter,reduce,each,indexof 같은 배열 메소드를 위주로 구현을 해보았다 각각의 메소드들은 일반적으로 for 문과 if문을 이용해서 구현이 가능하였다 중요했던 점은 조건을 얼마나 자세하게 설정하고 for문을 사용하는 범위 또한 신중하게 짜야 했다
구현을 해야하는 메소드 중 함수 데코레이터와 관련된 기능을 구현해야 했다 이 기능은 대략적으로 설면하면 함수가 한번 사용되면 그 첫번째 리턴값을 기억하고 있다가 어떤 매개변수로 호출을 하던지 처음 해당하는 리턴값을 기억하고 있다가 리턴하는 데코레이터를 만드는 것이었다
나는 처음의 아 클로저 기능을 사용하면 되겠다 생각이 들었다 그래서 외부함수에 result변수를 만들었다.
return 해주는 함수에서 처음호출시 함수가 사용되었는지 체크하는 boolean값을 -> true 변경하고 result에 값을 저장하고 리턴을 해주었다
이후는 계속 호출시 boolean값이 true이기 때문에 else에 걸리는 실행문에서는 외부함수에 저장된 result를 리턴하는 과정을 작성했다.
내가 여기서 해맨 이유는 매개변수로 들어온 함수와 리턴으로 나간 함수를 똑같다고 생각한 것이다 그래서
decoFn=function(func){
let result;
let check;
return function(){
return result;
}
add=decoFn(function(x,y){return x+y})위 코드에서 func와 return으로 나간 함수를 헷갈려서 리턴으로 나갈 매개변수를 어디서 받아와야 할지 계속 고민 되었던 것이다 그래서 help desk를 찾아보니 내가 잘못 생각하고 있다는 것을 깨달았고 매개변수를 아래와 같이 전달 했다
decoFn=function(func){
let result;
let check;
return function(...nums){
return result=func(...nums);
}
add=decoFn(function(x,y){return x+y})이 문제를 끝으로 오늘 일정은 끝났지만 내가 클로저에 대한 이해가 부족한것 같아서 조금 더 찾아보면 공부를 하였다 그래서 PoiemaWeb 과 생활코딩에서 클로저에 대한 내용을 공부했고 기억나는 개념을 아래와 같다
클로저
-
클로저는 외부에서 데이터를 접근하지 못하게 하고 이를 수정하기 위해 사용하고 이는 보완성을 높여준다
-
클로저가 외부에서 함수에 접근하는 원리는 실행 컨텍스트가 외부함수가 종료되어도 내부함수는 외부함수의 변수의 경로를 실행 컨텍스트에 저장하고 있기 때문에 접근이 가능하다
-
대표적인 예제로는 아래 예제가 있다
<!DOCTYPE html>
<html>
<body>
<p>클로저를 사용한 Counting</p>
<button id="inclease">+</button>
<p id="count">0</p>
<script>
var incleaseBtn = document.getElementById('inclease');
var count = document.getElementById('count');
var increase = (function () {
// 카운트 상태를 유지하기 위한 자유 변수
var counter = 0;
// 클로저를 반환
return function () {
return ++counter;
};
}());
incleaseBtn.onclick = function () {
count.innerHTML = increase();
};
</script>
</body>
</html>위 코드는 카운터를 유지하면서 외부에서는 접근할수 없게 보완성을 유지하고 또 클로저를 이용하여 카운터를 늘릴 수 있고 또 즉시 호출하는 함수 표현식(IIFE)를 사용하여 할당하였으므로 이 표현식에 접근할 수 없는 보완성또한 높인 좋은 코드 예제인것 같다
결론
오늘은 내가 배우던 내용을 확인해 볼수 있는 과제였고 클로저의 개념을 내가 제대로 이해하지 못했다는 것을 알게 해주었다
