JavaScript - 리스트 매핑시 여러가지 방법

<주요 이슈 요약>

 

⇒ 금액이 0보다 큰 금액이 있는 결제 SEQ 를 취소를 해야 하는 데, 0인 SEQ 는 제외해서 매핑

⇒ TASF 빼고 RV의 합산금액을 초과할수 없다. 취소가능금액 해당 payment 에 가능금액으로 RV 합산금액과 비교해서 사용

 

따라서 리스트를 매핑하는 과정에서 다양한 방법이 존재하길래 한번 정리해보았다.

onClickSave() {
    if (this.putForm.invalid || this._checkCancelAmountExceeds()) {
      this._checkValid = true;
      return;
    }

    const cancelItems = this.payments.value.flatMap((item) =>
      item.transactions
        .filter((transaction) => transaction.cancelAmount > 0 && transaction.cancelAmount != null) // 값이 없거나 0인 경우 제외
        .map((transaction) => ({
          test: transaction.test,
        })),
    );
    this.submitEvent.emit({ cancelItems });
  }

  private _checkCancelAmountExceeds() {
    const exceededPayments = this.payments.value.filter((payment) => {
      const airrvTransactions = payment.transactions.filter(
        (transaction) => transaction.typeCode === 'OK',
      );
      const totalCancelAmount = airrvTransactions.reduce(
        (sum, transaction) => sum + (transaction.cancelAmount || 0),
        0,
      );
      return totalCancelAmount > payment.cancelableAmount;
    });
    return exceededPayments.length > 0;
  }

 

대안 1: reduce를 사용한 방식

const cancelItems = this.payments.value.reduce((acc, item) => {
  const transactions = item.transactions.map((transaction) => ({
    test: transaction.test,
  }));
  return acc.concat(transactions);
}, []);

대안 2: for...of 반복문을 사용한 방식

const cancelItems = [];
for (const item of this.payments.value) {
  for (const transaction of item.transactions) {
    cancelItems.push({
          test: transaction.test,
    });
  }
}

대안 3: map과 concat 조합 방식

const cancelItems = [].concat(
  ...this.payments.value.map((item) =>
    item.transactions.map((transaction) => ({
        test: transaction.test,
    }))
  )
);

 

 

간단하게 테스트 코드를 작성해보았는데 여러가지 방법이 있지만 가독성 및 효율을 따져서 나의 픽은 flatMap 이었다. 

flatMap 과 reduce 는 잘 안쓰는 메서드 였는데 이번기회에 잘알게 되어서 좋은 경험이었다. 굳굳