jQuery 045. function() 함수

jqeury 함수기능에 대해 알아보겠습니다. 먼저 일반적인 함수의 구조입니다.

 

#code 1-1

function() 함수이름(){

    호출시 실행구문 ....;
}

위와같은 구조로 실행됩니다. 예제와 사용법을 보겠습니다.

 

#code 1-2

        $(function(){
            fnCall();
        })

        function() fnCall(){
            console.log("fnCall() 실행됨!");
        }

먼저 함수이름 : fnCall() 함수를 만들고 기본 function()에서 호출했습니다. 호출 뒤 브라우져의 콘솔을 확인하면 fnCall()함수가 정상적으로 실행이된걸 확인 할 수있습니다.

#code 1-2 실행화면 console

다음으로, 매개변수가 있는 함수입니다. 함수의 ( )안에 매개 변수를 넘겨 줄 수 있습니다. 매개변수가 있는 함수의 구조는 아래와 같습니다.

 

#code 2-1

        function() 함수이름(매개변수1, 매개변수2, 매개변수3){

            호출시 실행구문 ....;
        }

처음 소개했던 일반적인 함수구조와 구조는 똑같지만 ( )안에 매개변수가 생겼습니다. 매개변수는 얼마든지 넣어 줄 수 있으며, 매개변수는 ' , '로 구분합니다. 예제와 사용법을 보겠습니다.

 

#code 2-2

        $(function(){
            fnCall("jqeury");
            fnCall("script");
            fnCall("html");
        })

        function fnCall(msg){
            console.log("fnCall() 호출 !!" ,msg);
        }

첫번째로 소개했던 함수와는 다르게 msg라는 매개 변수를 받도록 fnCall()을 생성하고 호출해줍니다. 매개변수를 바꿔가면서 호출했습니다. 코드를 실행해보면,

#code 2-2 실행화면

위와 같이 호출됩니다. #code 2-2 에서 매개변수로 주었던, "jqeury" ,"script" ,"html" 이 각각 나오는 걸 볼 수있습니다.

다음은 리턴값이 있는 함수 입니다. 함수는 실행구문 뿐 아니라 종료 시점에 값을 리턴해줄 수 있습니다. 리턴값이 있는 함수 구조 입니다.

 

#code 3-1

        function() 함수이름(){

            호출시 실행구문 ....;
            return 리턴 값;
        }

보시면 #code 1-1 와 같고, 뒤에 return 만 추가된걸 알 수있습니다. 아래는 예제와 사용법입니다.

 

#code 3-2

        $(function(){
            console.log(fnCall());
        })

        function fnCall(){
            return "fncall() 호출됨"; 
        }

예제를 보세되면 이번엔 fnCall() 함수에서 console.log()를 하는 것이아니고 console.log()에서 함수를 호출 하는걸 볼 수 있습니다. 먼저 fnCall() 함수에 return 값으로 "fncall() 호출됨"을 줬습니다. console.log()에서 fnCall() 함수를 실행시켰습니다. 실행하게 되면,

#code 3-2 실행화면

그럼 마지막으로 리턴값이 있는 함수를 통해 매개 변수로 두값을 받고, 받은 두값을 더한값을 리턴해주는 함수를 만들어 보겠습니다. 아래는 예제입니다.

 

#code 4-1

        $(function(){
            console.log(fnCall(4,5));
        })

        function fnCall(num1,num2){
            return num1+" + "+num2+" = "+num1+num2+" 입니다."; 
        }

num1, num2 를 받는 매개 변수를 만든 뒤, console.log()를 통해 fnCall()을 호출합니다.

fnCall()은 num1 과 num2를 더한값을 text와 함께 리턴해줍니다. 아래는 실행화면입니다.

#code 4-1 실행화면

이상, 함수의 기본구조에 대해 알아봤습니다.