자바스크립트 비동기 처리와 콜백 함수

비동기 처리란?

특정 코드의 연산이 끝날 때까지 코드의 연산을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 이야기한다.

비동기 예제 /setTimeout()

//#1
console.log('1');
//#2
setTimeout(() => {
    console.log('2')
}, 3000);
//#3
console.log('3');

결과값은
1. 숫자 1출력
2. 숫자 3출력
3. 숫자 2출력

---

why?

setTimeout() 비동기 방식으로 실행되기 때문에 3초를 기다리다가 다음 코드를 실행하는 것이 아니라 set Time out()을 먼저 실행하고 난 뒤 바로 다음 코드인 3을 출력하고 3초가 지난 후 2를 출력한다.

---

콜백 함수로 비동기 처리 방식의 문제점 해결하기

function getData(callback) {
 $.get('url', function (response) {
  callback(response) // calllback 함수에 인자 response 넘겨줌
 })
}
getData(function (tableData) {
 console.log(tableData)
}) // callback

---

CallBack은 무엇일까??

함수가 끝나고 실행되는 함수.

자바스크립트에서의 함수는 객체이다. 함수는 함수를 인자로 받을수 있으며 다른 함수를 통해 반환될 수 있다. 인자로 대입되는 함수를 콜백함수라고 부른다.

---

콜백지옥 !!

$.get('url', function (response) {
 parseValue(response, fuction(id) {
  auth(id, function (result) {
   display(result, function (text) {
    console.log(text)
   })
  })
 })
})

가독성이 떨어진다.

해결방법은 각 동작을 독립적인 함수로 만드는것이다.

---

콜백지옥 해결방법

function parseValueDone(id) {
 auth(id, authDone);
}
function authDone(result) {
 display(result, displayDone)
}
function displayDone(text) {
 console.log(text)
}
$.get('url', function (response) {
 parseValue(response, parseValueDone)
})

하지만 이코드도 가독성이 떨어진다.
그렇기 때문에 다음공부는 Promise, AsyncAwait을 사용하는 방법을 배워야겠다.