오늘도 4주차 콜백함수를 정리하면서 복습해보려합니다.
비동기 작업의 동기적 표현.. 저만 이해 안되는건가요..?? Promise 저만 어려워요..??
오늘의 study 목표!!!
- JavaScript 문법 종합반 3주차
🍎 콜백 함수와 동기 / 비동기 처리
🌳 콜백함수
- 다른 코드의 인자로 넘겨주는 함수
- 콜백 함수를 넘겨받은 코드 forEach, setTimeout 등은 이 콜백 함수를 필요에 따라 적절한 시점에 실행하게 된다.
- callback = call(부르다) + back(되돌아오다) = 되돌아와서 호출해줘!
즉, 제어권을 넘겨줄테니 너가 알고 있는 그 로직으로 처리해줘! - 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수. 콜백 함수를 위임받은 코드는 자체적으로 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행
🌳 제어권
1. 호출 시점
콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가진다.
원래 cbFunc()를 수행한다면 그 호출주체와 제어권은 모두 사용자가 된다.
setInterval로 넘겨주게 되면 그 호출주체와 제어권은 모두 setInterval이 된다.
2. 인자
map 메서드를 호출해서 원하는 배열을 얻고자 한다면 정의된 규칙대로 작성해야 한다. (콜백 내부의 인자도 포함)
즉, 콜백 함수를 넘겨받은 코드에게 그 제어권이 있다. 인자(의 순서)까지도 제어권이 그에게 있는 것임.
제어권이 넘어갈 함수의 규칙에 맞게 '내가' 호출해야 함!
3. this
콜백 함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조한다.
하지만 예외사항으로 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조한다.
🌳 콜백 함수는 함수다
콜백 함수로 어떤 객체의 메서드를 전달하더라도, 그 메서드는 메서드가 아닌 함수로 호출한다.
🌳 콜백 지옥과 비동기 제어
1. 콜백 지옥이란
- 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓱 수준이 헬 수준인 경우.
- 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생.
- 가독성이 지옥이다. 오랜 상태로 짜여왔기 때문에 수정(유지&보수)도 어렵다.
2. 동기 vs 비동기
동기: synchronous
- 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식.
- CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적 코드.
- 계산이 복잡해서 오래 걸리는 코드도 동기적 코드
비동기: a+synchronous => async
- 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
- setTimeout, addEventListner 등
- 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드
웹의 복잡도가 올라갈 수록 비동기적 코드의 비중이 늘어난다
🪴비동기 작업의 동기적 표현 - Promise
비동기적인 요소를 왜 동기적으로 바꾸려고 하는가?
순서를 보장할 수 없으니까 순서 보장에 필요한 어떤 로직에서 순서를 보장받기 위해
promise는 비동기 처리에 대해, 처리가 끝나면 알려달라는 '약속'이다.
- new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행된다.
- 그 내부의 resolve(성공)(또는 reject(실패))함수를 호출하는 구문이 있을 경우 resolve(또는 reject) 둘 중 하나가 실행되기 전까지는 다음(then), 오류(catch)로 넘어가지 않는다.
- 따라서, 비동기작업이 완료될 때 비로서 resolve, reject 호출
🪴비동기 작업의 동기적 표현 - Generator
*가 붙은 함수가 제너레이터 함수. 제너레이터 함수는 실행하면, Iterator 객체가 반환 ( next()를 가지고 있음 )된다.
iterator 객체는 next 메서드로 순환 할 수 있는 객체.
next 메서드 호출 시, Generator 함수 내부에서 가장 먼저 등장하는 yield에서 stop 이후 다시 next 메서드를 호출하면 멈췄던 부분 -> 그 다음의 yield까지 실행 후 stop
즉, 비동기 작업이 완료되는 시점마다 next 메서드를 호출해주면 Generator 함수 내부소스가 위 -> 아래 순차적으로 진행된다.
🪴비동기 작업의 동기적 표현 - Promise + Async/await
비동기 작업을 수행코자 하는 함수 앞에 async 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 붙여주면 된다.
Promise ~ then과 동일한 효과를 얻을 수 있음.
