매개변수와 인수의 활용

매개변수 활용하기

• 매개변수는 함수의 실행단계에서 인수의 값을 받아, 함수내의 지정한 매개변수에 그 값을 전달하는 역할을 한다.
• 이를 활용하여 간단한 여러개의 함수를 하나로 줄일 수 있다.
• 매개변수 : parameter, 인수 : argument

예시

<!--HTML-->
<div id="text"> text </div>
<button onclick="hello()">Hello</button>
<button onclick="bye()">Bye</button>

//JS
function hello() {
	document.getElementById('text').innerHTML = "Hello";
}
function bye() {
	document.getElementById('text').innerHTML = "Bye";
}

• Hello와 Bye 버튼을 누르면 text가 각각 Hello 와 Bye로 바뀌는 코드
• 두 가지의 함수를 사용하여 각각 기능을 구현했다.

매개변수를 사용하여 코드 줄이기

<!--HTML-->
<div id="text"> text </div>
<button onclick="text('Hello')">Hello</button>
<button onclick="text('Bye')">Bye</button>

//JS
function text(here) {
	document.getElementById('text').innerHTML = here;
}

• 매개변수 here을 지정하여 인수로 각각 'Hello'와 'Bye' 를 받게 했고, 지정된 인수는 함수내부의 here에 대입된다.
• 이를 사용하여 두 개였던 함수를 하나의 함수로 줄이고 인수만 변경하여 사용할 수 있는 함수로 리팩토링(refactoring)했다.

예시(두개 이상의 매개변수 사용하기)

<!--HTML-->
<div id="text1"> text </div>
<div id="text2"> text </div>
<div id="text3"> text </div>
<div id="text4"> text </div>
<button onclick="change('text1','Changed text1')">Change</button>
<button onclick="change('text2','Changed text2')">Change</button>
<button onclick="change('text3','Changed text3')">Change</button>
<button onclick="change('text4','Changed text4')">Change</button>

<!--
첫번째 매개변수는 함수내에서 따옴표가 없으므로, 
인수를 작성할때는 따옴표를 작성해야 오류가 발생하지 않는다.
-->

//JS
function change(elementId, changeText) {
	document.getElementById(elementId).innerHTML = changeText;
}

• 각각의 매개변수에 HTML 요소의 id 와 변경될 텍스트를 지정하는 변수인 elementId, changeText 를 지정했다.
• 인수로 얻고자 하는 요소의 id와 변경하고자 하는 텍스트를 지정 할 수 있게 되었다.
• 원래라면 div 요소의 수만큼의 함수가 필요하겠지만, 다수의 매개변수와 인수를 이용하여 한줄의 함수로 해결 할 수 있다.