[TIL] JavaScript: callback

🔑 Point
🎉 Synchronous VS Asynchronous
🎉 callback

---

1. 동기 & 비동기 차이점

동기 (Synchronous)

• javascript는 동기적(synchronous)이다.
• hoisting이 된 이후부터 코드가 작성한 순서에 맞춰서 하나씩 동기적으로 실행이 된다.
• hoisting: var, function 선언들이 자동적으로 제일 위로 올라가는 것.

비동기 (Asynchronous)예시

예를 들어 setTimeout 함수 안에 우리가 만든 함수를 지정해주는데 이 함수 를 나중에 call하는 것. 이것을 callback 함수
라고 부른다.

2. callback 함수

• 비동기 callback 함수

function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000); 

// --> 2초 후에 등장

callback 함수의 동기, 비동기

그렇다면 callback 함수는 항상 비동기 일 때만 쓰이는가?
아니요! callback에도 비동기적, 동기적으로 실행되는 callback 방법이 있다.

1. 즉각적으로 실행되는 Synchronous callback

2. 나중에 언제 실행될지 모르는 Asynchronous callback

callback 지옥

callback 함수를 네스팅 하면서 작성하는 것.

1. 가독성이 떨어진다.
2. 에러가 발생하여 디버깅을 해야할 때에도 체인이 길어질수록 해결하기가 어렵다.
3. 유지보수도 어렵다.

이런 비동기 코드를 깔끔하게 작성하고, 효율적으로 네트워크 통신을 할 수 있는 방법은?
=> Promise , await ~~