매개변수와 인수의 활용
11764 단어 JavaScriptJavaScript
매개변수 활용하기
- 매개변수는 함수의 실행단계에서 인수의 값을 받아, 함수내의 지정한 매개변수에 그 값을 전달하는 역할을 한다.
- 이를 활용하여 간단한 여러개의 함수를 하나로 줄일 수 있다.
- 매개변수 : 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 요소의 수만큼의 함수가 필요하겠지만, 다수의 매개변수와 인수를 이용하여 한줄의 함수로 해결 할 수 있다.
Author And Source
이 문제에 관하여(매개변수와 인수의 활용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chl4842/매개변수와-인수의-활용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)