[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 방법이 있다.
-
즉각적으로 실행되는 Synchronous callback
-
나중에 언제 실행될지 모르는 Asynchronous callback
callback 지옥
callback 함수를 네스팅 하면서 작성하는 것.
- 가독성이 떨어진다.
- 에러가 발생하여 디버깅을 해야할 때에도 체인이 길어질수록 해결하기가 어렵다.
- 유지보수도 어렵다.
이런 비동기 코드를 깔끔하게 작성하고, 효율적으로 네트워크 통신을 할 수 있는 방법은?
=> Promise , await ~~
Author And Source
이 문제에 관하여([TIL] JavaScript: callback), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jinjinhyojin/TIL-JavaScript-callback저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)