함수

함수(Function)

하나의 로직을 재실행 할 수 있도록 하는 것으로 입력된 값을 연산해서 출력하는 것이 함수의 기본적인 역할

함수의 형식

function 함수명( [인자...[,인자]] ){
   코드
   return 반환값
}

함수의 정의와 호출

function numbering(){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering(); // numbering이라는 함수를 출력함을 의미
//0123456789

1. 함수의 입력과 출력

1-1. 입력(Input)

매개변수(parameter) / 인자(argument)

  • 매개변수(parameter) : 함수를 정의할 때 사용되는 변수

  • 인자(argument) : 함수가 호출될 때 매개변수에 실제로 담기는 값

function 함수명(parameter){
    return parameter;
}
함수명(argument);

1-2. 출력(Output)

return

함수 내에서 사용한 return은 return 뒤에 따라오는 값을 함수의 결과로 반환하고, 동시에 함수를 종료시킴

function get_member1(){
    return 'egoing';
}
 
function get_member2(){
    return 'k8805';
}
 
alert(get_member1());
alert(get_member2());
//egoing k8805
//함수 내에서 문자열 egoing과 k8805을 return

2. 익명함수(Anonymous Funtion)

함수를 정의함과 동시에 실행하는 함수

(
function(){
    ... 
}
)();
(function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
})();
let numbering = function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering();

3. 매개변수(Parameter)가 있는 함수

function get_argument(arg){
    return arg;
}
 
alert(get_argument(1)); //1
alert(get_argument(2)); //2
function get_arguments(arg1, arg2){
    return arg1 + arg2 //return값은 한 개만 가질 수 있음
}
 
alert(get_arguments(10, 20)); //30
alert(get_arguments(20, 30)); //50

4. 재귀함수

재귀함수는 함수 자신을 호출하는 프로그래밍 기법

<!DOCTYPE html>
<html>
<body id="start">
<ul>
    <li><a href="./532">html</a></li> 
    <li><a href="./533">css</a></li>
    <li><a href="./534">JavaScript</a>
        <ul>
            <li><a href="./535">JavaScript Core</a></li>
            <li><a href="./536">DOM</a></li>
            <li><a href="./537">BOM</a></li>
        </ul>
    </li>
</ul>
<script>
function traverse(target, callback){
    if(target.nodeType === 1){
        //if(target.nodeName === 'A')
        callback(target);
        var c = target.childNodes;
        for(var i=0; i<c.length; i++){
            traverse(c[i], callback);       
        }   
    }
}
traverse(document.getElementById('start'), function(elem){
    console.log(elem);
});
</script>
</body>
</html>
Previous반복문Next배열

Last updated