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

347p ~ 370p

요약

😇 reduce() 는 값을 요약하기도 하지만, 값을 만들 수도 있다.

유저가 장바구니를 잃어버렸지만 장바구니에 추가한 제품을 모두 배열로 로깅하고 있었을 때,
reduce()를 활용해 아래와 같이 장바구니를 다시 만들 수도 있고,

var itemsAdded = ["shirt", "shoes", "shirt", "socks", "...."];

var shoppingCart = reduce(itemsAdded, {}, addOne);

function addOne(cart, item) {
  if(!cart[item])
    return add_item(cart, {name: item, quantity: 1, price: priceLookup(item)});
  else {
    var quantity = cart[item].quantity;
    return setFieldByName(cart, item, 'quantity', quantity + 1)
  }
}

아래와 같이 구체적인 동작도 추가해 볼 수 있다.

var itemOps = [['add', "shirt"], 
               ['add', "shoes"],
               ['remove', "shirt"],
               ['add', "socks"],
               ['remove', "hat"],
              ];

var shoppingCart = reduce(itemOps, {}, function(cart, itemOp) {
  var op = itemOp[0];
  var item = itemOp[1];
  if(op === 'add')    return addOne(cart, item);
  if(op === 'remove') return removeOne(cart, item);
});

function removeOne(cart, item) {
  if(!cart[item])
    return cart;
  else {
    var quantity = cart[item].quantity;
    if(quantity === 1)
      return remove_item_by_name(cart, item);
    else
      return setFieldByName(cart, item, 'quantity', quantity - 1)
  }
}

이렇게 데이터를 인자처럼 활용하여 코드를 작성할 수도 있다. 유용하다.

😇 객체를 다루기 위한 고차함수 : update()

이전까지의 map(), filter(), reduce() 는 배열을 다루는 고차함수.
객체를 다루는 함수를 리팩토링 해보면서 update()를 도출해보자.

// 원래 코드
function incrementSize(item) {
  var size = item['size'];
  var newSize = size + 1;
  var newItem = objectSet(item, 'size', newSize);
  return newItem;
}

1. 암묵적 인자 드러내기 (코드의 냄새)

/// After expressing argument

function incrementField(item, field) {
  var value = item[field];
  var newValue = value + 1;
  var newItem = objectSet(item, field, newValue);
  return newItem;
}

2. 함수 본문을 콜백으로 바꾸기

/// Extracted

function incrementField(item, field) {
  return updateField(item, field, function(value) {
  return value + 1;
  });
}

3. 짜잔.

function updateField(item, field, modify) {
  var value = item[field];
  var newValue = modify(value);
  var newItem = objectSet(item, field, newValue);
  return newItem;
}

// 좀 더 일반적인 함수 시그니처로 변경
/// Called update()

function update(object, key, modify) {
  var value = object[key];
  var newValue = modify(value);
  var newObject = objectSet(object, key, newValue);
  return newObject;
}

😇 함수형 도구 update()

function update(object, key, modify) {
  var value = object[key];
  var newValue = modify(value);
  var newObject = objectSet(object, key, newValue);
  return newObject;
}

객체의 하나의 키에 하나의 값을 변경한다. like 외과 수술

{
  key1: X1,
  key2: Y1,
  key3: Z1,
}

⬇️
modifyY()
⬇️

{
  key1: X1,
  key2: Y2,	// here
  key3: Z1,
}

발췌

메모

다음 시간엔 update()를 활용해서,
조회하고 변경하고 설정하는 것을 update()로 교체하기 리팩터링을 해보자.