함수 — 이름 붙인 작은 기계로 나누기

1.함수란 무엇인가 — 입력을 받아 결과를 돌려주는 기계

1강에서 프로그램을 입력 → 처리 → 출력으로 보았습니다. 함수는 그 구조를 작게 떼어 내 이름을 붙인 것입니다. 자판기를 떠올리면 쉽습니다. 돈과 버튼(입력)을 넣으면 안에서 무슨 일이 일어나는지 몰라도 음료(결과)가 나옵니다. 한 번 만들어 두면 같은 자판기를 몇 번이고 다시 쓸 수 있습니다.

함수가 없으면 같은 계산을 쓸 때마다 코드를 복사해야 합니다. 그러다 계산 규칙이 바뀌면 복사한 곳을 전부 찾아 고쳐야 하고, 한 곳이라도 빠뜨리면 결과가 서로 달라집니다. 함수로 만들어 두면 규칙은 한 곳에만 있고, 고칠 때도 그곳만 고치면 됩니다. 또 vatOf(price)처럼 이름만 봐도 무슨 일을 하는지 알 수 있어 코드가 문장처럼 읽힙니다.

함수를 만드는 것을 '정의한다', 쓰는 것을 '호출한다(부른다)'고 합니다. 정의만 해서는 아무 일도 일어나지 않습니다. 이름 뒤에 괄호를 붙여 vatOf(10000)처럼 불러야 비로소 본문이 실행됩니다. 괄호 없이 vatOf라고만 쓰면 함수 자체를 가리킬 뿐 실행되지 않으니 주의하세요.

function vatOf(price) {
  return price * 0.1;
}
console.log(vatOf(10000));
console.log(vatOf(25000));

1000
2500

2.매개변수와 반환값

함수 이름 뒤 괄호 안의 price를 매개변수라고 합니다. 함수 안에서 쓰는 '빈 칸의 이름'입니다. 호출할 때 넣는 실제 값 10000은 인자라고 부릅니다. 호출하면 인자가 매개변수에 담긴 채로 본문이 실행됩니다. 매개변수가 여러 개면 쉼표로 나누고, 인자는 적힌 순서대로 들어갑니다. 순서를 바꿔 넣으면 오류 없이 엉뚱한 결과가 나오니 순서가 중요합니다.

return은 결과를 호출한 곳으로 돌려주고 함수를 그 자리에서 끝냅니다. return 아래에 있는 줄은 실행되지 않습니다. return이 없거나 값 없이 return;만 쓰면 함수는 undefined를 돌려줍니다. 인자를 덜 넣으면 빠진 매개변수도 undefined가 되어, 계산에 쓰이면 2강에서 본 NaN이 나옵니다. JavaScript는 이런 경우에도 오류를 내지 않으므로 직접 확인해야 합니다.

인자가 없을 때 쓸 값을 미리 정해 둘 수도 있습니다. 매개변수 뒤에 = 값을 붙이면 기본값이 됩니다. 아래 코드에서 rate를 넣지 않으면 0.1이 쓰입니다. 기본값은 '보통은 이 값'인 설정에 잘 맞지만, 꼭 받아야 하는 값에 기본값을 붙이면 실수로 빠뜨려도 알아채지 못하니 가려 써야 합니다.

function rectArea(w, h) {
  return w * h;
}
console.log(rectArea(3, 4));
console.log(rectArea(3));

function tax(price, rate = 0.1) {
  return price * rate;
}
console.log(tax(20000));
console.log(tax(20000, 0.05));

12
NaN
2000
1000

3.`return`과 `console.log` — 가장 흔한 혼동

처음 함수를 배울 때 가장 많이 헷갈리는 것이 '돌려주기'와 '화면에 찍기'의 차이입니다. 둘 다 결과가 보이는 것 같지만 하는 일이 전혀 다릅니다. console.log는 사람이 보라고 값을 화면에 적는 것이고, 프로그램은 그 값을 이어서 쓸 수 없습니다. return은 값을 호출한 코드에게 건네주는 것이라, 받은 쪽에서 변수에 담거나 다른 계산에 넣을 수 있습니다.

아래 코드의 showDouble은 결과를 찍기만 하고 돌려주지 않습니다. 그래서 showDouble(4)를 변수에 담으면 화면에는 8이 찍히지만 변수에는 undefined가 들어가고, 거기에 1을 더하면 NaN이 됩니다. 계산기를 두드려 화면에 답을 띄운 것과, 그 답을 다음 계산에 넘겨준 것의 차이라고 생각하면 됩니다.

이 페이지의 실습 채점도 같은 원리입니다. 채점기는 함수를 불러 '돌려받은 값'을 기대값과 비교합니다. 함수 안에서 정답을 console.log로 찍기만 하면 화면에는 맞는 숫자가 보여도 채점은 실패합니다. 원칙은 간단합니다. 계산하는 함수는 return으로 돌려주고, 화면에 찍는 일은 함수를 부른 바깥에서 합니다.

function showDouble(x) {
  console.log(x * 2);
}
function double(x) {
  return x * 2;
}
const a = showDouble(4);
console.log('a 에 든 값', a, a + 1);
const b = double(4);
console.log('b 에 든 값', b, b + 1);

8
a 에 든 값 undefined NaN
b 에 든 값 8 9

4.화살표 함수 — 짧게 쓰는 다른 문법

함수는 const 이름 = (매개변수) => 식 모양으로도 쓸 수 있습니다. 이것을 화살표 함수라고 합니다. 화살표 오른쪽이 식 하나뿐이면 그 식의 값이 자동으로 돌려지므로 return을 쓰지 않습니다. 6강에서 배울 map·filter처럼 함수를 다른 함수에 넘길 때 특히 많이 쓰이고, AI가 짜 준 코드에서도 자주 보게 됩니다.

주의할 함정이 하나 있습니다. 화살표 오른쪽에 중괄호를 쓰면 그때부터는 일반 함수 본문처럼 취급되어 return을 직접 써야 합니다. 아래 bad는 중괄호 안에 식만 적고 return을 빠뜨려 undefined를 돌려줍니다. 오류가 나지 않으니 결과를 찍어 보기 전에는 모르고 넘어가기 쉽습니다. 짧으면 중괄호 없이, 여러 줄이면 중괄호와 return을 함께 쓴다고 기억하세요.

function으로 쓴 함수와 화살표 함수는 이 과정에서 다루는 범위에서는 같은 일을 합니다. 세부적으로 다른 점(예: this를 다루는 방식)이 있지만 기초 단계에서 몰라도 됩니다. 어느 한쪽이 더 '좋은' 것은 아니므로, 함께 일하는 사람이나 프로젝트가 쓰는 방식을 따르면 됩니다.

const add = (a, b) => a + b;
const square = (x) => x * x;
const bad = (x) => { x * x; };
const good = (x) => {
  const y = x * x;
  return y;
};
console.log(add(2, 3), square(4));
console.log(bad(4), good(4));

5 16
undefined 16

5.함수 안의 변수는 함수 안에서만 — 유효 범위

함수 안에서 let이나 const로 만든 변수는 그 함수 안에서만 보입니다. 이것을 유효 범위(스코프)라고 합니다. 함수가 끝나면 그 안의 변수도 사라지므로, 바깥에서 그 이름을 쓰면 ReferenceError가 납니다. 오류 메시지 is not defined는 '그런 이름은 여기서 보이지 않는다'는 뜻입니다. 메시지의 정확한 문구는 브라우저마다 조금씩 다를 수 있습니다.

처음에는 불편해 보이지만 이 규칙 덕분에 함수끼리 서로 방해하지 않습니다. 여러 함수가 각자 안에서 total이라는 이름을 써도 섞이지 않습니다. 함수 안에서 계산한 값을 바깥에서 쓰고 싶다면 바깥 변수를 몰래 바꾸지 말고 return으로 돌려주세요. 반복문과 조건문의 중괄호 안에서 만든 let·const도 마찬가지로 그 중괄호 안에서만 보입니다(4강에서 누적 변수를 반복문 위에 둔 까닭입니다).

function makeTotal() {
  const inside = 100;
  return inside + 1;
}
console.log(makeTotal());
console.log(inside);

101
ReferenceError: inside is not defined

6.작은 함수로 나누기

긴 계산을 한 덩어리로 짜면 어디서 틀렸는지 찾기 어렵습니다. 대신 '한 가지 일만 하는' 작은 함수 여러 개로 나누고 조립하면, 각 부품을 따로 시험할 수 있고 이름이 설명 역할을 합니다. 함수 이름은 getTotal, isAdult처럼 하는 일을 동사로 드러내고, 참·거짓을 돌려주는 함수는 is·has로 시작하는 관습이 있습니다.

나눌 곳을 찾는 질문은 '이 부분을 한 문장으로 설명할 수 있는가'입니다. '상품 가격을 모두 더한다', '합계에 따라 배송비를 정한다'처럼 한 문장이 되면 그것이 함수 하나입니다. 설명에 '그리고'가 여러 번 들어가면 더 나눌 수 있다는 신호입니다. 다만 한 줄짜리 계산을 지나치게 잘게 쪼개면 오히려 읽기 어려워지므로, 이름을 붙일 만한 의미가 있는 단위로 나눕니다.

function subtotal(prices) {
  let sum = 0;
  for (const p of prices) {
    sum += p;
  }
  return sum;
}
function shippingFee(sum) {
  return sum >= 50000 ? 0 : 3000;
}
function orderTotal(prices) {
  const sum = subtotal(prices);
  return sum + shippingFee(sum);
}
console.log(orderTotal([20000, 10000]));
console.log(orderTotal([30000, 20000]));

33000
50000

7.순수 함수와 테스트하기 쉬운 코드

같은 입력을 넣으면 언제나 같은 결과를 돌려주고, 바깥의 변수나 화면 같은 것을 바꾸지 않는 함수를 순수 함수라고 합니다. double(4)는 언제 불러도 8입니다. 반면 아래 addVisit은 바깥 변수 visits를 바꾸기 때문에 같은 호출이 부를 때마다 다른 값을 돌려줍니다. 이런 함수는 결과가 '지금까지 무슨 일이 있었는가'에 따라 달라져서 원인을 추적하기 어렵습니다.

순수 함수의 가장 큰 장점은 테스트가 쉽다는 것입니다. '이 입력이면 이 결과'라는 표만 있으면 되기 때문입니다. 함수를 만들면 보통 경우, 경계값(0, 빈 목록, 기준과 딱 같은 값), 이상한 입력을 몇 개 골라 기대값을 먼저 적고 결과와 비교해 보세요. 이 페이지 실습의 채점 방식이 바로 이것이고, 10강에서 AI가 짠 코드를 검증할 때도 같은 방법을 씁니다.

물론 모든 함수가 순수할 수는 없습니다. 화면에 찍고, 파일을 저장하고, 서버에 보내는 일은 바깥을 바꾸는 것이 목적입니다. 요령은 계산은 순수 함수로 따로 떼어 두고, 바깥을 바꾸는 일은 가장자리의 몇 군데에만 모으는 것입니다. 그러면 틀리기 쉬운 계산 부분은 표로 시험할 수 있고, 바깥을 바꾸는 부분은 짧아서 눈으로 확인하기 쉽습니다.

let visits = 0;
function addVisit() {
  visits++;
  return visits;
}
console.log(addVisit(), addVisit());

const nextCount = (n) => n + 1;
console.log(nextCount(0), nextCount(0));

1 2
1 1

const isAdult = (age) => age >= 19;
function check(input, want) {
  const got = isAdult(input);
  const ok = got === want;
  console.log(input, ok ? '통과' : '실패');
}
check(18, false);
check(19, true);
check(0, false);

18 통과
19 통과
0 통과