📕[책] 쏙쏙 들어오는 함수형 코딩 - 29,30

327p ~ 346p

요약

😇 스트림 결합 (stream fusion)

• map(), filter(), reduce() 체인을 최적화 하는 것.

• 최적화일 뿐이고 병목이 발생했을 때만 사용하는 것이 좋다.
  대부분의 경우 여러 단계를 사용하는 것이 더 명확하고 읽기 쉽다.

  • map

  /// Two map() steps in a row
  
  var names = map(customers, getFullName);
  var nameLengths = map(names, stringLength);
  
  /// Equivalent as a single map() step
  
  var nameLengths = map(customers, function(customer) {
    return stringLength(getFullName(customer));
  });

  • filter

  /// Two filter() steps in a row
  
  var goodCustomers = filter(customers, isGoodCustomer);
  var withAddresses = filter(goodCustomers, hasAddress);
  
  /// Equivalent as a single filter() step
  
  var withAddresses = filter(customers, function(customer) {
    return isGoodCustomer(customer) && hasAddress(customer);
  });

  • reduce

  /// map() step followed by reduce() step
  
  var purchaseTotals = map(purchases, getPurchaseTotal);
  var purchaseSum = reduce(purchaseTotals, 0, plus);
  
  /// Equivalent as a single reduce() step
  
  var purchaseSum = reduce(purchases, 0, function(total, purchase) {
    return total + getPurchaseTotal(purchase);
  });

😇 반복문을 함수형 도구로 리팩터링 하기

리팩터링 할 코드.
배열 특정 부분의 연속된 데이터인 window의 평균을 구하고, 결과에 추가한다.
이를 배열의 시작부터 끝까지 반복.

var answer = [];
var window = 5;
for(var i = 0; i < array.length; i++) {
  var sum = 0;
  var count = 0;
  for(var w = 0; w < window; w++) {		// 1
    var idx = i + w;					// 2
    if(idx < array.length) {
      sum += array[idx];				// 3
      count += 1;
    }
  }
  answer.push(sum/count);
}

Tip 1. 데이터를 배열에 담기

• 주석 1, 2, 3 을 보면, 값이 계속 바뀌지만 배열로 만들지는 않고 있다.

• 데이터를 배열에 넣으면 함수형 도구를 쓸 수 있다.

• 코드를 보면 반복문을 통해서 window라는 범위를 추상적으로 사용하는데, 이를 명시적인 배열로 추출하면 함수형 도구를 쓸 수 있게된다.

  /// make subarray
  var answer = [];
  var window = 5;
  
  for(var i = 0; i < array.length; i++) {
    var sum = 0;
    var count = 0;
    var subarray = array.slice(i, i + window);  //here
    for(var w = 0; w < subarray.length; w++) {
      sum += subarray[w];
      count += 1;
    }
    answer.push(sum/count);
  }

Tip 2. 한 번에 전체 배열을 조작하기

• 위에서 데이터를 배열로 만든 것을, 함수형 도구를 이용해 '한 번에' 조작한다.

  /// Using average
  var answer = [];
  var window = 5;
  
  for(var i = 0; i < array.length; i++) {
    var subarray = array.slice(i, i + window);
    answer.push(average(subarray));
  }

• 가장 상위의 for문 에서도, i값이 계속 바뀌면서 사용되고 있지만, 배열로 만들어지지는 않고 있다.

• 이 또한 1) 데이터를 배열에 넣고, 2) 한 번에 조작하도록 개선한다.

  // make range (set of indices)
  function range(start, end) {
    var ret = [];
    for(var i = start; i < end; i++)
      ret.push(i);
    return ret;
  }
  var indices = range(0, array.length);
  var window = 5;
  
  var answer = map(indices, function(i) {
    var subarray = array.slice(i, i + window);
    return average(subarray);
  });

Tip 3. 작은 단계로 나누기

• 현재 map()에 넘기는 콜백에서 두 가지의 일을 하고 있다.

  • 하위 배열 만들기
  • 평균을 계산하기

• 이를 작은 단계로 나누어 작업이 더 명확하게 보이도록 한다.

  /// in two steps
  var indices = range(0, array.length);
  var window = 5;
  
  var windows = map(indices, function(i) {	// make subset
    return array.slice(i, i + window);
  });
  
  var answer = map(windows, average);		// calculate average

😇 결과

• 처음에는 반복문이 중첩되고, 인덱스를 계산하며, 지역변수를 바꾸는 코드.
• 이 과정을 각 단계로 나눠 명확하게 만들었음. 글로도 그대로 바꿔 쓸 수 있다.

배열을 이동하며 평균 구하기
1. 숫자 리스트가 있을 때 각 숫자에 대한 window를 만듭니다.
2. 그리고 각 window의 평균을 구합니다.

😇 체이닝 팁 요약

• 함수형 도구는 배열 전체를 다룰 때 잘 동작한다.
• 배열 일부에 대해 동작하는 반복문이 있다면, 배열 일부를 새로운 배열로 나눌 수 있다.
• map(), filter(), reduce()는 함수형 도구의 전부가 아니다. 함수를 추출하고 좋은 이름을 붙여 사용하자!

발췌

체이닝 디버깅을 위한 팁

1. 변수명 잘 짓기.
   각 단계에서 어떤 것을 하고 있는지 알기 쉽게 이름을 잘 지어야 한다.

2. 출력해보기.
   최고의 근본 디버그 print문. 각 단계를 출력해 보면서 확인.

3. 타입을 따라가 보기.
   자바스크립트처럼 타입이 없는 언어를 사용해도 함수형 도구는 타입이 있다. 다만 컴파일 타임에 검사하지 않을 뿐.

   • map()이 리턴하는 새로운 배열에는, 콜백이 리턴하는 타입의 값.
   • reduce()의 결과값의 타입은, 초기값의 타입 그리고 콜백이 리턴하는 값의 타입과 같다.

메모

리팩토링 된 모습을 보니 깔끔하긴 하네...