05. 계산에 이름 붙이고 입력 확인하기

01. 함수는 이름이 붙은 처리 절차입니다

부서마다 집행률 공식을 다시 쓰면 한 곳만 잘못 고칠 수 있습니다. 함수는 입력을 받아 정해진 일을 하고 결과를 돌려주는 절차입니다. function getRate(budget, spent) { ... }로 만들고 getRate(200, 50)으로 사용합니다. 만드는 쪽의 budget·spent는 입력값을 받을 이름인 매개변수이고, 호출할 때 넣는 200·50은 인수입니다.

function getRate(budget, spent) {
  return (spent / budget) * 100;
}
console.log(getRate(200, 50));
console.log(getRate(100, 80));

25
80

return은 결과를 호출한 쪽에 돌려주고 그 함수 실행을 끝냅니다. console.log는 확인용 출력이라서 역할이 다릅니다. 함수가 숫자 25를 반환하면 그 값을 다른 계산이나 화면 표시에 쓸 수 있습니다. return 없이 끝난 호출의 결과는 undefined입니다. 함수 안에서 만든 변수는 보통 함수 밖에서 바로 사용할 수 없으므로 필요한 결과를 반환합니다.

02. 계산보다 입력 검사가 먼저입니다

지출을 예산으로 나눌 때 예산 0은 의미 있는 집행률을 만들지 못합니다. JavaScript에서는 10÷0이 Infinity가 될 수 있으므로 실행 오류가 자동으로 날 것이라고 기대하면 안 됩니다. 입력 조건을 우리가 명시해야 합니다. 최종 계산기의 규칙은 만원 단위의 안전하게 표현되는 정수, 예산은 0 초과, 지출은 0 이상입니다. 이 정수 규칙은 교육용 단순화입니다.

1. 입력 원문을 읽습니다. 입력창의 value는 문자열입니다.
2. trim()으로 앞뒤 공백을 지우고 빈칸인지 먼저 확인합니다. 빈칸이면 입력을 요청합니다.
3. Number(raw)로 변환합니다. Number("abc")는 숫자가 아님을 나타내는 NaN이 됩니다.
4. Number.isFinite(value)로 NaN·Infinity를 거르고, Number.isSafeInteger(value)로 안전한 정수인지 확인합니다.
5. 예산과 지출의 허용 범위를 확인합니다. 통과한 뒤에만 계산합니다.

function readAmount(raw) {
  if (raw.trim() === "") {
    return "입력해 주세요";
  }
  const value = Number(raw);
  if (!Number.isFinite(value) || !Number.isSafeInteger(value) || value < 0) {
    return "0 이상의 정수를 입력해 주세요";
  }
  return value;
}
console.log(readAmount(""));
console.log(readAmount("abc"));
console.log(readAmount("0"));

입력해 주세요
0 이상의 정수를 입력해 주세요
0

위 연습 함수는 설명을 단순하게 하려고 성공하면 숫자, 실패하면 안내 문자열을 반환합니다. 최종 화면 예제는 오류 안내 후 처리를 멈추는 방식으로 작성합니다. 규모가 커지면 성공 여부·값·오류를 객체로 일관되게 반환하는 방식도 배울 수 있습니다.

03. 작게 나누면 확인하기 쉬워집니다

입력 확인, 비율 계산, 상태 판단, 화면 표시는 서로 다른 일입니다. 계산이 틀렸다면 화면 디자인을 바꾸기보다 getRate(200, 50)이 25인지 먼저 확인합니다. 함수의 입력과 출력을 적어 두면 프로그램을 읽는 사람도 같은 기준으로 시험할 수 있습니다.

04. 오류를 읽는 기본 순서

에러가 나오면 첫 메시지에서 이름과 위치를 봅니다. ReferenceError는 이름을 찾지 못했는지, SyntaxError는 괄호·따옴표가 닫혔는지, TypeError는 값의 종류나 사용 방법이 맞는지 확인합니다. 화면이 열리는 것과 계산이 옳은 것은 다르므로 메시지가 없더라도 예상 결과와 비교합니다.

선택 · TypeScript 함수의 입력과 출력 타입

function getRate(budget: number, spent: number): number {
  return (spent / budget) * 100;
}
console.log(getRate(200, 50));

괄호 안의 : number는 입력, 괄호 뒤의 : number는 반환값의 약속입니다. getRate("200", 50)을 시험하면 오류가 납니다. 타입 검사는 예산이 양수인지까지 보장하지 않습니다. 0·빈칸·음수 같은 업무 규칙은 계속 직접 검사해야 합니다.

W05-B처럼 숫자 또는 안내 문장을 반환한다면 반환 타입을 number | string으로 씁니다. 세로줄은 ‘숫자 또는 문자열 중 하나’라는 뜻이며, 예산0 검사 같은 업무 규칙은 그대로 유지합니다.