더보기
JavaScript의 함수에 대해 알아보자
선언적 함수
[ 표현법 ]
function 함수명(매개변수명, 매개변수명) {
해당 함수 호출 시 실행할 소스코드들;
return 결과값
};
👉🏻 반환할 결과값이 없는 경우 return 구문 생략 가능
👉🏻 매개변수가 없는 경우 매개변수명들 생략 가능
<button onclick="test1();">실행확인</button>
<div id="area1" class="area"></div>
<script>
function test1() {
document.getElementById("area1").innerHTML += "test1() 함수 실행됨 <br>";
// 이렇게 한 줄로도 쓸 수 있음
}
</script>
익명 함수
👉🏻 특정 변수나 속성에 "대입"되는 함수 제시 시 주로 사용됨
(주로 이벤트 핸들러 작성 시 사용)
[ 표현법 ]
변수 = function(매개변수명, 매개변수명, ...) {
소스코드;
}
<button id="btn2">실행확인</button>
<div id="area2" class="area"></div>
<script>
var btn2 = document.getElementById("btn2"); // 버튼 요소 객체
btn2.onclick = function() { // 이벤트속성에 대입되는 function == 이벤트 핸들러
document.getElementById("area2").innerHTML += "이벤트 핸들러를 통해 실행됨 <br>";
// 오로지 대입되는 타켓에만 적용됨, 두고두고 쓸 수 없음 (익명 함수의 특징)
}
</script>
함수의 매개변수
👉🏻 정의해 둔 매개변수보다 더 많이 혹은 더 적게 전달하기가 가능함
👉🏻 단! 초과된 전달값은 무시되고, 미달된 매개변수의 값은 undefined로 출력됨
<!-- button[onclick=]{실행확인}*8 + Enter -->
<button onclick="test3('안녕하세요');">실행확인</button> <!-- 쌍따옴표 내에서는 홑따옴표로 내용물 표현 -->
<button onclick="test3(10);">실행확인</button>
<button onclick="test3([1, 2, 3]);">실행확인</button>
<button onclick="test3(true);">실행확인</button> <br>
<button onclick="test3(prompt('이름을 입력하시오.'));">실행확인</button>
<!-- 콜백 함수: 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 동록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수 -->
<!--
정의해 둔 매개변수의 개수보다 더 많이 전달하는 게 가능 (즉, 문제 없음)
단, 초과된 전달값은 무시됨
-->
<button onclick="test3('안녕하세요', '반갑습니다')">실행확인</button> <!-- '안녕하세요'만 출력됨 -->
<button onclick="test3(10, '안녕하세요', true)">실행확인</button> <!-- '10'만 출력됨 -->
<!--
정의해 둔 매개변수의 개수보다 더 적게 전달하는 게 가능 (즉, 문제 없음)
단, 미달된 매개변수의 값은 undefined로 출력됨
-->
<button onclick="test3();">실행확인</button> <!-- undefined -->
<div id="area3" class="area"></div>
<script>
// 매개변수가 있는 함수 => 매개변수의 이름만 적는다!
function test3(value) { // 매개변수 제시 시 자료형 지정 X, var도 제시 X
document.getElementById("area3").innerHTML += value;
}
</script>
*매개변수 관련 arguments 배열
👉🏻 함수 호출 시 전달되는 값은 내부적으로 arguments 라는 배열에 담김
👉🏻 arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열 객체
(자바의 main 메소드의 정의부에 존재하는 String[] args와 같은 역할)
<button onclick="test4(11, 12, 1, 5, 7);">실행확인</button>
<div id="area4" class="area"></div>
<script>
function test4() {
// console.log(arguments);
// console.log(arguments[0]);
// arguments 배열의 모든 값을 더해서 div에 출력
var sum = 0;
for(var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
document.getElementById("area4").innerHTML = "총합: " + sum + "<br>";
document.getElementById("area4").innerHTML += "평균: " + (sum / arguments.length) + "<br>";
}
</script>
*매개변수 있는 함수에 this 관련 전달하기
👉🏻 this는 이벤트를 당하는 요소를 나타냄
예) 버튼 요소에 클릭 이벤트를 걸었다면? => 클릭을 당하는 버튼 this가 됨
브라우저 창에 모든 요소들이 한번 로딩되었다면? => 로딩을 당하는 브라우저창이 this가 됨
<button onclick="test5(this);">버튼 1</button> <!-- 해당 버튼 요소 자체가 넘겨짐 -->
<button onclick="test5(this.innerHTML);">버튼 2</button>
<!-- this.innerHTML을 넘길 경우 시작태그와 종료태그 사이의 값이 전달됨 -->
<input type="button" value="버튼 3" onclick="test5(this.value);">
<button id="btn" onclick="test5(this.id);">버튼4</button> <!-- btn -->
<script>
function test5(a) {
console.log(a);
}
</script>
함수의 리턴
*일반적인 값 리턴
<button onclick="test6();">실행확인</button>
<div id="area6" class="area"></div>
<script>
function test6() {
document.getElementById("area6").innerHTML += "랜덤값: " + ran() + "<br>";
}
// 1 ~ 100 사이의 랜덤값을 구해서 반환해 주는 함수 만들기
function ran() {
// 자바스크립트에서의 Math.radom(): 0.0 ~ 0.999... ~
// var random = parseInt(Math.random() * 100) + 1;
// *100으로 0.0 ~ 99.999로 범위가 변경, 소수점을 버림으로써 0~99, +1 해 줌으로써 범위는 1~100가 됨
// return random;
// 한 줄로 줄이면 이렇게!
return parseInt(Math.random() * 100) + 1;
}
</script>
*익명 함수를 리턴하는 함수
👉🏻 익명함수를 리턴하는 함수를 불러오고 싶다면 소괄호 2개!!
👉🏻 <button onclick="test7();"> 실행확인</button>
처럼 소괄호 1개로 진행 시 alert창이 뜨지 않음!
이름: <input type="text" id="userName">
<button onclick="test7()();">실행확인</button>
<script>
function test7() {
// 사용자가 입력한 본인 이름값을 변수에 담음
var name = document.getElementById("userName").value;
// console.log(name); // 홍길동
// alert(name + "님 환영합니다 ^^");
return function() {
alert(name + "님 환영합니다 ^^");
}
}
</script>
실습
👉🏻 이전에 만들었던 간단한 사칙연산 계산기를 함수로 이용해 활용해 보자
<h3>* 간단한 사칙연산 계산기 만들기</h3>
<!-- input type="number"은 아무리 숫자값만 입력 가능하더라도 실제로 다뤄지는 값은 문자열 타입 -->
정수1 : <input type="number" id="num1"> <br>
정수2 : <input type="number" id="num2"> <br>
<label id="result"></label> <br>
<button onclick="op(1);">덧셈</button>
<button onclick="op(2);">뺄셈</button>
<button onclick="op(3);">곱셈</button>
<button onclick="op(4);">나눗셈</button>
<script>
function op(operator) { // 숫자값: 1(덧셈), 2(뺄셈), 3(곱셈), 4(나눗셈)
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
// 결과를 담을 변수
var result = 0;
switch(operator) {
case 1 : result = num1 + num2;
break;
case 2 : result = num1 - num2;
break;
case 3 : result = num1 * num2;
break;
case 4 : result = num1 / num2;
break;
default : result = "올바른 연산자가 아닙니다.";
}
document.getElementById("result").innerHTML = "결과: " + result;
}
</script> |
 |
 |
 |