16일차 - 2022.03.16

안병욱·2022년 3월 16일

오늘 공부한 내용 요약

< 퀴즈 >

reduce를 사용해 어떤 배열을 대상으로 하던 각각 map,filter와 같은 기능을 하도록 만들어보자

힌트
reduce 안의 callback을 잘 만들면 map, filter와 같은 기능을 하게 만들수 있다.

풀이

1) filter와 같은 기능을 하게 하기

let arr = [];

let arr1 = arr.reduce((a,b,c) => {
    a.push(b);
  return a;
},[]);

2) map와 같은 기능을 하게 하기

let arr = [];

let arr1 = arr.reduce((a,b,c) => {
	if (....) {
	a.push(~~);
	} else { 
	a.push(undefined);
}
	return a;
},[]);

어떤 기능을 넣던지 결과가 같다면 각각의 동작은 같은 기능을 하게 된다.

( 모던 JavaScript 튜토리얼 학습 )

1. call/apply와 데코레이터, 포워딩

데코레이터 - 인수로 받은 함수의 행동을 변경시켜주는 함수

function slow(x) {

  alert(`slow(${x})을/를 호출함`);
  return x;
}

function cachingDecorator(func) {
  let cache = new Map();

  return function(x) {
    if (cache.has(x)) {     // cache에 해당 키가 있으면
      return cache.get(x);  // 대응하는 값을 cache에서 읽어옵니다.
    }

    let result = func(x);   // 그렇지 않은 경우엔 func를 호출하고,

    cache.set(x, result);   // 그 결과를 캐싱(저장)합니다.
    return result; 
  };
}

slow = cachingDecorator(slow);

alert( slow(1) );                 // slow(1)이 저장되었습니다.
alert( "다시 호출: " + slow(1) );   // 동일한 결과

alert( slow(2) );                 // slow(2)가 저장되었습니다.
alert( "다시 호출: " + slow(2) );   // 윗줄과 동일한 결과

모든 함수를 대상으로 cachingDecorator를 호출할 수 있는데 이때 반환되는 것은 캐싱래퍼이다.
cachingDecorator(func) 을 호출하면 래퍼 function(x)이 반환된다.
바깥에서 보았을때 함수slow는 래퍼로 감싼 이후나 이전이나 동일.
캐싱기능이 추가된 것 뿐

Slow 본문을 수정하는 것보다 cachingDecorator를 수정할떄의 이점은
1. 원하는 함수 어디에든 cachingDecorator를 적용할 수 있다.
2. 캐싱 로직이 분리되어 slow 자체의 복잡성이 증가하지 않는다.
3. 필요하다면 여러 개의 데코레이터를 조합해서 사용할 수도 있다

(1과 이후의 내용은 당장 이해가 잘 안가 내일까지 더 학습해본 후 기재 예정)