티스토리 뷰

Programming/JavaScript, jQuery

[javascript 9강] 함수 심화

국브 2019. 2. 12. 17:02

[javascript 9강] 함수 심화



저번글에서는 함수에대해 기초에 대해서 알아보았습니다.

저번글에서는 함수에서 가장 중요한부분을 설명하였고...

이번글에서는 기본에 넘어 심화라고 보면될것같습니다.

이번글에서도 중요하니 꼭알아두시길 바랍니다.

이전글은 남기고갑니다.

모르시는 부분이 있다면 한번 살펴보시길 바랍니다.


 이전 글 링크 


2019/02/07 - [Programming/JavaScript, jQuery] - [javascript 1강] 자바스크립트 개요 및 개발환경설정

2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 2강] 입출력 및 기본문법

2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 3강] 변수와 자료형

2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 4강] 연산자

2019/02/10 - [Programming/JavaScript, jQuery] - [javascript 5강] 배열

2019/02/11 - [Programming/JavaScript, jQuery] - [javascript 6강] 조건문(제어문)

2019/02/11 - [Programming/JavaScript, jQuery] - [javascript 7강] 반복문(제어문)

2019/02/12 - [Programming/JavaScript, jQuery] - [javascript 8강] 함수




 1. 함수 리턴


함수에서 return 을 사용할수 있다고 이전글에서 말씀을 드렸습니다.

javascript 에서는 return 값에 함수를 넣어주어도 됩니다.

즉 리턴값이 함수도 가능하다는 것입니다.


 사용방법 및 문법 


function 함수명(){


return function(){}


}



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            function returnfun(){
                
                return function(x,y){
                    console.log(x+y);
                }
                
            }
            
            var sum = returnfun();
            sum(1,2);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


            function returnfun(){
                
                return function(x,y){
                    console.log(x+y);
                }
                
            }

다음과 같이 명시적함수 returnfun 이라고 만들어주고..

return 부분에

               function(x,y){
                    console.log(x+y);
                }

이라고 익명함수를 리턴값으로 지정해 주었습니다.

그다음 

var sum = returnfun();
            sum(1,2);

sum 이라는 변수를 만들어주고 returnfun() 을 실행후 할당해주었습니다.

그럼 sum 에는 retrun 값인 익명함수만 담기게 됩니다.

그다음 sum 에 할당된 익명함수를 실행하기위해 sum(1,2); 라고 적어주었습니다.

그결과 1+2 가 화면에 출력되어 위와같이 결과가 나옵니다.




 2. 클로저


클로저는 프로그램을 많이 다루어 보았으면 한번쯤 듣거나 보았을것입니다.

하지만 처음 접하시는 분들도 많이 있습니다.

클로저란 반환된 함수의 life cycle(생명주기)이 종료될 떄까지 호출된 함수의 life cycle(생명주기)이 유지되는 것 입니다.

뜻만 보면 엄청 어려워 보이고.. life cycle(생명주기) 이라는 단어도 생소하여 어렵게 느껴질수 있습니다.

우선 life cycle 은 간단히 말하면 프로세서가 실행이되면 종료될떄까지의 기간을 의미합니다.

그럼 예제로 들어가서 바로 클로저가 무엇인지 확인해 보겠습니다.


 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            function fun(x){
                
                return function(y){
                    console.log(x+y);
                }
                
            }
            
            var sum = fun(1);
            sum(2);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 


 

           function fun(x){
                
                return function(y){
                    console.log(x+y);
                }
                
            }

다음과같이 fun 이라는 함수는 매개변수 x 를 받으며

fun 함수의 실행부분을 보면 return 값으로 익명함수를 리턴하는것을 확인할수 있습니다.

익명하수는 y라는 매개변수를 받으며 익명함수의 실행구문을 보면 fun 의 매개변수 x 와 익명함수의 매개변수 y의 값을 더해 콘솔에 출력합니다.

근대 여기서 살펴보아야 하는것은 fun 함수의 매개변수를 익명함수에서 사용을 하였다는점 입니다.


           var sum = fun(1);
            sum(2);


다음 sum 이라는 변수에 fun(1); 이라고 함수를 실행후 return 값을 sum변수에 할당해 주었습니다.

여기서 잠깐 생각해봅시다.

return 값으로 함수를 전달 받았으니 그럼 sum이라는 변수에는 

               function(y){
                    console.log(x+y);
                }

위의 익명함수가 들어있겟죠..

근대 문제가 있습니다. 익명함수는 fun의 매개변수 x 를 사용하는대..

sum 에 담긴 함수에 실행구문인 console.log(x+y);는 작동을 할까요?

결론부터 말씀드리면 실행이 되며 이게바로 클로저입니다.

다시 한번 클로저의 뜻을 볼까요?


"반환된 함수의 life cycle(생명주기)이 종료될 떄까지 호출된 함수의 life cycle(생명주기)이 유지되는 것"


예제를 위의 말로 풀어 적어보겠습니다.

"반환된 함수의 life cycle(생명주기)이 종료될 떄까지" == 변수 sum

"호출된 함수의 life cycle(생명주기)이 유지되는 것" == fun 함수


즉, sum 변수에 담긴 함수의 기능이 완료되어야 fun 함수도 종료가 된다는것입니다.

(fun 함수는 return 을 하여 종료가 되어야 하지만.. sum 변수에 담긴 익명함수로 인해 종료되지 않는것입니다.)


결과를 확인해보면 아무이상없이 3 이 출력된것을 확인하실수 있습니다.




 3. 내부함수


함수안에 또다른 함수가 바로 내부함수 입니다.

내부함수는 외부에서는 호출하여 사용할수 없습니다.


 사용방법 및 문법 


function 함수명 (){


function 내부함수명 (){


}


}



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            function calculator(x,y){
                
                function sum(xx,yy){
                    
                    console.log("두수의 덧샘은:"+(xx+yy));
                    
                }
                
                function multiplex(xx,yy){
                    
                    console.log("두수의 곱샘은:"+xx*yy);
                    
                }
                
                sum(x,y);
                multiplex(x,y);
                
            }
            
            calculator(1,3);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


calculator 라는 함수를 만들어 주었고..

함수안에는..

            function calculator(x,y){
                
                function sum(xx,yy){
                    
                    console.log("두수의 덧샘은:"+(xx+yy));
                    
                }
                
                function multiplex(xx,yy){
                    
                    console.log("두수의 곱샘은:"+xx*yy);
                    
                }
                
                sum(x,y);
                multiplex(x,y);
                
            }

sum 이라는 덧샘을 하는 내장함수를

multiplex 라는 곱샘을 하는 내장함수를 만들어 주었습니다.

그다음 calculator 함수에서 sum, multiplex 함수를 실행해주었고

결과 위의 이미지와 같은 결과를 확인할수 있습니다.





 4. 콜백함수


콜백함수도 프로그래밍을 많이 하시다보면 많이 들어본것입니다.

우선 뜻을 살펴보면 "매개변수로 함수를 전달하고, 던달된 매개변수가 특정 시점에 호출되는 것" 입니다.

javascript 에서는 매개변수로 함수를 전달할수 있기때문에 특정조건을 주어 매개변수를 실행하여 콜백함수 효과를 얻을수 있습니다.


 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            function fun(fn1,fn2,num){
                
                
                for(var i=1; i < 10;i++){
                    callBackprogress(i);
                    console.log(num+"X"+i+ "=" + i*3);
                }
                
                callBackFinish();
                
            }
            
            function callBackprogress(num){
                console.log("진행도 : "+ num*10 +"%");
            }
            
            function callBackFinish(){
                console.log("진행도 : 100%");
                console.log("구구단 종료");
            }
            
            fun(callBackprogress, callBackFinish, 3);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


           function fun(fn1,fn2,num){
                
                
                for(var i=1; i < 10;i++){
                    callBackprogress(i);
                    console.log(num+"X"+i+ "=" + i*3);
                }
                
                callBackFinish();
                
            }

fun 이라는 함수를 만들고 매개변수를 fn1, fn2, num 총3개를 받을수 있게 만들었습니다.


           function callBackprogress(num){
                console.log("진행도 : "+ num*10 +"%");
            }
            
            function callBackFinish(){
                console.log("진행도 : 100%");
                console.log("구구단 종료");
            }

그리고 fun 함수 실행문에서 for 문 에 사용하기위한 callbackprogress 라는 함수를 만들어주고 매게 변수 num 을 받을수 있게 만들고 console.log("진행도 : "+ num*10 +"%"); 라고 출력할수 있는 실행문을 작성하였습니다.

그리고 fun 함수가 끝날때 사용하려는 함수 callbackFinish 함수를 만들어주고

실행문에는 console.log("진행도 : 100%"); , console.log("구구단 종료"); 라고 2가지를 출력할수 있게 작성해두었습니다.


fun(callBackprogress, callBackFinish, 3); 이라고 함수를 실행하였습니다.

실행할때 매개변수 쪽을 보면 callBackprogress 와 callBackFinish 함수를 실행하지 않고

함수명만 적어주었습니다.

이렇게 함수명만 매개변수에 적어주면 함수가 매개변수로 전달되게 됩니다.


           function fun(fn1,fn2,num){
                
                
                for(var i=1; i < 10;i++){
                    callBackprogress(i);
                    console.log(num+"X"+i+ "=" + i*3);
                }
                
                callBackFinish();
                
            }

다시 fun 함수쪽을 살펴보겠습니다.

그럼 매개변수 fn1 에는 callBackprogress 함수가 들어있고..

매개변수 fn2 에는 callBackFinish 함수가 들어있으며

num 에는 숫자 3이 들어있는것을 알수 있습니다.


그다음 for 문을 활용해 구구단이 실행되며 

for문이 실행될때 callBackprogress 함수가 실행되어 퍼센트를 알려주고

구구단 3단이 출력됩니다.

for 문 완료후 callBackFinish 함수가 실행되어 "진행도 100%", "구구단 종료" 라는 구문을 출력합니다.


 5. 내장함수


자바스크립트에서는 내장함수를 갖고있습니다.

즉 내가 만들지 않았지만 사용할수 있는 함수들이 있습니다.

예를 우리가 여태 자주사용하던 console.log 또한 내장함수 입니다.

유용한 내장함수만 다루어 보겠습니다.



 사용방법 및 문법 


1. 설정시간 한번 실행 


setTimeout(실행함수,시간);


(해제 : clearTimeout(아이디값);)


2. 설정시간마다 반복실행


setInterval(실행함수,시간);


(해제 : clearInterval(아이디값);)


3. 문자열을 코드로 이용


eval(문자열);



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
                
            // 시간넣는곳은 초단위이며 1초 가 1000입니다.
            var interval = setInterval(function(){console.log("1초에 한번씩 실행중");},1000);
            setTimeout(function(){clearInterval(interval);console.log("interval 종료!");},5000);            
 
            var str = "console.log('eval로 문자를 실행함')";
            eval(str);
                                    
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 



var interval = setInterval(function(){console.log("1초에 한번씩 실행중");},1000);
interval 이라는 변수에 setInterval 내장함수를 할당해주었습니다.
setInterval 를 할당해주면 return 값으로 setInterval 아이디 값을 주어 clearInterval 함수를 사용할수 있습니다.
setInterval 안에 함수에는 "1초에 한번씩 실행중" 이라는 문구를 출력하게 하였고 실행시간은 1000 으로 적어 1초마다 실행될수 있게 설정하였습니다.


setTimeout(function(){clearInterval(interval);console.log("interval 종료!");},5000);

setTimeout 함수를 실행하고 함수구문에는 clrearInterval 이라는 내장함수를 주었고 위에서 받은 id 값을 넣어주었습니다.

그리고 console.log 를 통해 "interval 종료!" 라고 출력할수 있게 하였으며 시간은 5초에 실행되게 하였습니다.


           var str = "console.log('eval로 문자를 실행함')";
            eval(str);
다음 str 변수에 문자열로 "console.log('eval로 문자를 실행함')" 이라고 할당해주고
내장함수 eval 로 실행해보았습니다.

그결과 위의 이미지 처럼 나오는것을 확인할수 있습니다.



 글을 마치며..


이번글에서는 함수에 대해서 심화적으로 다루어 보았습니다.

한번에 이해가 안가더라도 계속읽다보면 이해가 갈것이고..

꼭한번 코딩해보시길 바랍니다. 모두 수고하세요.


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 




저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[javascript 11강] 객체 심화  (0) 2019.02.13
[javascript 10강] 객체  (0) 2019.02.13
[javascript 8강] 함수  (0) 2019.02.12
[javascript 7강] 반복문(제어문)  (0) 2019.02.11
[javascript 6강] 조건문(제어문)  (0) 2019.02.11
댓글