자바스크립트에서는 함수를 호출할 때 다양한 매개변수(인자)를 전달할 수 있습니다. 이렇게 전달된 매개변수는 함수 내부에서 받아 자유롭게 조작하거나 활용할 수 있으며, 하나의 함수는 쉼표(,)로 구분하여 여러 개의 매개변수를 동시에 받을 수도 있습니다.
함수 매개변수의 기본 개념
함수를 정의할 때 괄호 안에 매개변수 이름을 나열하면, 함수가 호출될 때 전달된 값들이 순서대로 해당 변수에 할당됩니다. 또한 arguments 객체를 사용하면 함수에 실제로 전달된 모든 인자에 배열처럼 접근할 수 있어, 전달된 인자의 개수와 상관없이 유연하게 처리할 수 있습니다.
다음은 자바스크립트에서 함수 매개변수를 구현하는 예제 코드입니다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Function Parameters</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 함수에 전달된 매개변수를 확인할 수 있습니다.</h3>
<script>
let sampleEle = document.querySelector(".sample");
function test(param1, param2, param3, param4) {
sampleEle.innerHTML = "함수에 전달된 매개변수는 다음과 같습니다 <br>";
Array.from(arguments).forEach((element, index) => {
sampleEle.innerHTML += "매개변수 " + index + " = " + element + "<br>";
});
}
document.querySelector(".Btn").addEventListener("click", () => {
test("Hello", "world", 22, 99);
});
</script>
</body>
</html>출력 결과
"CLICK HERE" 버튼을 클릭하면 −
코드 설명
버튼을 클릭하면 test() 함수가 문자열 2개와 숫자 2개, 총 4개의 인자와 함께 호출됩니다. 함수 내부에서는 Array.from(arguments)를 통해 유사 배열 객체인 arguments를 진짜 배열로 변환한 뒤, forEach()로 각 인자를 순회하며 화면에 출력합니다. 이 방식은 매개변수의 개수가 정해져 있지 않은 가변 인자 함수를 만들 때 특히 유용합니다.