06. 업무 표를 데이터로 다루기

01. 객체는 이름 붙은 정보를 한 건으로 묶습니다

표에서 부서 한 행은 부서명, 예산, 지출을 함께 가집니다. 객체는 이런 관련 정보를 속성 이름과 값으로 묶습니다. { name: "기획", budget: 100, spent: 80 }에서 name·budget·spent는 속성 이름입니다. team.spent는 team 자료에서 spent 속성의 값을 읽습니다. 점 앞은 자료 이름, 점 뒤는 읽을 항목 이름입니다.

const team = { name: "기획", budget: 100, spent: 80 };
console.log(team.name);
console.log(team.spent);
console.log((team.spent / team.budget) * 100);

기획
80
80

중괄호가 조건문 뒤에서는 실행할 블록이었고, 여기서는 객체를 만드는 표기입니다. 앞뒤 문맥으로 역할을 구별합니다. 배열은 순서가 있는 여러 건, 객체는 이름이 붙은 한 건의 정보로 생각하면 시작하기 쉽습니다. teams[0].name은 ‘첫 자료의 부서명’입니다.

02. 객체를 배열에 넣으면 작은 표가 됩니다

const teams = [
  { name: "기획", budget: 100, spent: 80 },
  { name: "전략", budget: 300, spent: 160 }
];
let budgetTotal = 0;
let spentTotal = 0;
for (const team of teams) {
  budgetTotal = budgetTotal + team.budget;
  spentTotal = spentTotal + team.spent;
}
console.log(budgetTotal);
console.log(spentTotal);
console.log((spentTotal / budgetTotal) * 100);

400
240
60

반복문은 team에 한 부서씩 넣고 예산 합계와 지출 합계를 각각 갱신합니다. 전체 집행률은 240÷400×100=60%입니다. 개별 집행률의 단순평균 약 66.67%와 다릅니다. 전략 부서의 예산이 기획 부서의 세 배이기 때문입니다. 두 값은 서로 다른 질문에 답하므로 보고서 제목과 계산 정의에 맞게 사용합니다.

03. 값과 단위를 확인하면서 집계합니다

위 예제는 모든 행이 이미 검증되었다고 가정합니다. 실제 자료에 쉼표, ‘만원’ 문자열, 누락된 spent, 중복 부서가 있다면 먼저 처리 규칙을 정해야 합니다. 소수나 음수가 허용되는 업무도 별도 정의가 필요합니다. 프로그램은 애매한 자료를 자동으로 올바르게 해석하지 않습니다.

합계가 예상과 다르면 반복 안에 console.log(team.name, budgetTotal, spentTotal);을 넣어 어느 행에서 값이 달라지는지 봅니다. 이처럼 원인을 좁히는 작업을 디버깅이라고 합니다. 자료형 확인 → 첫 행 확인 → 중간 합계 확인 → 최종 수식 확인의 순서가 유용합니다. 오타인 team.spend는 정의되지 않은 속성이므로 undefined가 되고 계산 결과가 NaN으로 번질 수 있습니다.

{ "name": "기획", "budget": 100, "spent": 80 }

선택 · TypeScript로 표의 한 행에 모양 정하기

interface Team {
  name: string;
  budget: number;
  spent: number;
}
const team: Team = { name: "전략", budget: 300, spent: 160 };
console.log(team.spent);

interface는 객체가 가져야 할 속성 이름과 타입을 정합니다. spent를 빼거나 문자열로 바꿔 오류를 확인하세요. TypeScript는 외부 자료의 실제 내용을 자동 검증하지 않으므로 입력 검사를 대신하지 않습니다.

Team[]는 Team 객체가 여러 개 들어 있는 배열입니다. W06-B에서 const teams: Team[] = [...]로 작성하면 각 행의 속성과 타입을 함께 검사할 수 있습니다.