함수 Function

함수 선언과 호출 형식

 

function 함수명(매개변수1, 매개변수2, ···){ //함수선언
	실행 문장;
	return 반환값;
}

함수명(인자1, 인자2, ···); //함수 호출

함수명	함수이름
인자	함수를 호출할 때 전달하는 입력값
매개변수	함수 호출문에서 전달한 인자를 받기 위해 선언된 변수
function	함수를 선언할 때 사용하는 키워드
return	함수에서 수행한 결과값을 반환할 때 사용하는 키워드

 

 

 

 

 

함수 선언 - 일반적인 방법(기본 함수)

 

기본 함수 호출하기

var text1="함수 선언 전 호출";
var text2="함수 선언 후 호출";
printMsg(text1); //함수 선언 전 호출

function printMsg(msg){ //함수 선언
	document.write("함수 호출 메세지 : "+ msg +"<br>");
}
printMsg(text2);

 

onclick 속성값으로 함수 호출하기

<script>
    // onclick 속성값으로 함수 호출하기
    function printMsg(name, age){ //함수 선언
        document.write("학생 이름 : <b>"+ name +"</b><br>");
        document.write("학생 나이 : <b>"+ age +"</b><br>");
    }
</script>
<button type="button" onclick="printMsg('홍길동',21)">학생정보</button>

 

함수 표현식으로 작성하는 방법(무명함수)

var 변수명=function(매개변수1, 매개변수2, ···){ // 함수 선언
	실행 문장;
}
변수명(인자1, 인자2, ···); //함수 호출

 

무명 함수 호출하기

//무명 함수 호출하기
var text1="함수 선언 전 호출 에러";
var text2="함수 선언 후 호출만 가능";

//printMsg(text1); //함수 선언 전 호출 에러
var printMsg=function(msg){ //함수 객체 선언
	document.write("함수 호출 메세지 : "+ msg +"<br>");
}
printMsg(text2); //함수 선언 후 호출 가능

 

 

 

 

함수 선언문과 호출문

 

변수를 이용하여 반환값 출력하기

var result;
function add(name, n){
	document.write(name +"학생이 1부터"+ n +"까지 덧셈 수행<br>");
	var sum=0;
	for(var i=1; i<=n; i++){
		sum+=i;
	}
	return sum;
}

result=add('홍길동', 10);
document.write("결과 : "+ result +"<br>");
result=add('이영희', 100);
document.write("결과 : "+ result +"<br>");

 

서로 다른 변수로 같은 함수의 반환값 출력하기

function add(x,y){
	return x+y;
}
var calSum=add;  // 함수를 변수에 할당
var addUp=add;  // 함수를 변수에 할당
document.write("결과 값 : "+ calSum(5, 10) +"<br>");
document.write("결과 값 : "+ addUp(3, 20) +"<br>");

 

 

 

 

인자와 매개 변수

Function 함수명(매개변수1, 매개변수2, 매개변수3){  // 함수 선언
	실행 문장;
 	return 반환값;
}
result=함수명(인자1, 인자2, 인자3);  // 함수 호출

 

자바스크립트 코드의 실행 순서 살펴보기

function add(){
    var sum=1;
    return sum;
}
function add(x){
    var sum=x+1;
    return sum;
}
function add(x,y){
    var sum=x+y;
    return sum;
}
function add(x,y,z){
    var sum=x+y+z;
    return sum;
}

var r0=add();
var r1=add(1);
var r2=add(2,3);
var r3=add(4,5,6);
var r4=add(7,8,9,10);

document.write("함수 호출 인자 없음 : "+ r0 +"<br>");
document.write("함수 호출 인자 부족 : "+ r1 +"<br>");
document.write("함수 호출 인자 부족 : "+ r2 +"<br>");
document.write("정상적인 함수 호출 : "+ r3 +"<br>");
document.write("7, 8, 9만 인자값으로 적용 : "+ r4 +"<br>");

 

인자의 개수가 적을 때 처리 방법 살펴보기

function add(x,y,z){
    var sum;
    if((y===undefined) && (z===undefined)){
        sum=x;
    } else if(z===undefined){
        sum=x+y;
    } else{
        sum=x+y+z;
    }
    return sum;
}

var r1=add(2);
var r2=add(2,3);
var r3=add(4,5,6);

document.write("함수 호출 인자 부족 : "+ r1 +"<br>");
document.write("함수 호출 인자 부족 : "+ r2 +"<br>");
document.write("정상적인 함수 호출 : "+ r3 +"<br>");

 

인자를 arguments 객체로 처리하기

function add(){
    var i, sum=0;
    for(i=0; i<arguments.length; i++){
        sum=sum+arguments[i];
    }
    document.write("수행 결과 : "+ sum +"<br>");
}
add(2, 3);
add(2, 3, 4);
add(4,5,6,7,8);
add(1,2,3,4,5,6,7,8,9,10);