JS에서의 함수의 쓰임에 대해 살펴보자
기본 선언은 여태까지 사용해왔던것 처럼
function 함수이름(매개변수){
실행 내용
}
위와 같은 기본 틀을 가진다.
익명 함수란 간단하게 함수를 변수처럼 선언하는 것을 말한다.
여기서 꼭 짚어두고 가야 할 부분은 js에서 함수는 하나의 변수라고 생각해야 한다.
변수처럼 사용한다. 라면 이해하기 어려울 수 있는데
java와 다르게 메소드를 선언한다. 가 아니고
변수를 하나 선언하여 그 방에 함수 내용을 적을 수 있다. 라고 이해하자.
변수명 = function(){
실행 내용
}
위와 같이 사용한다.
스스로 실행되는 함수는 말 그대로 페이지를 열자마자 자동적으로 실행되는 함수이다.
(function( ){
}) ( );
위와 같이 사용하며 괄호에 주의하자
인자 및 매개변수는 java와는 다르게 함수 선언 시 매개변수 타입을 지정하지 않는다.
기본적으로 object 타입으로 잡히고 인자를 입력 시에는 선언 된 매개변수보다 인자를 많이 입력해도
상관은 없지만 초과된 인자는 버려진다.
이와 반대로 적게 호출하는 것도 역시 가능하고 사용이 안된 매개변수는 undefined라고 입력된다.
function 함수 이름( a, b, c){
}
함수 이름(a, b, c, d, e);
함수 이름(a, b);
리턴처리는 java와 똑같아 설명을 생략한다.
function 함수 이름(){
return 0;
}
가변인자 함수는 처음 선언 시 매개변수를 비워놓고
사용 할 때 인자를 마음대로 넣는 것이다.
이와 같이 사용하고 함수 안에서는 arguments라는 키워드로 매개변수를 다룰 수 있다.
arguments는 object 타입의 배열 형태로 입력한 값을 가지게 된다.
기본 틀을 확인해보자
function 함수 이름(){
arguments.length;
}
함수 이름(a, b, c, d, e, f, g);
내부(중첩) 함수는 함수 안의 함수라고 생각하면 된다.
앞에서 설명한 것 처럼 함수는 변수 취급으로
지역변수처럼 함수 안에서 선언한 내부함수이기 때문에
바깥에서 사용할 수 없는 함수이다.
function 함수이름(){
function 내부함수이름(){
}
내부함수이름();
}
함수이름() --- 사용가능
내부함수이름() --- 사용불가
다음의 예제를 통해 앞서 설명한 기능들을 확인해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
width: 500px;
height: 100px;
background: lightgray;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>함수(Function)</h1>
<h3>function 함수명(){소스코드 작성} 로 작성해서 실행하는 방법</h3>
<button onclick="test1();">실행확인</button>
<p id="p1"></p>
<script type="text/javascript">
function test1() {
var p1 = document.getElementById("p1");
p1.innerHTML += "test1() 함수 실행됨"
}
</script>
<h3>함수명 = function(){코드작성} : 익명함수(이벤트 핸들러 작성시 주로 사용)</h3>
<p id="p2"></p>
<button onclick="test2();">실행확인</button>
<script>
// 변수방에 함수를 담아 사용하는 것
test2 = function(){
var p2 = document.getElementById("p2");
p2.innerHTML += "test2() 함수 실행 확인";
}
</script>
<h3>스스로 실행하는 함수 : (function(){})()</h3>
<p id="p3"></p>
<script type="text/javascript">
(function() {
var p3 = document.getElementById("p3");
p3.innerHTML += "자동으로 혼자 실행됨...";
})();
</script>
<h3>함수의 전달 인자와 매개변수</h3>
<button id="btn1">실행 확인</button>
<p id="p4"></p>
<script type="text/javascript">
function test4(value) {
var p4 = document.getElementById("p4");
p4.innerHTML += value + "<br>";
}
document.getElementById("btn1").onclick = function name() {
test4(window.prompt("메세지를 입력하세요"));
// 지정된 매개변수보다 많은 갯수의 인자를 넣는 것을 허용한다.
// 단, 초과된 인자는 무시된다.
test4('안녕하세요', '반갑습니다');
// 지정된 매개변수보다 적게 호출하는 것도 허용한다.
// 단, 선언이 안된 매개변수는 undefined가 된다.
test4();
}
</script>
<h3>함수의 리턴처리</h3>
<button onclick="test5();">실행확인</button>
<p id="p5"></p>
<script type="text/javascript">
function returnFunction() {
return Math.floor(Math.random() * 100) + 1;
}
function test5() {
var p5 = document.getElementById("p5");
var value = returnFunction();
p5.innerHTML = value;
}
</script>
<h3>가변인자 함수 테스트</h3>
<button onclick="test6();">확인하기</button>
<p id="p6"></p>
<script type="text/javascript">
function sumAll() {
// arguments를 사용하면 매개변수를 사용하지 않아도 매개변수 값을 확인할 수 있다.
console.log(arguments);
console.log('arguments의 타입 : ' + typeof(arguments));
console.log('arguments의 길이 : ' + arguments.length );
var sum = 0;
for(var i = 0; i < arguments.length; i++){
sum += arguments[i];
}
document.getElementById("p6").innerHTML = '더하기 결과 : ' + sum;
}
function test6() {
sumAll(11, 2, 33, 444, 5555, 66, 77, 8);
sumAll(33, 44, 66, 22, 33, 11,22, 44, 44, 55, 66);
}
</script>
<h3>내부(중첩된) 함수 테스트</h3>
<label>삼각형 밑변 : </label>
<input type="number" min="1" max="100" id="width" required>
<br>
<label>삼각형 높이 : </label>
<input type="number" min="1" max="100" id="height" required>
<br>
<button onclick="test7();">실행 확인</button>
<br>
<p id="p7"></p>
<script type="text/javascript">
// 피타고라스의 정리
// 모든 직각 삼각형에서 빗변의 제곱은 다른 두 변의 제곱의 합과 같다.
function calc(w, h) {
// 내부 함수는 지역변수처럼 여기서만 사용가능
// 밖으로 나갈 수 없음
function square(x) {
return x * x;
}
return Math.sqrt(square(2) + square(h));
}
function test7() {
var width = document.getElementById("width").value
var height = document.getElementById("height").value
document.getElementById("p7").innerHTML += '빗변의 길이 : ' + calc(width, height);
}
</script>
</body>
</html>