[js] 콜백함수(callback)

콜백함수란? 콜백함수를  매개변수로 받는 함수 만드는 방법, 콜백지옥이란?

 

콜백함수(Callback function)란?

1. 콜백함수는 다른 함수에 매개변수로 넘겨준 함수를 말한다. (함수에 파라미터로 들어가는 함수)

2. 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출된다.

 

3. 함수를 순차적으로 실행하고 싶을 때 사용한다.

 

콜백함수를 매개변수(parameter)로 받는 함수 만드는 방법

예제코드)

function sayOne(params){
  console.log(1);
  params();
}

function sayTwo(){
  console.log(2);
}

sayOne(sayTwo);

1. sayOne은 콜백함수 필요한 함수

2. sayTwo가 콜백함수이다.

3. L10에 sayOne(sayTwo) 대신 sayOne(function(){})으로 사용할 수 있다.

4. sayOne(function(){})은 sayOne(()=>{})로 사용할 수 있다.

 

출력값

1
2

 

3.4 예)

function sayOne(params){
  console.log(1);
  params();
}

function sayTwo(){
  console.log(2);
}

// 아래 3가지는 모두 동일하게 동작한다.
sayOne(sayTwo);

sayOne(function(){
  console.log(2);
})

sayOne(()=> console.log(2));

 

콜백지옥(Callback Hell)이란?

1. 콜백 지옥은 JavaScript를 이용한 비동기 프로그래밍시 발생하는 문제로서, 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 말한다.

2. 주로 이벤트 처리나 서버 통신과 같은 비동기적인 작업을 수행하기 위해 이런 형태가 자주 등장하는데, 이와 같은 코드는 가독성이 떨어지고, 코드를 수정하기 어려워 진다.

3. 콜백안에 콜백안에 콜백안에 ... 있는 형식으로 짜여진 코드이다.

 

예제코드

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

 

단점:

1. 코드가 거북하다.

2. 비즈니스 로직이 한눈에 보여지지 않는다.

3. 디버그가 어렵다.

4. 에러가 어디서 발생했는지 찾기 어렵다.

5. 위와같은 이유로 유지보수가 어렵다.

 

위와 같은 단점이 있으므로  콜백지옥이 되지않도록 해야한다.