19강. 함수로 동작 이름 붙이기

이번 강의의 결과물은 학습 진행 메시지를 계산하는 코드를 재사용 가능한 함수로 분리한 JavaScript 파일입니다.

?1. 이번 강의에서 해결할 문제

같은 진행률 계산을 여러 위치에 복사하면 조건이 바뀔 때 모든 복사본을 수정해야 합니다. 입력을 받아 결과를 만드는 동작에 이름을 붙이고 필요할 때 호출합니다.

✓학습 목표

• 같은 진행률 계산을 여러 위치에 복사하면 조건이 바뀔 때 모든 복사본을 수정해야 합니다. 입력을 받아 결과를 만드는 동작에 이름을 붙이고 필요할 때 호출합니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

• 함수 선언: 실행할 코드 묶음에 이름을 부여
• 매개변수: 함수가 받을 입력의 이름
• 인수: 호출할 때 전달하는 실제 값
• return: 호출한 위치로 결과를 돌려주고 함수 실행 종료
• 스코프: 이름을 사용할 수 있는 코드 범위

function add(left, right) {
  return left + right;
}

const result = add(2, 3);

함수는 호출 전까지 본문을 실행하지 않습니다. ECMAScript의 함수 선언과 실행 규칙은 TC39 ECMAScript 표준에 정의되어 있습니다.

</>3. 코드 예시

파일명: web-basics/portfolio/js/main.js

function createProgressMessage(completed, total) {
  if (completed === total) {
    return "모든 강의를 완료했습니다.";
  }

  if (completed >= total / 2) {
    return "절반 이상 완료했습니다.";
  }

  return "기초를 쌓는 중입니다.";
}

function calculateProgressPercent(completed, total) {
  const percent = (completed / total) * 100;
  return Math.round(percent);
}

const completedLessons = 19;
const totalLessons = 30;
const message = createProgressMessage(completedLessons, totalLessons);
const percent = calculateProgressPercent(completedLessons, totalLessons);

console.log(message);
console.log(`진행률: ${percent}%`);

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

→4. 코드가 동작하는 이유

1. 호출 시 전달한 두 숫자가 completed, total 매개변수에 연결됩니다.
2. createProgressMessage는 조건에 맞는 문자열을 반환합니다.
3. return이 실행되면 그 아래 함수 본문은 더 실행되지 않습니다.
4. percent는 함수 블록 안에서 선언되어 함수 밖에서는 사용할 수 없습니다.
5. 반환값은 변수에 저장하거나 다른 표현식에 사용할 수 있습니다.
6. 진행 기준이 바뀌면 함수 한 곳만 수정하면 모든 호출에 반영됩니다.

!5. 자주 하는 실수

• 함수를 선언만 하고 호출하지 않음
• console.log로 출력한 것을 return한 결과라고 생각함
• 반환값을 받아야 하는데 return을 빠뜨림
• 함수 안의 지역 변수를 밖에서 사용하려고 함
• 하나의 함수가 계산, DOM 수정, 로그 출력까지 너무 많은 책임을 가짐
• 매개변수 순서를 호출마다 다르게 전달함

✎6. 짧은 실습 과제

1. 완료 수 5, 15, 30으로 createProgressMessage를 세 번 호출합니다.
2. 두 값을 받아 "게임: Parcel Knight" 형태를 반환하는 formatProjectTitle 함수를 작성합니다.
3. 함수 안에서 선언한 변수를 밖에서 출력해 오류를 확인한 뒤 제거합니다.
4. console.log만 하는 함수와 값을 return하는 함수의 사용 차이를 기록합니다.
5. 0으로 나누는 입력을 막으려면 함수에 어떤 조건이 필요한지 생각해 봅니다.

완료 기준은 함수의 입력, 처리, 반환값을 각각 설명하고 같은 함수를 다른 인수로 재사용하는 것입니다.

?7. 이해 점검 질문 3개

1. 매개변수와 인수는 어떻게 다른가요?
2. return과 console.log는 각각 어떤 역할을 하나요?
3. 함수 안에서 선언한 percent를 함수 밖에서 바로 사용할 수 없는 이유는 무엇인가요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.