함수란?
함수는 특정 동작(기능)을 수행하는 일부 코드의 집합이다.
'함수를 실행한다'는 것은 '함수를 호출'한다는 것과 같은 의미이다.
묶인 명령어를 반복적으로 사용할 수 있다는 재사용성 장점이 있지만 설계가 어렵다는 단점이 존재한다.
함수의 선언과 구조
함수도 사용하려면 선언을 해야 한다. => 함수 선언 >> 함수 호출
또한 기본적인 구조가 존재한다.
function [함수명] ([매개변수1, 매개변수2, ...]) {
실행문장;
...
return [반환값];
}
=> 함수 이름 뒤 괄호 안에 들어가는 데이터는 매개변수(파라미터)라고 한다. 매개변수는 함수 안에서만 사용 가능하다.
함수의 유형
함수의 유형은 총 4가지로 나눌 수 있다. 계산기 예제를 통해 각 유형을 살펴보자.
<body>
<h2>계산기</h2>
<p>N1 : <input type="number"></p>
<p>N2 : <input type="number"></p>
<button>+</button><button>-</button>
<button>*</button><button>/</button>
<p>결과 : <span></span></p>
</body>
<script>
const inputs = document.querySelectorAll("input");
const btns = document.querySelectorAll("button");
const sp = document.querySelector("span");
</script>위 코드는 아래에서 살펴볼 예제에서 모두 해당되는 코드이다.
1. 입력값(인자/파라미터)과 출력값(return/반환)이 있는 유형
btns[0].addEventListener("click", function() {
let n1 = Number(inputs[0].value);
let n2 = Number(inputs[1].value);
let result = add(n1, n2); // 1번 함수 호출
sp.innerHTML = result;
inputs[0].value = "";
inputs[1].value = "";
});
// 1번 함수 선언 방법
function add(num1, num2) {
let res = num1 + num2;
return res;
}
2. 입력값만 있는 유형
btns[1].addEventListener("click", function() {
let n1 = inputs[0].value;
let n2 = inputs[1].value;
sub(n1, n2); // 2번 함수 호출
})
// 2번 함수 선언 방법
function sub(num1, num2) {
let res = num1 - num2;
sp.innerHTML = res;
}
3. 출력값만 있는 유형
btns[2].addEventListener("click", function() {
let result = mul(); // 3번 함수 호출
sp.innerHTML = result;
inputs[0].value = "";
inputs[1].value = "";
});
// 3번 함수 선언 방법
function mul() {
let num1 = inputs[0].value;
let num2 = inputs[1].value;
let res = num1 * num2;
return res;
}
4. 입력값과 출력값이 모두 없는 유형
btns[3].addEventListener("click", function(){
div(); // 4번 함수 호출
inputs[0].value = "";
inputs[1].value = "";
});
// 4번 함수 선언 방법
function div() {
let num1 = inputs[0].value;
let num2 = inputs[1].value;
let res = num1 / num2;
sp.innerHTML = res;
}
'Js' 카테고리의 다른 글
| 16. 객체 (0) | 2022.09.09 |
|---|---|
| 15. classList 외 다양한 키워드 (0) | 2022.09.07 |
| 13. 다양한 for문 (0) | 2022.09.02 |
| 12. 배열 메소드 (0) | 2022.09.02 |
| 11. 참고 (0) | 2022.09.01 |
