함수로 계산 묶기

입력을 받아 결과를 돌려주는 함수

함수는 이름을 붙여 둔 작업 묶음입니다. 같은 계산을 다른 값으로 여러 번 사용하고 싶을 때 함수를 만들면 계산 방법을 한 곳에 모을 수 있습니다. function add(first, second)에서 first와 second는 함수가 받을 값을 가리키는 매개변수입니다. add(4, 6)처럼 호출할 때 전달하는 4와 6은 인수입니다.

함수 안의 return은 결과를 호출한 곳으로 돌려주고 그 함수의 실행을 끝냅니다. 따라서 const sum = add(4, 6);은 함수가 반환한 10을 sum에 저장합니다. 함수를 선언하는 것과 호출하는 것은 다릅니다. 선언은 작업을 정의하고, 호출은 그 작업을 실제로 수행합니다.

실행 예제와 결과

function add(first, second) {
  return first + second;
}

function rectangleArea(width, height) {
  return width * height;
}

function divideOrMessage(value, divisor) {
  if (divisor === 0) {
    return "0으로 나눌 수 없습니다.";
  }
  return value / divisor;
}

const sum = add(4, 6);
console.log("합", sum);
console.log("다른 합", add(10, 3));
console.log("넓이", rectangleArea(5, 4));
console.log("나누기", divideOrMessage(12, 3));
console.log("0으로 나누기", divideOrMessage(12, 0));

add는 전달받은 두 값을 더하므로 두 호출의 결과는 10과 13입니다. rectangleArea는 가로와 세로를 곱해 20을 반환합니다. divideOrMessage는 나누는 수가 0이면 설명 문자열을 반환하고 즉시 끝납니다. 0이 아닐 때는 아래의 나눗셈 결과를 반환합니다.

반환과 출력의 차이

return은 결과를 호출한 곳에 전달하지만 자동으로 터미널에 출력하지는 않습니다. 화면에 보려면 반환값을 console.log에 전달해야 합니다. 반대로 함수 안에서 console.log만 호출하면 값을 화면에 보여 줄 수는 있어도 그 출력 자체가 계산 결과를 반환하는 것은 아닙니다. 반환값은 변수에 저장하거나 다른 계산에 사용할 수 있습니다.

예제의 divideOrMessage는 정상일 때 숫자를, 0으로 나눌 때 문자열을 반환합니다. 호출하는 쪽에서 두 종류의 결과를 구분해야 할 수 있으므로 실제 설계에서는 반환 규칙을 분명히 정해야 합니다. 여기서는 조건에 따라 서로 다른 결과를 돌려주는 흐름을 살펴봅니다. return 뒤에 같은 함수 안의 코드가 있더라도 해당 호출에서는 실행되지 않습니다.

호출하는 쪽과 함수 안을 오가며 읽기

const sum = add(4, 6);을 만나면 실행 흐름은 잠시 함수 안으로 들어갑니다. 매개변수 first는 4, second는 6을 받아 first + second를 계산합니다. return 10에 해당하는 동작이 끝나면 호출했던 위치로 돌아와 sum에 10을 연결합니다. 이후 출력 문장이 그 값을 읽습니다.

호출	함수가 받은 값	호출한 곳으로 돌아오는 값
add(4, 6)	4와 6	10
rectangleArea(5, 4)	가로 5와 세로 4	20
divideOrMessage(12, 3)	12와 3	숫자 4
divideOrMessage(12, 0)	12와 0	설명 문자열

함수의 이름과 인수의 순서도 사용 규칙에 해당합니다. 두 수를 더하는 함수는 순서를 바꾸어도 같은 결과지만 나누는 함수는 그렇지 않습니다. divideOrMessage(12, 3)과 divideOrMessage(3, 12)는 서로 다른 계산입니다. 이름만으로 충분하지 않다면 매개변수가 무엇을 뜻하는지 설명을 함께 남겨야 합니다.

결과를 반환하는 함수는 출력 방식을 바꾸기 쉽습니다. 같은 반환값을 터미널에서 보여주거나, 다른 계산에 사용하거나, 나중에는 웹 화면에 표시할 수 있습니다. 모든 계산 함수 안에 출력까지 섞으면 다른 용도로 재사용하기가 어려워집니다. 처음에는 계산하는 함수와 결과를 보여주는 console.log를 분리해 작성해보세요. 다만 이 예제는 입력이 숫자라는 전제이므로 문자열을 전달했을 때까지 같은 동작을 보장하지는 않습니다.

연습문제와 해설

숫자 하나를 받아 두 배를 반환하는 double 함수를 만들어 double(7)을 출력해 보세요. 함수 본문에 return value * 2;를 쓰고 호출할 때 7을 전달하면 결과는 14입니다. double(3)을 호출하면 같은 정의를 사용해 6을 얻습니다.

두 수의 합을 세 배로 만드는 계산도 생각해 보세요. 이미 만든 add를 이용해 add(2, 3) * 3을 계산하면 15입니다. 먼저 함수가 5를 반환하고, 그 반환값에 3을 곱하는 순서입니다. 결과를 출력만 할지 다른 계산에 재사용할지에 따라 저장과 출력 위치를 선택하면 됩니다.