자바스크립트 함수 완전 정복: 매개변수와 반환값의 모든 것

자바스크립트에서 함수(function) 는 프로그램의 기본 구성 요소이며, 코드의 재사용성과 가독성을 높이는 중요한 도구입니다. 특히, 매개변수(parameter) 와 반환값(return value) 을 적절히 활용하면 코드의 효율성을 극대화할 수 있습니다.

이 글에서는 자바스크립트 함수의 개념을 깊이 있게 탐구하고, 실무에서 유용하게 사용할 수 있는 매개변수 처리 기법과 반환값 활용법 을 상세히 설명하겠습니다.

---

🔹 함수란 무엇인가?

자바스크립트에서 함수는 특정 작업을 수행하는 독립적인 코드 블록 입니다. 함수는 프로그램을 논리적으로 조직하고, 중복된 코드를 줄이며, 유지보수를 쉽게 만들어 줍니다.

기본적인 함수 정의는 다음과 같습니다.

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

sayHello(); // 출력: 안녕하세요!

위 예제에서 sayHello 함수는 단순히 "안녕하세요!"를 출력하는 기능을 수행합니다. 하지만, 이렇게 고정된 값만 출력하는 함수는 활용도가 낮습니다. 이 문제를 해결하는 핵심 요소가 바로 매개변수와 반환값 입니다.

---

📌 매개변수 (Parameters)

매개변수란?
매개변수는 함수가 호출될 때 외부에서 전달받은 값을 의미합니다. 이를 통해 함수는 다양한 입력값을 기반으로 동작할 수 있으며, 코드의 재사용성을 높일 수 있습니다.

🔹 1. 기본적인 매개변수 사용법

매개변수를 활용하면 함수의 유연성이 증가합니다.

function greet(name) {
    return `안녕하세요, ${name}!`;
}

console.log(greet("철수")); // 출력: 안녕하세요, 철수!
console.log(greet("영희")); // 출력: 안녕하세요, 영희!

위 코드에서 name 은 함수 호출 시 전달되는 값이며, 이를 활용하여 동적으로 문장을 생성할 수 있습니다.

---

🔹 2. 여러 개의 매개변수 사용

함수는 하나 이상의 매개변수 를 가질 수 있으며, 이를 활용하면 복잡한 연산을 수행할 수 있습니다.

function add(a, b) {
    return a + b;
}

console.log(add(5, 3));  // 출력: 8
console.log(add(10, 20)); // 출력: 30

여러 개의 매개변수를 사용하면 보다 유연한 연산이 가능해집니다.

---

🔹 3. 기본값 (Default Parameters)

ES6에서는 매개변수의 기본값을 설정할 수 있어, 값이 제공되지 않을 경우 기본 동작을 수행 하도록 만들 수 있습니다.

function multiply(a, b = 1) {
    return a * b;
}

console.log(multiply(5));   // 출력: 5 (b의 기본값 1 사용)
console.log(multiply(5, 3)); // 출력: 15

기본값을 설정하면 매개변수가 생략되었을 때도 함수가 올바르게 동작합니다.

---

🔹 4. 나머지 매개변수 (Rest Parameters)

매개변수의 개수를 미리 알 수 없는 경우, 나머지 매개변수(Rest Parameters) 를 활용하여 여러 개의 값을 하나의 배열로 받을 수 있습니다.

function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3));       // 출력: 6
console.log(sum(10, 20, 30, 40)); // 출력: 100

나머지 매개변수는 가변적인 입력값을 처리할 때 유용합니다.

---

📌 반환값 (Return Value)

반환값이란?
함수는 실행이 완료된 후, 특정 결과값을 호출한 곳으로 돌려줄 수 있습니다. 이때 사용되는 것이 return 키워드입니다.

🔹 1. 기본적인 반환값 사용

function square(num) {
    return num * num;
}

const result = square(4);
console.log(result); // 출력: 16

위 코드에서 square(4) 함수가 실행되면 16이라는 값이 반환 되고, 이를 변수 result 에 저장할 수 있습니다.

---

🔹 2. 조건에 따른 반환

return 키워드는 함수 실행을 종료하는 역할도 합니다. 따라서 특정 조건에서만 값을 반환하도록 설계할 수 있습니다.

function checkEvenOdd(num) {
    if (num % 2 === 0) {
        return "짝수";
    } else {
        return "홀수";
    }
}

console.log(checkEvenOdd(10)); // 출력: 짝수
console.log(checkEvenOdd(7));  // 출력: 홀수

이처럼 함수가 상황에 따라 다른 값을 반환할 수도 있습니다.

---

🔹 3. 반환값이 없는 함수

return 문이 없는 함수는 기본적으로 undefined 를 반환합니다.

function doNothing() {}

const result = doNothing();
console.log(result); // 출력: undefined

이런 특성을 활용하여 특정 상황에서는 값을 반환하지 않도록 만들 수도 있습니다.

function logMessage(message) {
    if (!message) {
        return; // 아무 값도 반환하지 않음 (undefined 반환)
    }
    console.log("로그:", message);
}

logMessage("안녕하세요!"); // 출력: 로그: 안녕하세요!
logMessage(); // 아무 출력 없음

이와 같이 특정 조건에서만 값을 반환하는 방식도 유용하게 활용될 수 있습니다.

---

🏆 결론: 함수 활용을 극대화하는 방법

자바스크립트에서 함수를 잘 활용하면 코드의 재사용성, 가독성, 유지보수성 을 극대화할 수 있습니다.

✅ 매개변수 사용법 정리

• 기본 매개변수: 함수 호출 시 다양한 값을 전달 가능
• 여러 개의 매개변수: 두 개 이상의 값을 활용한 연산 가능
• 기본값 설정: 매개변수 생략 시에도 올바르게 동작하도록 보장
• 나머지 매개변수: 가변적인 개수의 인자를 처리 가능

✅ 반환값 사용법 정리

• return 키워드 활용: 함수의 실행 결과를 반환 가능
• 조건부 반환: 상황에 따라 다르게 동작하도록 설정 가능
• 반환값 없는 함수: 필요에 따라 특정 기능만 수행 가능