[ES6] 동기 비동기

동기(synchronous)

동기식 처리 : 현재 실행중인 코드가 종료돼야 다음 코드를 실행

console.log(1)
console.log(2)
console.log(3)
//1 2 3

비동기(asynchronous)

비동기식 처리 : 오래 걸리는 작업(비동기 코드)이 있으면 Web API(브라우저 대기실)로 보내고 다른 것 부터 처리하는 방식.

// 자바스크립트
console.log(1)
setTimeout(()=>{console.log(2)},1000)
console.log(3)

// 1 3 2
-----------
//파이썬

print(1)
time.sleep(1);
print(2);
1 -> 1초쉬고 -> 2

비동기 종류

1. 이벤트리스너
2. AJAX (AJAX는 js를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 응답한 데이터를 수신하여 웹페이지를 일부 동적으로 갱신)
3. setTimeout()

동기 & 비동기 장단점

	동기	비동기
장점	순서대로 실행하기 때문에 실행 순서가 보장됨.	블록킹 발생 x
단점	현재 실행중인 task의 종료까지 다음 task가 실행되지 않는 blocking 발생	실행순서 보장 x

이해를 위한 문제

setTimeout(function() {
    console.log('1');
}, 0); 

console.log('2');

for (let i = 0; i < 3; ++i) {
    loop();
}

setTimeout(function() {
    console.log('3');
}, 0); 

console.log('4');

function loop() {
    console.log('5');
}

**풀이)
1번 setTimeout 대기실 ㄱ -> 콘솔 2출력 -> 반복문 실행 -> 2번 setTimeout 대기실 ㄱ -> 4출력

결과 : 2555413**

웹브라우저의 특수성

브라우저는 코드를 페이지에 렌더링해야하기 때문에
만약 동기식으로 처리하게 되면 렌더링이 비효율적이게 된다.
따라서 비동기식 처리가 아주 유용하다.

JS를 순차적으로 실행하기 위해서는

콜백함수를 사용한다

console.log(1);
setTimeout(() => {
  console.log(2);
}, 500);
addEventListener('click', function () {});

예시)

function 첫째함수() {}
function 둘째함수() {}

첫째함수();
둘째함수();

첫째함수에 setTimeout 같은 것들이 있으면 순서대로 실행되지 않는다.
순차적으로 하고 싶으면 콜백함수 이용.

첫째함수(둘째함수());
// 풀어보면

function 첫째함수(구멍) {
  console.log(1);
  구멍();
}
function 둘째함수() {
  console.log(2);
}

첫째함수(둘째함수); // 1 2 

주의 : 첫째함수(둘째함수()) // 둘째함수가 바로 실행되버림

🧨 콜백함수 이용은 Web API에서 처리하는 코드들과 같은
동기 비동기와 관련된 것이 아님. 콜백함수는 디자인 패턴일 뿐이다.

콜백함수의 문제점

보기 싫어짐.

첫째함수(function(){
  둘째함수(function(){
    셋째함수(function(){
      어쩌구..
    });
  });
}):

해결: Promise 패턴

첫째함수().then(function(){}).then(function(){})

Promise 바로가기

Promise then 남발 -> async await !