JavaScript 함수의 매개변수와 반환값 완전 가이드

매개변수와 반환값이란?

매개변수(Parameter)는 함수가 작업을 수행하기 위해 필요한 입력값이고, 반환값(Return Value)은 함수가 작업을 완료한 후 돌려주는 결과값입니다. 이 둘은 함수를 재사용 가능하고 유연하게 만드는 핵심 요소입니다.

🔍 기본 개념

// 매개변수: name (입력)
// 반환값: 인사말 문자열 (출력)
function greet(name) {
    return "안녕하세요, " + name + "님!";
}

let message = greet("김철수"); // "안녕하세요, 김철수님!"
console.log(message);

---

매개변수 (Parameters)

매개변수는 함수가 외부로부터 받는 입력값으로, 함수의 유연성과 재사용성을 높여줍니다. JavaScript에서는 다양한 방식으로 매개변수를 활용할 수 있습니다.

기본 매개변수 문법

// 문법
function 함수이름(매개변수1, 매개변수2, ...) {
    // 매개변수를 사용한 로직
    return 결과값;
}

// 사용법
function add(a, b) {
    return a + b;
}

매개변수 기본 예제

// 매개변수가 없는 함수
function sayHello() {
    return "안녕하세요!";
}

// 매개변수가 1개인 함수
function square(number) {
    return number * number;
}

// 매개변수가 여러 개인 함수
function calculateRectangleArea(width, height) {
    return width * height;
}

// 함수 호출
console.log(sayHello());                    // "안녕하세요!"
console.log(square(5));                     // 25
console.log(calculateRectangleArea(4, 6));  // 24

실행 결과:

안녕하세요!
25
24

각 함수는 정의된 매개변수만큼의 인수를 받아 처리합니다. 매개변수 이름은 함수 내부에서 변수처럼 사용할 수 있습니다.

매개변수와 인수의 차이

// 매개변수 정의
function introduce(name, age, city) {  // name, age, city는 매개변수
    return `저는 ${name}이고, ${age}살이며, ${city}에 살고 있습니다.`;
}

// 함수 호출 시 전달하는 값들이 인수
let result = introduce("김철수", 25, "서울");  // "김철수", 25, "서울"은 인수
console.log(result);

실행 결과:

저는 김철수이고, 25살이며, 서울에 살고 있습니다.

매개변수 개수가 맞지 않는 경우

function testParameters(a, b, c) {
    console.log("a:", a);
    console.log("b:", b);
    console.log("c:", c);
    return a + b + c;
}

// 인수가 부족한 경우
console.log("=== 인수 부족 ===");
console.log(testParameters(1, 2)); // c는 undefined

// 인수가 많은 경우
console.log("=== 인수 과다 ===");
console.log(testParameters(1, 2, 3, 4, 5)); // 4, 5는 무시됨

실행 결과:

=== 인수 부족 ===
a: 1
b: 2
c: undefined
NaN

=== 인수 과다 ===
a: 1
b: 2
c: 3
6

부족한 매개변수는 undefined가 되고, 초과된 인수는 무시됩니다. undefined와 숫자를 더하면 NaN이 됩니다.

---

반환값 (Return Values)

반환값은 함수가 처리한 결과를 호출한 곳으로 돌려주는 값입니다. return 키워드를 사용하며, return문 이후의 코드는 실행되지 않습니다.

반환값 기본 문법

// 문법
function 함수이름(매개변수) {
    // 처리 로직
    return 반환할값;
    // return 이후 코드는 실행되지 않음
}

// 사용법
function multiply(x, y) {
    return x * y;
}

let result = multiply(3, 4); // result에 12가 저장됨

다양한 반환값 예제

// 1. 숫자 반환
function getAge() {
    return 25;
}

// 2. 문자열 반환
function getName() {
    return "김철수";
}

// 3. 불린 반환
function isAdult(age) {
    return age >= 18;
}

// 4. 객체 반환
function createUser(name, age) {
    return {
        name: name,
        age: age,
        isAdult: age >= 18
    };
}

// 5. 배열 반환
function getNumbers() {
    return [1, 2, 3, 4, 5];
}

// 사용 예제
console.log(getAge());              // 25
console.log(getName());             // "김철수"
console.log(isAdult(20));           // true
console.log(createUser("이영희", 17)); // {name: "이영희", age: 17, isAdult: false}
console.log(getNumbers());          // [1, 2, 3, 4, 5]

실행 결과:

25
김철수
true
{name: "이영희", age: 17, isAdult: false}
[1, 2, 3, 4, 5]

조건부 반환값

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

    // 위의 return문 중 하나가 실행되면 여기는 실행되지 않음
    console.log("이 코드는 실행되지 않습니다.");
}

console.log(getGrade(85));  // "B"
console.log(getGrade(55));  // "F"

실행 결과:

B
F

return문이 없는 경우

function printMessage(message) {
    console.log("메시지: " + message);
    // return문이 없음
}

function processData(data) {
    console.log("데이터 처리 중...");
    return; // 값 없이 return만 사용
}

let result1 = printMessage("안녕하세요");
let result2 = processData("test");

console.log("result1:", result1); // undefined
console.log("result2:", result2); // undefined

실행 결과:

메시지: 안녕하세요
데이터 처리 중...
result1: undefined
result2: undefined

return문이 없거나 값 없이 return만 사용하면 undefined가 반환됩니다.

---

고급 매개변수 기법

ES6 이후 JavaScript에서는 매개변수를 더욱 유연하게 사용할 수 있는 기능들이 추가되었습니다.

기본값 매개변수 (Default Parameters)

// ES6 이전 방식
function oldWayGreet(name, greeting) {
    greeting = greeting || "안녕하세요";
    return greeting + ", " + name + "님!";
}

// ES6 기본값 매개변수
function greet(name, greeting = "안녕하세요") {
    return `${greeting}, ${name}님!`;
}

console.log(greet("김철수"));              // "안녕하세요, 김철수님!"
console.log(greet("이영희", "반갑습니다"));   // "반갑습니다, 이영희님!"

// 복잡한 기본값 설정
function createUser(name, age = 18, role = "user", isActive = true) {
    return {
        name: name,
        age: age,
        role: role,
        isActive: isActive,
        createdAt: new Date()
    };
}

console.log(createUser("박민수"));
console.log(createUser("최지영", 25, "admin"));

나머지 매개변수 (Rest Parameters)

// 가변 개수의 인수를 받는 함수
function sum(...numbers) {
    let total = 0;
    for (let number of numbers) {
        total += number;
    }
    return total;
}

console.log(sum(1, 2, 3));           // 6
console.log(sum(1, 2, 3, 4, 5));     // 15
console.log(sum());                  // 0

// 첫 번째 매개변수와 나머지 매개변수 조합
function introduce(name, ...hobbies) {
    let hobbyText = hobbies.length > 0 ? 
        ` 취미는 ${hobbies.join(", ")}입니다.` : 
        " 취미가 없습니다.";

    return `저는 ${name}입니다.${hobbyText}`;
}

console.log(introduce("김철수"));
console.log(introduce("이영희", "독서", "영화감상", "요리"));

실행 결과:

6
15
0
저는 김철수입니다. 취미가 없습니다.
저는 이영희입니다. 취미는 독서, 영화감상, 요리입니다.

구조 분해 할당 매개변수

// 객체 구조 분해
function processUser({name, age, email = "없음"}) {
    return `이름: ${name}, 나이: ${age}, 이메일: ${email}`;
}

let user = {name: "김철수", age: 30};
console.log(processUser(user));

// 배열 구조 분해
function calculateDistance([x1, y1], [x2, y2]) {
    let dx = x2 - x1;
    let dy = y2 - y1;
    return Math.sqrt(dx * dx + dy * dy);
}

let point1 = [0, 0];
let point2 = [3, 4];
console.log(calculateDistance(point1, point2)); // 5

실행 결과:

이름: 김철수, 나이: 30, 이메일: 없음
5

---

실무 활용 패턴

🛠️ 유효성 검사 함수

function validateUser(name, age, email) {
    // 입력값 검증
    if (!name || typeof name !== 'string') {
        return {
            isValid: false,
            error: "이름은 필수이며 문자열이어야 합니다."
        };
    }

    if (!age || age < 0 || age > 150) {
        return {
            isValid: false,
            error: "나이는 0-150 사이의 숫자여야 합니다."
        };
    }

    if (!email || !email.includes('@')) {
        return {
            isValid: false,
            error: "올바른 이메일 형식이 아닙니다."
        };
    }

    return {
        isValid: true,
        user: { name, age, email }
    };
}

// 사용 예제
console.log(validateUser("김철수", 25, "kim@example.com"));
console.log(validateUser("", 25, "kim@example.com"));
console.log(validateUser("이영희", -5, "lee@example.com"));

💰 계산 함수들

// 세금 계산 함수
function calculateTax(price, taxRate = 0.1) {
    if (price < 0) {
        throw new Error("가격은 음수일 수 없습니다.");
    }
    return Math.round(price * taxRate);
}

// 할인 계산 함수
function applyDiscount(price, discountPercent = 0, maxDiscount = Infinity) {
    let discountAmount = price * (discountPercent / 100);
    discountAmount = Math.min(discountAmount, maxDiscount);
    return price - discountAmount;
}

// 최종 가격 계산 함수
function calculateFinalPrice(basePrice, options = {}) {
    const {
        taxRate = 0.1,
        discountPercent = 0,
        maxDiscount = Infinity,
        shippingCost = 0
    } = options;

    let discountedPrice = applyDiscount(basePrice, discountPercent, maxDiscount);
    let tax = calculateTax(discountedPrice, taxRate);
    let finalPrice = discountedPrice + tax + shippingCost;

    return {
        basePrice: basePrice,
        discountedPrice: discountedPrice,
        tax: tax,
        shippingCost: shippingCost,
        finalPrice: finalPrice
    };
}

// 사용 예제
let priceInfo = calculateFinalPrice(10000, {
    discountPercent: 20,
    maxDiscount: 1500,
    shippingCost: 3000
});

console.log(priceInfo);

실행 결과:

{
  basePrice: 10000,
  discountedPrice: 8500,
  tax: 850,
  shippingCost: 3000,
  finalPrice: 12350
}

📊 데이터 처리 함수

// 배열 통계 계산 함수
function calculateStats(numbers) {
    if (!Array.isArray(numbers) || numbers.length === 0) {
        return null;
    }

    let sum = numbers.reduce((acc, num) => acc + num, 0);
    let average = sum / numbers.length;
    let min = Math.min(...numbers);
    let max = Math.max(...numbers);

    // 중앙값 계산
    let sorted = [...numbers].sort((a, b) => a - b);
    let median;
    if (sorted.length % 2 === 0) {
        median = (sorted[sorted.length / 2 - 1] + sorted[sorted.length / 2]) / 2;
    } else {
        median = sorted[Math.floor(sorted.length / 2)];
    }

    return {
        count: numbers.length,
        sum: sum,
        average: Math.round(average * 100) / 100,
        min: min,
        max: max,
        median: median
    };
}

// 문자열 포맷팅 함수
function formatText(template, ...values) {
    return template.replace(/\{(\d+)\}/g, (match, index) => {
        return values[index] !== undefined ? values[index] : match;
    });
}

// 사용 예제
let scores = [85, 92, 78, 96, 88, 91, 84];
console.log(calculateStats(scores));

let message = formatText("안녕하세요, {0}님! 오늘은 {1}이고, 온도는 {2}도입니다.", 
                        "김철수", "월요일", 25);
console.log(message);

🔧 유틸리티 함수 패턴

// 함수 컴포지션을 위한 고차 함수
function compose(...functions) {
    return function(value) {
        return functions.reduceRight((acc, fn) => fn(acc), value);
    };
}

// 기본 함수들
const addTax = (price) => price * 1.1;
const applyDiscount = (price) => price * 0.9;
const formatCurrency = (price) => `₩${Math.round(price).toLocaleString()}`;

// 함수 조합
const processPrice = compose(formatCurrency, addTax, applyDiscount);

console.log(processPrice(10000)); // "₩9,900"

// 메모이제이션 함수
function memoize(fn) {
    const cache = new Map();

    return function(...args) {
        const key = JSON.stringify(args);

        if (cache.has(key)) {
            console.log("캐시에서 반환:", key);
            return cache.get(key);
        }

        const result = fn.apply(this, args);
        cache.set(key, result);
        console.log("계산 후 캐시에 저장:", key);
        return result;
    };
}

// 피보나치 함수에 메모이제이션 적용
const fibonacci = memoize(function(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(10)); // 55
console.log(fibonacci(10)); // 캐시에서 반환

---

마무리

JavaScript 함수의 매개변수와 반환값은 재사용 가능하고 유연한 코드를 작성하기 위한 핵심 요소입니다.

✅ 핵심 정리

1. 매개변수: 함수의 입력값, 함수를 유연하게 만드는 도구
2. 반환값: 함수의 출력값, return 키워드로 반환
3. 기본값 매개변수: ES6+ 기능으로 매개변수에 기본값 설정 가능
4. 나머지 매개변수: ... 문법으로 가변 개수의 인수 처리

매개변수와 반환값을 잘 활용하면 모듈화되고 테스트하기 쉬운 코드를 작성할 수 있습니다!