📌 자바스크립트 함수에서 인수와 반환값 이해하기

함수는 코드의 반복을 줄이고, 재사용성을 높이기 위한 중요한 도구입니다. 함수에 인수를 전달하고, 함수에서 반환값을 받는 과정은 함수의 핵심 개념 중 하나입니다. 이번 포스팅에서는 인수와 반환값의 개념을 명확히 하고, 이를 자바스크립트 함수에 어떻게 적용하는지 알아보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" contect="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인수 & 반환 </title>
    
</head>
<body>
    <div id="container"></div>    

    <script>

        console.log(createParagraph("첫번째 문단, 와우", "red"))
        console.log(createParagraph("두번째 문단도 여기에있어!", "blue"))
        console.log(createParagraph("세번째도 잊지 말라구 ", "green"))

        function createParagraph( content, color ){
            const p = document.createElement("p")
            p.style.color = color
            p.textContent = content
            document.querySelector("#container").append(p)

            return `방금 만든 태그의 콘텐츠 : ${content}, 색상: ${color}`
        }

        function sample(){
            console.log("반환 기능 테스트")
            return "짜자잔"
        }

        // sample 함수 실행 결과를 동적으로 DOM에 추가
        const result = sample();
        
        // 새 div 요소를 생성하고 결과를 추가
        const newDiv = document.createElement("div");
        newDiv.textContent = result;

        // 생성된 div 요소를 body에 추가
        document.body.appendChild(newDiv);

        console.log(sample())
        

    </script>
    
</body>
</html>

🎯 1. 함수에서 인수(Argument)란?

인수는 함수를 호출할 때 함수에게 전달하는 데이터를 의미합니다. 즉, 함수가 수행할 작업에 필요한 **"재료"**를 전달하는 것입니다.

🔹 함수 정의에서 매개변수(Parameter)

함수를 정의할 때는 이 인수를 받을 수 있도록 매개변수를 사용합니다. 매개변수는 함수 내부에서만 사용되는 변수이며, 인수는 외부에서 함수로 전달되는 데이터입니다.

✅ 예시

function greet(name) {
  console.log("안녕하세요, " + name + "님!");
}

greet("유노"); // "안녕하세요, 유노님!" 출력

name은 매개변수이고, "유노"는 인수입니다.

🎯 2. 함수에서 반환값(Return Value)란?

반환값은 함수가 작업을 마친 후 결과물을 호출한 곳에 돌려주는 값입니다. 함수가 처리한 데이터나 결과를 다시 사용할 수 있도록 반환하는 역할을 합니다.

🔹 return 키워드 사용

함수가 값을 반환하려면 return 키워드를 사용해야 합니다. 이 키워드는 두 가지 기능을 가지고 있습니다:

데이터 반환: 함수가 결과값을 반환할 수 있도록 합니다.
함수 종료: return은 함수를 강제로 종료시킬 수도 있습니다.

✅ 예시

function add(a, b) {
  return a + b;  // 반환값
}

let result = add(3, 5);
console.log(result); // 8 출력

add(3, 5) 호출 시, 3과 5는 인수로 전달되고, **return**을 통해 8을 반환합니다.

🎯 3. 함수에 매개변수 여러 개 사용하기

함수 정의 시, 매개변수는 원하는 만큼 추가할 수 있습니다. 여러 개의 매개변수를 사용할 때는 각 매개변수를 **쉼표(,)**로 구분해야 합니다.

✅ 예시

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

let result = multiply(2, 3, 4);
console.log(result); // 24 출력

이 예시에서 **a, b, c**는 매개변수로, 2, 3, 4는 인수입니다.

🚩 4. 결론

인수는 함수에 전달되는 데이터이며, 매개변수는 그 데이터를 받기 위한 변수입니다.
반환값은 함수가 처리한 데이터를 호출한 곳에 돌려주는 값입니다.
return 키워드를 사용하여 데이터를 반환하고, 함수를 종료할 수 있습니다.
함수에 매개변수를 여러 개 추가하여 다양한 작업을 처리할 수 있습니다.