🌊 동기식 처리 (synchronous)
자바스크립트는 항상 동기식(synchronous) 처리를 한다.
즉, ⭐ 한번에 코드 한줄씩 차례대로 실행 한다.
🤸🏻♀️ 비동기 처리 (asynchronous)
오래 걸리는 작업을 만나면 이걸 제껴두고 다른거부터 처리하는 방식
console.log(1);
setTimeout(function(){}, 1000);
console.log(2);위 코드를 실행하면 1 출력/1초 휴식/2 출력이 아니라 1 출력/2 출력/1초 휴식 순서로 동작한다.
➡️ 자바스크립트 실행머신인 웹브라우저는 특수한 코드들을 발견하면 제쳐두고 다른 코드부터 실행하려고 하기 때문이다.
그래서 setTimeout() 을 제껴두고 그 밑에 있는 console.log(2)라는 코드 부터 실행하는 것이다.
여기서 특수한 코드들은
setTimeout, addEventListener, ajax 등의 web API 관련 함수들이다.
따라서, 정리하면 자바스크립트를 실행하고 해석하는 웹 브라우저는 특별한 코드들을 만나면 잠깐 web API라는 대기실에 이 코드들을 옮겨서 대기시켜두고 준비가 완료되면 대기실에서 코드를 꺼내서 코드가 실행되게 만들어준다.
그냥 자바스크립트는 동기식으로 처리되기 때문에 오래걸리는 연산을 만나면 멈추지만 setTimeout, addEventListener와 같이 비동기를 지원하는 특수한 함수들은 자바스크립트가 비동기식으로 동작할 수 있게 도와준다고 보면 된다.
📢 콜백함수를 이용한 순차적 실행
1을 출력하고 1초 뒤에 2를 출력하고 싶을 때
console.log(1);
setTimeout(() => {}, 1000);
console.log(2);이렇게 쓰면 setTimeout(() => {}, 1000);이 1초간 web api로 보내지기 때문에 1 출력되고 중간에 쉬지 않고 2가 바로 출력된다.
console.log(1);
setTimeout(() => {
console.log(2);
}, 1000);이렇게 콜백함수 안에 console.log(2);를 작성해야 의도대로 동작한다.
※ 콜백함수는 비동기/동기와는 별 상관이 없고 그냥 디자인 패턴일 뿐임.
js에서 비동기처리를 하고 싶으면 위의 setTimeout등의 특수한 함수를 사용할 수 밖에 없음.
콜백 함수 디자인하는 법
첫째함수() 다음에 둘째함수()를 실행하고 싶은 경우
function 첫째함수(둘째함수) {
console.log(1);
둘째함수();
}
function 둘째함수() {
console.log(2);
}
첫째함수(둘째함수);이렇게 함수에 파라미터를 하나 뚫어준 뒤
그 파라미터에 소괄호를 붙여서 실행해주세요~ 라고 하면 함수안에 함수를 집어넣어서 실행이 가능하다.
하지만 순차적으로 실행하려고 콜백함수를 여러개 사용하면 코드가 길어진다는 단점이 있다.
첫째함수(function(){
둘째함수(function(){
셋째함수(function(){
어쩌구..
});
});
}):이걸 해결하기 위한 방법으로 등장한게 promise다.
