책에 포함된 노트비개발자를 위한 JavaScript: 설치 없이 시작해 작은 프로젝트까지

함수로 자주 쓰는 일을 묶기

2026-07-09Views 7약 6분생성형 AI 활용

Summary

같은 일을 여러 번 쓰면 함수가 필요합니다

앞에서 우리는 조건문으로 상황을 나누고, 반복문으로 같은 일을 여러 번 실행했습니다. 그런데 이런 코드가 있다고 생각해 보겠습니다.

console.log("민지님, 주문이 완료되었습니다.");
console.log("결제 금액은 12000원입니다.");
console.log("이용해 주셔서 감사합니다.");

console.log("준호님, 주문이 완료되었습니다.");
console.log("결제 금액은 18000원입니다.");
console.log("이용해 주셔서 감사합니다.");

내용은 거의 같습니다. 이름과 금액만 다릅니다. 이런 코드를 계속 복사해 붙여 넣으면 처음에는 편해 보이지만, 나중에 문구를 바꿀 때 문제가 생깁니다. 모든 복사본을 찾아 고쳐야 하기 때문입니다.

함수는 이런 상황에서 사용합니다. 함수는 자주 쓰는 업무 절차를 저장해 둔 버튼과 같습니다. 버튼을 한 번 만들어 두면, 필요할 때마다 눌러서 같은 일을 실행할 수 있습니다.

함수로 자주 쓰는 일을 묶기 AI 생성 이미지

함수는 만들기와 실행하기가 다릅니다

함수를 만드는 기본 모양은 다음과 같습니다.

function sayThanks() {
  console.log("주문이 완료되었습니다.");
  console.log("이용해 주셔서 감사합니다.");
}

function은 "함수를 만들겠다"는 뜻입니다. sayThanks는 함수 이름입니다. 중괄호 {} 안에는 나중에 실행할 코드를 넣습니다.

하지만 이 코드를 콘솔에 입력해도 아직 문구가 출력되지 않습니다. 이유는 간단합니다. 지금은 버튼을 만든 것뿐이고, 아직 누르지 않았기 때문입니다.

함수를 실행하려면 함수 이름 뒤에 괄호를 붙입니다.

sayThanks();

이렇게 함수를 실행하는 일을 호출이라고 합니다.

function sayThanks() {
  console.log("주문이 완료되었습니다.");
  console.log("이용해 주셔서 감사합니다.");
}

sayThanks();
sayThanks();

위 코드는 같은 안내 문구를 두 번 출력합니다. 코드를 두 번 복사한 것이 아니라, 만들어 둔 함수를 두 번 호출한 것입니다.

초보자가 자주 하는 실수는 괄호를 빼는 것입니다.

sayThanks;

이 코드는 함수를 실행하지 않습니다. 콘솔에서는 함수 자체가 보이거나 아무 일도 일어나지 않는 것처럼 보일 수 있습니다. 함수를 실행하려면 항상 괄호까지 써야 합니다.

sayThanks();

매개변수와 인수: 커피 주문처럼 값 전달하기

함수는 매번 똑같은 일만 하지 않아도 됩니다. 호출할 때 값을 전달하면, 그 값에 맞춰 다른 결과를 만들 수 있습니다.

커피 주문을 떠올려 보겠습니다.

직원은 주문 절차를 알고 있습니다. 하지만 손님마다 이름, 수량, 가격이 다릅니다. 그래서 주문할 때 이런 정보를 전달합니다.

이름: 민지
수량: 2잔
한 잔 가격: 4500원

함수도 비슷합니다.

function orderCoffee(name, count, price) {
  const total = count * price;
  console.log(`${name}님, 커피 ${count}잔은 ${total}원입니다.`);
}

orderCoffee("민지", 2, 4500);
orderCoffee("준호", 1, 5000);

여기서 name, count, price를 매개변수라고 합니다. 매개변수는 함수가 값을 받기 위해 마련해 둔 자리입니다. 커피 주문서의 빈칸과 비슷합니다.

function orderCoffee(name, count, price) {

그리고 함수를 호출할 때 실제로 넣는 값인 "민지", 2, 4500을 인수라고 합니다.

orderCoffee("민지", 2, 4500);

정리하면 이렇습니다.

매개변수: 함수를 만들 때 정해 두는 빈칸
인수: 함수를 호출할 때 빈칸에 넣는 실제 값

인수는 순서대로 들어갑니다. 그래서 순서가 중요합니다.

orderCoffee(2, "민지", 4500);

이렇게 쓰면 name 자리에 2가 들어가고, count 자리에 "민지"가 들어갑니다. 사람이 보기에는 무엇을 의도했는지 짐작할 수 있지만, 자바스크립트는 순서대로만 처리합니다.

값이 이상하게 출력될 때는 먼저 함수 호출 부분을 확인하세요.

orderCoffee("민지", 2, 4500);

이름, 수량, 가격 순서가 함수의 매개변수 순서와 맞는지 보는 것이 중요합니다.

return은 결과를 함수 밖으로 돌려줍니다

지금까지는 함수 안에서 바로 console.log()로 출력했습니다. 그런데 실제 코드에서는 출력만 하는 것이 아니라, 계산 결과를 다른 곳에서 다시 써야 할 때가 많습니다.

예를 들어 세금 포함 가격을 계산해 보겠습니다.

function addTax(price) {
  const taxIncludedPrice = price * 1.1;
  return taxIncludedPrice;
}

const finalPrice = addTax(10000);
console.log(finalPrice);

return은 함수 안에서 만든 결과를 함수 바깥으로 돌려주는 역할을 합니다. 배달원이 계산 결과를 들고 함수 밖으로 나오는 모습이라고 생각하면 됩니다.

위 코드의 흐름은 이렇습니다.

addTax(10000)을 호출합니다.
price에 10000이 들어갑니다.
10000 * 1.1을 계산해 taxIncludedPrice에 담습니다.
return taxIncludedPrice;가 계산 결과를 함수 밖으로 돌려줍니다.
그 결과가 finalPrice에 저장됩니다.

console.log()와 return은 역할이 다릅니다.

function addTax(price) {
  const taxIncludedPrice = price * 1.1;
  console.log(taxIncludedPrice);
}

const finalPrice = addTax(10000);
console.log(finalPrice);

이 코드를 실행하면 세금 포함 가격은 한 번 출력되지만, finalPrice에는 원하는 숫자가 들어가지 않습니다. 함수가 값을 돌려주지 않았기 때문입니다. 이런 경우 finalPrice는 undefined가 됩니다.

계산 결과를 나중에 다시 써야 한다면 return을 사용하세요.

function addTax(price) {
  return price * 1.1;
}

const itemPrice = 20000;
const priceWithTax = addTax(itemPrice);

console.log(`세금 포함 가격은 ${priceWithTax}원입니다.`);

또 하나 기억할 점이 있습니다. 함수는 return을 만나면 그 자리에서 끝납니다.

function testReturn() {
  return "여기서 끝";
  console.log("이 문장은 실행되지 않습니다.");
}

console.log(testReturn());

return 아래에 있는 코드는 실행되지 않습니다. 그래서 return은 보통 함수의 마지막 결과를 정리하는 위치에 둡니다.

기본 함수 선언과 화살표 함수

자바스크립트 코드에서는 함수를 쓰는 두 가지 모양을 자주 보게 됩니다.

첫 번째는 지금까지 사용한 기본 함수 선언입니다.

function addTax(price) {
  return price * 1.1;
}

두 번째는 화살표 함수입니다.

const addTax = (price) => {
  return price * 1.1;
};

두 함수는 여기서는 같은 일을 합니다. price를 받아 세금 포함 가격을 돌려줍니다.

화살표 함수는 => 기호를 사용합니다. 모양이 화살표처럼 생겨서 화살표 함수라고 부릅니다. 최신 자바스크립트 코드에서 자주 보게 됩니다.

다만 처음 배울 때는 기본 함수 선언이 더 읽기 쉽습니다.

function 함수이름(매개변수) {
  return 결과;
}

이 구조가 눈에 익으면 화살표 함수도 어렵지 않게 읽을 수 있습니다. 지금은 "함수는 값을 받을 수 있고, 일을 한 뒤 결과를 돌려줄 수 있다"는 흐름을 먼저 익히면 충분합니다.

함수 안과 밖: 값이 보이는 범위

함수 안에서 만든 변수는 보통 함수 안에서만 사용할 수 있습니다. 이것을 유효 범위라고 합니다. 값이 보이는 범위라는 뜻입니다.

방 안에 붙인 메모를 떠올려 보겠습니다. 방 안에 있는 사람은 그 메모를 볼 수 있지만, 방 밖에 있는 사람은 볼 수 없습니다.

함수 안의 변수도 비슷합니다.

function makeMessage() {
  const message = "안녕하세요!";
  console.log(message);
}

makeMessage();
console.log(message);

첫 번째 console.log(message);는 함수 안에 있으므로 실행됩니다. 하지만 마지막 줄의 console.log(message);는 오류가 납니다. message는 함수 안에서 만든 변수라서 함수 밖에서는 보이지 않기 때문입니다.

콘솔에는 이런 오류가 보일 수 있습니다.

ReferenceError: message is not defined

이 오류는 "message라는 이름을 찾을 수 없다"는 뜻입니다. 이때는 변수 이름의 철자를 확인하고, 그 변수가 어느 위치에서 만들어졌는지 확인해야 합니다.

필요한 값은 함수 밖에서 억지로 꺼내려 하지 말고, return으로 돌려주는 편이 좋습니다.

function makeMessage(name) {
  return `${name}님, 환영합니다.`;
}

const message = makeMessage("민지");
console.log(message);

이렇게 하면 함수 안에서 만든 문장을 함수 밖에서 안전하게 사용할 수 있습니다.

작은 실습: 배송비 안내 함수 만들기

이제 조건문과 함수를 함께 사용해 보겠습니다. 주문 금액이 50000원 이상이면 배송비가 무료이고, 그렇지 않으면 배송비가 3000원인 함수를 만들겠습니다.

function getDeliveryFee(orderPrice) {
  if (orderPrice >= 50000) {
    return 0;
  }

  return 3000;
}

console.log(getDeliveryFee(60000));
console.log(getDeliveryFee(30000));

첫 번째 호출은 0을 출력합니다. 두 번째 호출은 3000을 출력합니다.

이제 이 함수를 다른 함수 안에서 사용해 보겠습니다.

function getDeliveryFee(orderPrice) {
  if (orderPrice >= 50000) {
    return 0;
  }

  return 3000;
}

function makeOrderMessage(userName, orderPrice) {
  const deliveryFee = getDeliveryFee(orderPrice);
  const totalPrice = orderPrice + deliveryFee;

  return `${userName}님의 최종 결제 금액은 ${totalPrice}원입니다.`;
}

const message1 = makeOrderMessage("민지", 60000);
const message2 = makeOrderMessage("준호", 30000);

console.log(message1);
console.log(message2);

여기서 makeOrderMessage 함수는 혼자 모든 일을 하지 않습니다. 배송비 계산은 getDeliveryFee 함수에게 맡깁니다. 이렇게 함수를 나누면 코드가 읽기 쉬워집니다.

getDeliveryFee: 배송비를 계산하는 함수
makeOrderMessage: 안내 문구를 만드는 함수

함수 이름만 봐도 어떤 일을 하는지 짐작할 수 있습니다. 좋은 함수 이름은 코드를 설명하는 짧은 문장과 같습니다.

함수 코드를 고칠 때 확인할 것

함수가 예상대로 동작하지 않으면 다음 순서로 확인하세요.

함수를 만들기만 하고 호출하지 않았는가?

function hello() {
  console.log("안녕하세요");
}

위 코드는 함수만 만든 상태입니다. 실행하려면 아래 줄이 필요합니다.

hello();

호출할 때 괄호를 빠뜨렸는가?

hello;

함수 이름만 쓰면 실행되지 않습니다.

hello();

인수의 순서가 매개변수와 맞는가?

function orderCoffee(name, count, price) {
  return `${name}님, 총 ${count * price}원입니다.`;
}

orderCoffee("민지", 2, 4500);

계산 결과를 밖에서 써야 하는데 return을 빼먹지 않았는가?

function addTax(price) {
  price * 1.1;
}

const result = addTax(10000);
console.log(result);

위 코드는 undefined가 나옵니다. 계산만 하고 돌려주지 않았기 때문입니다.

function addTax(price) {
  return price * 1.1;
}

정리

함수는 자주 쓰는 코드를 하나의 이름으로 묶는 방법입니다. 함수를 만들면 같은 코드를 여러 번 복사하지 않아도 됩니다.

함수는 만들기와 실행하기가 다릅니다. function으로 함수를 만들고, 함수이름()으로 호출합니다. 매개변수는 함수가 값을 받기 위한 자리이고, 인수는 호출할 때 실제로 넣는 값입니다.

return은 함수 안에서 만든 결과를 함수 밖으로 돌려줍니다. 계산 결과를 변수에 담거나 다른 코드에서 다시 사용하려면 return이 필요합니다.

함수 안에서 만든 변수는 보통 함수 밖에서 사용할 수 없습니다. 값이 필요하다면 함수 밖에서 억지로 찾기보다, 매개변수로 넣고 return으로 돌려받는 흐름을 사용하세요.

함수를 이해하면 코드가 짧아지는 것보다 더 중요한 변화가 생깁니다. 코드를 역할별로 나눌 수 있습니다. 이 습관은 다음 장에서 배열과 객체처럼 여러 값을 다룰 때 더 큰 도움이 됩니다.

책 목록

비개발자를 위한 JavaScript: 설치 없이 시작해 작은 프로젝트까지

전체 목차 보기