JavaScript / 함수 선언과 호출, 매개변수와 반환값 사용법

JavaScript

작성일 2026-10-26 최근 수정일 2026-10-27

JavaScript 함수는 function 이름(매개변수) { ... }로 선언하고 이름(인수)로 호출합니다. 선언은 실행할 작업을 정의하는 것이며, 호출해야 함수 본문이 실행됩니다. 계산 결과를 호출한 곳에 전달하려면 return을 사용합니다.

함수 선언과 호출은 다른 작업입니다

function double(value) {
  return value * 2;
}

const result = double(4);
console.log(result); // 8

double은 함수 이름이고 value는 함수 안에서 사용하는 매개변수(parameter)입니다. 호출할 때 넘기는 숫자 4는 인수(argument)입니다. 이름이 붙은 함수를 정의하면 여러 위치에서 다른 인수로 같은 계산을 재사용할 수 있습니다. 함수를 만든 줄만 실행했다고 계산 결과가 자동으로 화면에 표시되지는 않습니다.

반환값과 화면 출력도 구분해야 합니다. return value * 2는 호출한 코드에 값을 넘기고, console.log()나 textContent 대입은 그 값을 어디에 표시할지를 정합니다. 계산 함수가 출력 영역을 직접 변경하지 않게 분리하면 결과를 다른 계산에도 다시 사용할 수 있습니다. MDN의 함수 안내에서 선언·호출·매개변수의 관계를 확인할 수 있습니다.

인수 생략과 return의 동작

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

greet("민수");    // "민수님 안녕하세요."
greet();          // "방문자님 안녕하세요."
greet(undefined); // "방문자님 안녕하세요."
greet(null);      // "null님 안녕하세요."

인수를 전달하지 않은 매개변수는 기본적으로 undefined가 됩니다. 위의 기본값 = "방문자"는 인수를 생략하거나 undefined를 전달했을 때 적용되며, null을 같은 방식으로 바꾸지는 않습니다. 기본값이 입력 검증을 모두 대신하는 것도 아니므로 허용할 자료형과 범위는 따로 정해야 합니다.

return이 실행되면 현재 함수는 그 지점에서 끝납니다. 반환할 값을 쓰지 않은 return;이나 끝까지 실행됐지만 return이 없는 일반 함수의 결과는 undefined입니다. 반환할 표현식을 return 바로 다음 줄로 내리면 세미콜론 자동 삽입 때문에 값이 반환되지 않을 수 있으므로 같은 줄에 쓰거나 여는 괄호를 같은 줄에 두세요. MDN의 return 설명에 종료 시점과 줄바꿈 규칙이 정리돼 있습니다.

함수 선언문과 함수 표현식 비교

console.log(add(2, 3)); // 5
function add(a, b) {
  return a + b;
}

const subtract = function (a, b) {
  return a - b;
};
console.log(subtract(5, 2)); // 3

일반적인 함수 선언문은 자신이 속한 범위에서 선언문보다 앞에 있는 호출에도 사용할 수 있습니다. 선언을 먼저 처리하는 이런 동작을 호이스팅(hoisting)이라고 부릅니다. 다만 블록 내부 선언의 범위를 넘어서 어디서나 호출할 수 있다는 뜻은 아닙니다.

const subtract = function ...는 함수 값을 변수에 대입하는 함수 표현식입니다. 해당 초기화가 실행된 뒤에 호출해야 합니다. 위 코드의 호출을 const subtract 앞쪽으로 옮기면 초기화 전 접근 오류가 발생합니다. 예제를 비교할 때는 선언 방식과 호출 위치를 함께 보세요.

입력·계산·출력을 분리한 전체 예제

아래 전체 코드를 function-demo.html에 UTF-8로 저장하고 브라우저에서 여세요. totalMinutes()는 계산만 담당하고, update()는 입력 검사와 결과 표시를 담당합니다. 스크립트는 HTML 요소 뒤에 두어 요소 선택 시점을 단순하게 했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>함수로 총 작업 시간 계산</title>
</head>
<body>
<h1>반복 작업 시간 계산</h1>
<label for="minutes">한 번의 시간(분)</label><input id="minutes" value="15">
<label for="sessions">횟수</label><input id="sessions" value="3">
<button id="calculate" type="button">계산</button>
<button id="restore" type="button">처음 값으로 복원</button>
<p id="output"></p>
<script>
function totalMinutes(minutes, count = 1) {
  return minutes * count;
}
const minutesInput = document.getElementById("minutes");
const sessionsInput = document.getElementById("sessions");
const output = document.getElementById("output");
function update() {
  const minutes = Number(minutesInput.value);
  const count = Number(sessionsInput.value);
  if (minutesInput.value.trim() === "" || sessionsInput.value.trim() === "" ||
      !Number.isFinite(minutes) || minutes <= 0 ||
      !Number.isInteger(count) || count < 1) {
    output.textContent = "양수인 시간과 1 이상의 정수 횟수를 입력하세요.";
    return;
  }
  const result = totalMinutes(minutes, count);
  output.textContent = `총 ${result}분`;
}
document.getElementById("calculate").addEventListener("click", update);
document.getElementById("restore").addEventListener("click", () => {
  minutesInput.value = "15";
  sessionsInput.value = "3";
  update();
});
update();
</script>
</body>
</html>

처음에는 15분을 3번 반복한 총 45분이 표시됩니다. 시간은 그대로 둔 채 횟수만 4로 바꾸고 ‘계산’을 누르면 60분이 됩니다. 횟수를 1.5로 바꾸면 이 예제의 “정수 횟수” 조건에 맞지 않아 안내가 표시되며, 빈 값이나 0 이하의 시간도 통과하지 않습니다. ‘처음 값으로 복원’으로 15분·3회의 조건을 되돌릴 수 있습니다.

totalMinutes(minutes, count = 1)를 totalMinutes(15)로 호출하면 기본 횟수 1을 사용해 15가 반환됩니다. 그러나 화면의 입력란을 비우는 것과 함수 인수를 생략하는 것은 다른 동작입니다. 입력값은 문자열이므로 예제에서는 먼저 비어 있는지 확인하고 변환 결과도 검사합니다. return;이 입력 오류 분기에서 함수를 끝내므로 잘못된 입력으로 계산을 계속하지 않습니다.

함수 자체를 전달할 때는 호출 괄호를 구분합니다

// 클릭할 때 update가 실행되도록 등록
button.addEventListener("click", update);

// 지금 실행하고 그 반환값을 전달하므로 위 코드와 다름
// button.addEventListener("click", update());

이 부분의 button은 이미 선택한 버튼 요소라는 전제입니다. 이벤트 등록에는 나중에 실행할 함수를 전달합니다. 예제의 마지막 update()는 처음 화면을 한 번 표시하려고 즉시 호출한 것이고, 클릭 이벤트에 전달한 update는 이후 클릭마다 실행할 함수 값입니다.

JavaScript는 선언한 매개변수보다 인수를 더 전달할 수 있지만, 그 값들이 언어 차원에서 언제나 사라지는 것은 아닙니다. 나머지 매개변수(rest parameter) ...items나 일반 함수의 arguments를 통해 처리할 수 있습니다. 처음에는 함수가 받아야 할 값과 반환해야 할 결과를 분명히 정하고, 호출 부분도 그 규칙에 맞춰 작성하세요.

JavaScript