[JS ES6]-[18]동기, 비동기 핵심만 이해하기(2) - 콜백함수

 

안녕하세요

이번 글에서는 자바스크립트에서의  콜백함수 - (동기, 비동기) 핵심만 알려드리겠습니다.

 

1. 사용이유

비동기함수는 요청 결과가 반환되기 전에 다른 작업을 수행할 수 있는 장점이 있지만,

코드의 실행 순서를 유추하기 어려워 집니다.

 

그래서 콜백함수는 코드를 순서대로 실행하고 싶을 때 사용합니다.

그냥 함수 안에 함수를 넣으면 콜백함수입니다.

 

2. 사용방법

setTimeout(() => {
  console.log(1);
}, 0);
console.log(2);

위 코드에서 1,2, 순서대로 출력하고 싶지만,

setTimtout은 비동기 함수기에 2,1 순서대로 출력됩니다.

 

 

const say_1 = (callback) => {
  console.log(1);
  callback();
}

const say_2 = () => {
  console.log(2);
}

say_1(say_2);

함수 안에 함수를 넣으니(콜백함수) 1,2 가 순차적으로 나옵니다.

위처럼 그냥 파라미터로 함수를 넣어주고, 함수 안에서 실행시켜 주면 콜백함수 완성입니다.

 

 

아래처럼 함수를 파라미터에 직접 넣을 수도 있습니다.

say_1(() => {
  console.log(2);
});

 

3. setTimtout안 콜백함수

setTimout(() => {
  console.log(1);
}, 1000);

자주 사용하던 setTimoutout안에도, 콜백함수가 들어간다는 게 보이실 겁니다.

첫 번째 파라미터에 함수를 넣어서, 콜백함수를 구현했네요.

 

4. callback함수의 단점

코드를 순차적으로 실행하기 위해, 콜백함수를 많이 사용하면 코드가 복잡해집니다.

 

say_1(function(){
  say_2(function(){
    say_3(function(){
      ...
    });
  });
}):

1,2,3을 순차적으로 보여주는 코드인데, 좀 복잡해 보이죠?

 

 

이렇게 복잡해 보이는 게 싫으면 다음시간에 배울 Promise를 사용하면 됩니다.