함수 종류 - 콜백함수, 클로저 함수

콜백 함수

 

1. 콜백 함수란?

     문법
            function fun(callback){
                    ....
                    callback(결과);
           }
- 콜백 함수는 주로 함수 내부의 처리 결과값을 함수 외부로 내보낼 때 사용한다.(일종의 return문과 비슷한 기능을 한다.)
- 콜백 함수를 사용하는 구조는 특정함수의 매개변수 값으로 콜백함수를 넘긴 후, 처리 결과를 콜백 함수의 매개변수에 담아 콜백 함수를 호출하는 구조를 가지고 있다.
이에 따라, 로직 구현 부분은 동일하고 로직 처리 부분을 다양하게 처리해야 하는 경우에 유용하다.(예제로 살펴보자)

 

콜백 함수(예제)

 

function calculator(op, num1, num2, callback){
let 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 = "지원하지 않는 연산자입니다.";
break;
}
callback(result);
}

 

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

1. 위와 같이 로직 구현부는 동일하게 하고, 로직 처리 부분을 분리해서 구현
하여 원하는 로직 처리 부분을 호출하면 된다.그렇게 되면 유지보수 할 때 로
직 처리 부분만 수정을 하면 되므로 큰 장점이 된다.
2. 아울러, 로직 처리 부분을 다양하게 하여 필요에 맞게 로직 부분과 처리 부분을 조립하듯이 연결하여 사용이 가능하다.

 

콜백함수를 써야할까? return문을 써야할까??

[return 문을 사용한 경우]

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

[콜백 함수를 사용한 경우]

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

1. 위와 같이 return문이나 콜백 함수를 사용하면 결과는 동일하다.
2. 하지만, 통상적으로 단순한 처리는 return문을 이용하는 것이 더 효율적이다.
3. 콜백 함수는 사용해야 하는 경우는 처리 부분과 구현 부분과 분리되어야 하는 경우나 구현 부분은 하나로 하고 처리 부분을 다양하게 만든 후 실행 시에 연결해서 사용하는 경우에 적합하다.(중요)

 

동기 그리고 비동기란?

4. 콜백 함수를 이해하기 위해서 동기와 비동기의 개념을 확실히 알자.

   - 동기(synchronize) : 일반적으로 함수가 호출된 후 끝날 때까지 다음 구문을 실행하지 않고 대기하는 것을 동기라고 칭한다.

[ 동기문을 사용한 경우 ]

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

   - 비동기(unsynchronized) : 비동기는 동기의 반대 개념이다.함수가 호출된 후 끝날 때까지 기다리지 않고 다음 구문을 바로 실행하는 것을 비동기라 칭한다.

[ 비동기문을 사용한 경우 ]

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

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

   - 동기, 비동기의 개념을 알아야 하는 이유는 바로 콜백 함수가 주로 비동기 함수의 결과값을 처리하기 위한 방법으로 주로 사용 되어지기 때문이다.(중요)  

 

 

콜백 함수의 실무적인 형태

5. 실무에서 콜백 함수는 다음과 같은 경우에 많이 사용된다.
     - 이벤트 리스너로 사용(버튼을 클릭 등)
     - 타이머 실행 함수로 사용(특정 시간마다 실행하는 경우 등)
     - 서버와 데이터를 주고받을 때 사용하는 jQuery Ajax 기능들에서 결과물을 받을 때(서버 접속, DB접속 등)
     - jQuery 애니메이션 기능에서 애니메이션이 모두 끝났을 때, 실행하고자 하는 함수

즉, 위와 같이 콜백 함수는 로직 구현 부분과 로직 처리 부분을 나눠 작업할 때 주로 사용한다.

 

클로저 함수

클로저란?
     - 클로저는 함수 내부에 만든 지역변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태를 의미한다.

ex) function fun() {
let count = 1;
$("btn").on("click",
function() {
    count++
    alert("count = " + count);
    }
);
}

일반 지역 변수의 경우 함수 호출이 완료되면 사라지는게 원칙이다. 하지만 좌측과 같이 클로저를 이용하면 함수 호출 완료 후에도 사라지는 지역변수를 사라지지 않는 데이터 저장소로 만들 수가 있다.

위와 같이 변수가 메모리에서 제거되지 않고 계속해서 값을 유지하는 상태를 클로저라고 칭하며, 내부에 있는 함수를 클로저 함수라 부른다.

ex) function star(){
let count = 0;
setInterval(function(){
count++;
document.write(count);
}, 1000);
}
start();

좌측도 역시 start()가 실행되면서 지역변수인 count변수가 만들어지고 setInterval의 익명함수에서 count를 사용하고 있기 때문에 값이 계속해서 증가가 된다.이 때 이 익명함수를 또한 클로저 함수라고 부른다.

이처럼 클로저 변수가 사라지지 않고 계속해서 값을 유지하는 상태를 전부다 클로저라고 한다.(중요)

클로저의 장점

        - 연관 있는 변수와 기능(중첩 함수)을 하나의 함수로 묶어서 독립적으로 실행시킬 수가 있다.
        - 즉, 함수 내부에 데이터가 만들어지기 때문에 함수 외부에서 수정할 수 없는 보호된 데이터를 만들 수 있다는 것이다.
        - 이런 형태의 데이터는 객체지향 프로그래밍에서는 private데이터 즉, 캡슐화 된 데이터라고 부른다.

[ 클로저를 사용하여 메뉴 선택 시 그 값을 계속 유지함 ]

ex) function tabMenu(selector){
// 선택한 탭 메뉴를 저장할 변수
let $selectMenuItem = null;
// 메뉴 항목에 클릭 이벤트 등록
$(selector).click(function(){
// 기존 선택 메뉴 항목이 있으면 비 선택 상태로 만들기
if($selectMenuItem!=null){
$selectMenuItem.removeClass("select");
}
// 클릭한 메뉴 항목을 신규 선택 메뉴 항목으로 저장
$selectMenuItem = $(this);
// 선택 상태로 만들기
$selectMenuItem.addClass("select");
})
}