자바스크립트에서는 함수를 호출할 때 다양한 매개변수(parameter)를 전달할 수 있습니다. 함수 내부에서는 이렇게 전달받은 매개변수를 자유롭게 활용하여 원하는 작업을 수행할 수 있으며, 여러 개의 매개변수가 필요한 경우 쉼표(,)로 구분하여 나열하면 됩니다.
함수 매개변수의 기본 구조
함수를 정의할 때 소괄호 안에 매개변수 이름을 나열하고, 함수를 호출할 때 해당 위치에 실제 값(인수, argument)을 순서대로 넣어주면 됩니다. 전달된 값은 함수 본문 안에서 변수처럼 사용됩니다.
예제 코드
아래 예제는 두 개의 매개변수(name, age)를 받아 화면에 출력하는 간단한 함수입니다. 버튼을 클릭하면 sayHello 함수가 호출되면서 'John'과 27이라는 값이 전달됩니다.
<html>
<head>
<script>
function sayHello(name, age) {
document.write (name + " is " + age + " years old.");
}
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 함수가 호출됩니다</p>
<form>
<input type = "button" onclick = "sayHello('John', 27)" value = "Details">
</form>
</body>
</html>실행 결과
버튼을 클릭하면 다음과 같은 문장이 화면에 출력됩니다.
John is 27 years old.
정리
- 매개변수는 함수 정의 시 소괄호 안에 선언합니다.
- 여러 개의 매개변수는 쉼표로 구분합니다.
- 호출 시 전달하는 실제 값을 인수(argument)라고 부릅니다.
- 전달된 인수는 함수 내부에서 선언한 순서대로 매개변수에 대입됩니다.
이처럼 매개변수를 활용하면 하나의 함수를 다양한 입력값으로 재사용할 수 있어, 코드의 유연성과 가독성이 크게 향상됩니다.