함수 — 코드를 묶어서 재사용하기 | 파란여우

같은 코드를 여러 번 써야 한다면

점수를 입력하면 등급을 알려주는 코드를 5명의 점수에 각각 적용하려면 같은 if-else 블록을 5번 써야 할까요? 그렇지 않습니다. 함수로 묶으면 한 번만 정의하고 여러 번 호출할 수 있습니다.

함수 선언과 호출

// 함수 선언 (정의)
function greet() {
  console.log("안녕하세요!");
  console.log("반갑습니다.");
}

// 함수 호출 (실행)
greet();   // 안녕하세요! 반갑습니다.
greet();   // 다시 실행
greet();   // 또 실행

매개변수 (Parameter)

함수에 값을 전달합니다.

function greet(name) {
  console.log(`안녕하세요, ${name}님!`);
}

greet("홍길동");    // 안녕하세요, 홍길동님!
greet("김철수");    // 안녕하세요, 김철수님!
greet("이영희");    // 안녕하세요, 이영희님!

여러 개의 매개변수:

function introduce(name, age, school) {
  console.log(`저는 ${school} ${age}학년 ${name}입니다.`);
}

introduce("홍길동", 2, "OO중학교");

반환값 (Return)

함수가 결과를 돌려줍니다.

function add(a, b) {
  return a + b;
}

let result = add(3, 5);
console.log(result);   // 8
console.log(add(10, 20));   // 30

return 을 만나면 함수가 즉시 종료되고 값을 반환합니다.

function getGrade(score) {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
  if (score >= 70) return "C";
  return "D";
}

console.log(getGrade(95));   // A
console.log(getGrade(73));   // C
console.log(getGrade(55));   // D

기본값 (Default Parameter)

매개변수에 기본값을 설정할 수 있습니다.

function greet(name = "방문자") {
  console.log(`안녕하세요, ${name}님!`);
}

greet("홍길동");   // 안녕하세요, 홍길동님!
greet();           // 안녕하세요, 방문자님!  (기본값 사용)

화살표 함수 (Arrow Function)

더 짧게 함수를 쓰는 현대적인 방법입니다.

// 일반 함수
function add(a, b) {
  return a + b;
}

// 화살표 함수
const add = (a, b) => {
  return a + b;
};

// 한 줄이면 return 생략 가능
const add = (a, b) => a + b;

// 매개변수가 하나면 괄호 생략 가능
const double = n => n * 2;

실전 함수 예제

BMI 계산기

function calculateBMI(weight, height) {
  const heightInMeter = height / 100;
  const bmi = weight / (heightInMeter ** 2);
  return bmi.toFixed(1);   // 소수점 1자리
}

function getBMIStatus(bmi) {
  if (bmi < 18.5) return "저체중";
  if (bmi < 23)   return "정상";
  if (bmi < 25)   return "과체중";
  return "비만";
}

const bmi = calculateBMI(60, 170);
console.log(`BMI: ${bmi}`);
console.log(`상태: ${getBMIStatus(bmi)}`);

배열의 합계와 평균

function getSum(numbers) {
  let total = 0;
  for (let num of numbers) {
    total += num;
  }
  return total;
}

function getAverage(numbers) {
  return getSum(numbers) / numbers.length;
}

const scores = [85, 92, 78, 95, 88];
console.log(`합계: ${getSum(scores)}`);       // 438
console.log(`평균: ${getAverage(scores)}`);   // 87.6

함수도 변수에 담을 수 있다

// 함수 표현식
const greet = function(name) {
  return `안녕하세요, ${name}님!`;
};

// 화살표 함수도 변수에 담기
const greet = (name) => `안녕하세요, ${name}님!`;

// 나중에 호출
console.log(greet("홍길동"));

직접 해보기 ✏️

다음 함수들을 직접 작성해보세요.

isEven(number) — 짝수이면 true, 홀수이면 false 반환

// 힌트: % 연산자 사용
isEven(4)   // true
isEven(7)   // false

repeat(str, n) — 문자열을 n번 반복한 결과 반환

repeat("안녕", 3)   // "안녕안녕안녕"

max(a, b) — 두 숫자 중 더 큰 수 반환

정리

개념	문법
함수 선언	`function 이름(매개변수) { }`
반환값	`return 값;`
기본값	`function f(x = 기본값)`
화살표 함수	`(매개변수) => 반환값`

다음 편에서는 DOM 조작 — JavaScript로 HTML 요소를 찾고 바꾸는 방법을 배웁니다. 드디어 화면에 직접 변화를 줄 수 있게 됩니다!