중첩함수, 콜백함수

함수는 크게 두가지로 나눌 수 있다.

 

1_사용자 정의 함수

사용자가 필요한 기능을 직접 만드는 함수

 

2_ 자바스크립트 코어 함수

자바스크립트에서 기본으로 제공하는 함수

 

 

사용방법에 따른 함수종류

 

- 일반함수 : 가장일반적으로 사용하는 함수

- 중첩함수 : 함수안에 있는 함수

- 콜백함수 : 함수 실행결과값을 리턴이 아닌 매개변수로 넘어온 함수를 호출해서 넘겨주는 방식을 콜백이라고 하고 이때 매개변수로 넘어온 함수를 콜백함수라고 한다.

- 클로저함수 : 일반적으로 함수호출에 의해 함수내부의 실행구문을 모두실행하게 되면 함수 내부에서 만든 지역변수가 자동으로 사라지지만 어떤 경우에는 사라지지 않고 남는 경우가 있는데 이런현상을 클로저라고 하고 이런 현상을 일으키는 함수를 클로저함수라고 한다.

 

중첩함수

function outer(){
	function inner(){
	}
	inner();
}

outer();

여기서 inner가 중첩함수 이다.

 

 

중첩함수 이럴때 사용

1_ 내부 전용 함수

내부의 지역변수처럼 함수 내부에서만 사용할수 있다. 즉 함수 내부에서만 사용하는 기능을 중첩함수로 만들어서 사용한다.

일반적으로 이름없는 이벤트 리스너로 많이 사용된다.

 

1초에 한번씩 '안녕하세요' 출력하기

   function startHello(){
        var count=0;
        setInterval(function(){
            count++;
            document.write(count+" 안녕하세요.", "<br>");
        },1000)
    }
    startHello();

startHello()함수 내부에 setInterval()함수의 매개변수 값으로 사용한 익명 함수가 중첩 함수
setInterval()함수는 특정 시간마다 첫 번째 매개변수로 넘긴 함수를 호출하는 기능을 가지고 있다.

 

버튼을 클릭시에 출력하는 함수

 

    $(document).ready(function() {

        $("#btnStart").click(function(){
            alert("안녕하세요.");
        })

    });

 

2_ 중복코드 또는 코드 그룹화

함수 내부의 커다란 기능이나 중복 코드를 내부 함수로 만들어 재사용할 때도 중첩함수를 사용한다.
하나의 함수에 여러개의 기능이 들어있으면 이것을 중첩함수 각각 분리 해줄 수 있다.

 

 

중첩함수 내부

        var a=10;
        var b=20;
        var c=30;
        function outer_func(){
            var b=200;
            var c=300;
            function inner_func(){
                var c=3000;
                document.write("1. a = "+a+"<br>");
                document.write("2. b = "+b+"<br>");
                document.write("3. c = "+c+"<br>");
            }
            inner_func();
        }
        outer_func();

********* 출력값 ************

1. a = 10
2. b = 200
3. c = 3000

 

가장안쪽 중첩함수의 값이 최종값이다.

 

 

 

콜백함수

function 함수이름(callback){
	...
	callback(결과);
}

주로 함수의 내부처리결과값을 함수 외부로 내보낼때 사용하며 retrun문과 비슷하다.

특정함수의 매개변수값으로 콜백함수를 넘긴 후 처리 결과를 콜백 함수의 매개변수에 담아 콜백함수를호출하는 구조를 가지고 있다.

이 구조를 사용하면 로직 구현 부분과 로직 처리 부분을 나눠 코딩할 수 있게 된다. 이에 따라 로직 구현 부분은 동일하고 로직 처리 부분을 다양하게 처리해야 하는 경우 유용하게 사용할 수 있다.

 

콜백함수 사용 사칙연산계산기

        function calculator(op, num1, num2, callback){ //1
            var result="";

            switch(op) {
                case "+" :
                    result = num1 + num2;
                    break;
                case "-" :
                    result = num1 - num2;
                    break;
                case "*" :
                    result = num1 * num2;
                    break;
                case "/" :
                    result = num1 / num2;
                    break;

                default :
                    result = "지원하지 않는 연산자입니다";
            }

            callback(result);//2
        }

        function print1(result){//3
            document.write("두 수의 합은 = "+ result+"입니다.", "<br>");
        }

        function print2(result){//4
            document.write("정답은 ="+ result+"입니다.<br>");
        }
        calculator("+", 10,20, print1);//5
        calculator("+", 10,20, print2);//6

 

retrun VS. 콜백함수

콜백함수를 사용하면 리턴값이 있는 함수 구문을 대신 사용할 수 있다.

 

리턴값이 있는 함수 구문

function 함수이름(){
	...
	return 결과;
}

 

콜백함수 구문

function 함수이름(callback){
	...
	callback(결과);
}

 

두수를 더 하는 함수 만들기

리턴값

        function sum(num1, num2){
            return num1+num2;
        }
        var result = sum(10,20);
        document.write("두 수의 합은 = "+ result+"입니다.");

콜백

        function sum(num1,num2, callback){
            var temp = num1+num2;
            callback(temp);
        }
        function result(value){
            document.write("두 수의 합은 = "+ value+"입니다.");
        }
        sum(10,20,result);

실행결과는 두가지모두 동일하다. 

단순한처리는 리턴이 더 효율적이고 처리부분이랑 구현부분이 구분해서 다양하게 처리할때는 콜백이 적합하다.

 

동기 VS. 비동기

- 동기 : 함수가 호출된 후 끝날 때까지 다음구문을 실행하지 않고 대기하고 있는 경우

        alert("안녕하세요");
        document.write("alert() 동작이 끝나야 이 내용은 실행됩니다.");

얼럿창이 실행되고 확인버튼을 눌러야 다음구문이 실행된다.

 

 

- 비동기 : 함수가 호출되고 끝날 때가지 기다리지 않고 바로 다음 구문을 실행하는 경우

        var count=1;

        setInterval(function(){
            document.write("2. count = "+count);
        },3000);

        document.write("1. ajax() 동작이 모두 끝나지 않았어도 바로 실행됩니다.");

setInterval()함수를 사용해서 특정시간마다 첫 번째 매개변수로 넘긴 함수를 콜백해준다.

 

콜백함수는 주로 비동기함수의 결과값을 처리하는 도구로 많이 사용된다.

 

실무에서 콜백함수 사용

1. 이벤트 리스너로 사용

$("#btnStart").click(function(){
	alert("클릭되었습니다.");
});

jQuery에서 클릭과 같은 이벤트를 처리하기 위해 등록하는 이벤트 리스너가 바로 콜백함수이다.

 

 

2. 타이머 실행함수로 사용

setInterval(function(){
	alert("1초마다 한 번 씩 실행되요");
},1000);

특정시간마다 처리

 

3. Ajax결과값을 받을 때 사용

$.get("https://moo-you.tistory.com/", function(){
	alert("정상적으로 서버 통신이 이뤄졌습니다.");
});

서버와 데이터를 주고받을 때 사용하는 jQuery Ajax 기능들에서 결과물을 받을 때 콜백 함수가 사용된다.

 

4. jQuery애니메이션 완료

$("target").animate({
	left:100.
	opacity:1
},2000,"easeOutQuint", function(){
	alert("애니메이션이 완료되었습니다.");
});

제이쿼리 애니메이션 기능에서 애니메이션이 모두 끝났을 때 실행하는 함수 역시 콜백 함수다.