요약 구현

소개

이 랩에서는 "FinTech Valley"의 활기찬 스타트업 현장을 배경으로, 급성장하는 기술 회사의 재무 추적 시스템을 개선하는 임무를 맡은 신진 소프트웨어 엔지니어 Alex 의 입장이 되어보겠습니다. 회사의 재무팀은 조직의 전반적인 재정 상태를 동적으로 볼 수 있는 방법이 필요합니다. 여러분의 목표는 기존 웹 기반 회계 애플리케이션에 총 수입, 총 지출 및 순 잔액을 계산하고 표시하여 실시간 재무 통찰력을 제공하는 기능을 구현하는 것입니다.

지식 포인트:

• Array.prototype.filter()
• Array.prototype.reduce()

필터링 및 축약

JavaScript 의 Array.prototype.filter() 및 Array.prototype.reduce() 메서드는 배열 조작을 위한 강력한 도구로, 데이터 처리를 보다 효율적이고 간결하게 만들어줍니다. 이 메서드는 배열의 요소를 필터링하고 배열 요소의 값을 누적하는 데 사용됩니다.

Filter

filter() 메서드는 제공된 함수에 의해 구현된 테스트를 통과하는 모든 요소를 포함하는 새로운 배열을 생성합니다. 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.

구문:

let result = array.filter(function (element, index, array) {
  // Test condition
  return true; // or false
});

• element: 배열에서 처리 중인 현재 요소입니다.
• index (선택 사항): 현재 요소의 인덱스입니다.
• array (선택 사항): filter가 호출된 배열입니다.

예를 들어, 10 보다 큰 숫자를 필터링합니다.

let numbers = [5, 12, 8, 130, 44];
let filtered = numbers.filter(function (number) {
  return number > 10;
});
console.log(filtered); // Output: [12, 130, 44]

Reduce

reduce() 메서드는 배열의 각 요소에 대해 리듀서 함수 (사용자가 제공) 를 실행하여 단일 출력 값을 생성합니다.

구문:

let result = array.reduce(function (
  accumulator,
  currentValue,
  currentIndex,
  array
) {
  // Return the accumulated result
  return accumulator + currentValue;
}, initialValue);

• accumulator: 콜백의 반환 값을 누적합니다. 마지막 콜백 호출에서 이전에 반환된 누적 값 또는 initialValue (제공된 경우) 입니다.
• currentValue: 배열에서 처리 중인 현재 요소입니다.
• currentIndex (선택 사항): 처리 중인 현재 요소의 인덱스입니다.
• array (선택 사항): reduce가 호출된 배열입니다.

예를 들어, 배열의 모든 숫자의 합을 계산합니다.

let numbers = [5, 12, 8, 130, 44];
let total = numbers.reduce(function (accumulator, number) {
  return accumulator + number;
}, 0);
console.log(total); // Output: 199

이 두 가지 메서드를 염두에 두고, 다음 단계는 수입과 지출의 총액을 계산하는 것입니다.

요약 계산 로직 구현

이 단계에서는 총 수입, 총 지출 및 잔액을 계산하는 로직을 구현합니다. 여기에는 거래 기록을 반복하고, 수입과 지출을 합산하며, 순 잔액을 계산하는 JavaScript 함수를 추가하는 작업이 포함됩니다.

script.js에 다음을 작성하십시오.

document.addEventListener("DOMContentLoaded", function () {
  const updateSummary = () => {
    const totalIncome = records
      .filter((record) => record.type === "income")
      .reduce((acc, record) => acc + parseFloat(record.amount), 0);
    const totalExpense = records
      .filter((record) => record.type === "expense")
      .reduce((acc, record) => acc + parseFloat(record.amount), 0);
    const balance = totalIncome - totalExpense;

    totalIncomeEl.textContent = `Total Income: ${totalIncome}`;
    totalExpenseEl.textContent = `Total Expense: ${totalExpense}`;
    balanceEl.textContent = `Balance: ${balance}`;
  };

  // Function to save records to localStorage and update the UI
  const saveRecords = () => {
    localStorage.setItem("records", JSON.stringify(records));
    renderRecords();
    updateSummary();
  };
  renderRecords();
  updateSummary();
});

이 JavaScript 함수인 updateSummary는 records 배열에서 총 수입과 지출을 계산하고 잔액을 업데이트합니다. 그런 다음 요약 섹션의 해당 HTML 요소의 텍스트 내용을 업데이트합니다.

요약

이 랩에서는 "FinTech Valley"의 스타트업 회사의 재무 환경을 탐험하는 여정을 시작했습니다. Alex 의 역할을 수행하여 웹 기반 회계 도구를 개선하여 실시간 재무 요약을 제공했습니다. 동적 요약 기능을 통합함으로써 재무 팀이 회사의 재무 상태에 대한 즉각적인 통찰력을 얻을 수 있도록 하여 HTML, CSS 및 JavaScript 를 결합하여 대화형 및 유익한 웹 애플리케이션을 만드는 능력을 보여주었습니다. 이 경험을 통해 JavaScript 를 사용하여 DOM 을 조작하는 방법을 배우고 실제 애플리케이션 개발에 대한 이해도를 높였습니다.