[JavaScript] 함수 - 선언적 함수 / 익명 함수 / 매개변수
< 자바스크립트 함수 >
1. 선언적 함수
- 이름이 있는 함수
- 이름을 통해 호출하여 실행함
[ 표현법 ]
function 함수명(*매개변수1, 매개변수2, ...) {
해당 함수를 호출했을 경우 실행할 코드;
*return 결과값;
}
* 매개변수가 없는 경우 생략 가능
* 반환할 결과값이 없는 경우 return 구문 생략 가능
<button onclick="test1();">실행~</button>
<script>
function test1(){
document.getElementById('area1').innerHTML += 'test1()함수 실행됨 ! <br>' ;
}
</script>
2. 익명 함수
- 이름이 없는 함수
- 함수명 대신 변수명에 함수를 대입하여 함수 코드를 저장하는 구현 방식
- 특정 변수나 속성에 대입하는 함수가 필요할 때 주로 사용됨 (주로 이벤트 핸들러 작성 시 사용)
[ 표현법 ]
변수 = function() {
해당 함수에서 실행할 코드;
}
<button id="btn">실행확인</button>
<div id="area2" class="area"></div>
<script>
var btn = document.getElementById('btn'); // 버튼요소객체
btn.onclick = function(){ // 이벤트속성에 대입되는 function == 이벤트 핸들러
document.getElementById('area2').innerHTML += '이벤트 핸들통해 실행됨 ! <br>';
}
</script>
< 매개변수 >
- 함수에 매개변수를 제시할 때 자료형을 지정하지 않음. 변수명만 작성
- 자료형에 상관없이 매개변수의 개수가 맞다면 잘 실행됨 (문자열, 숫자, 객체 상관 없이 전달 가능)
- 정의해 둔 매개변수의 수보다 적게 전달할 경우, 실행에 문제는 없으나 undefined로 뜨게 됨
- 정의해 둔 매개변수의 수보다 많이 전달할 경우, 실행에 문제는 없으나 초과된 전달값이 무시됨
- 함수 호출 시 전달하는 값은 내부적으로 "arguments*"라는 배열에 담기게 됨
* arguments : 모든 함수마다 내부적으로 존재하는 배열 객체
★ 매개변수 있는 함수에 "this"키워드를 전달
-> this 전달 : 해당 요소객체 자체가 매개변수로 전달됨
-> this.innerHTML : 해당 요소의 text값이 전달됨
-> this.id : 해당 요소의 id속성값이 전달됨
-> this.value : 해당 요소의 value값이 전달됨
<button onclick="test5(this);">버튼1!</button>
<button onclick="test5(this.innerHTML);" id="abc">버튼2!</button>
<button id="btn33" onclick="test5(this.id);">버튼3!</button>
<input type="button" value="버튼4!" onclick="test5(this.value);">
<script>
function test5(a){
console.log(a);
var b = document.getElementById('abc');
console.dir(b);
}
</script>
< 함수의 return >
- 일반적인 값을 리턴하는 경우
<button onclick="test6();">실행확인</button>
<div id="area6" class="area"></div>
<script>
// 1 ~ 100 사이의 랜덤한 난수를 생성해서 "반환"해주는 함수
// 랜덤한 수 ??? 임의의 수?? 무작위 => 예측이 불가능한 숫자값
function rand(){
// Math.random() => 0.0 ~ 0.99999999
// Math.random() * 100 => 0.0 ~ 99.9999999
// Math.random() * 100 + 1 => 1.0 ~ 100.9999999
// parseInt(Math.random() * 100 + 1) => 1 ~ 100
return parseInt(Math.random() * 100 + 1);
}
function test6(){
//rand();
document.getElementById('area6').innerHTML = '랜덤값 : ' + rand();
}
</script>
- 익명함수를 리턴하는 경우 : return 구문에 함수를 작성
이름 : <input type="text" id="userName">
<button onclick="test7()();">실행확인</button>
<script>
function test7(){
var name = document.getElementById('userName').value;
console.log(name);
return function(){
alert(name + '님 환영합니다');
};
}
</script>