[JavaScript] 짐코딩 - (1) 동기와 비동기는 뭘까?

[JavaScript] 짐코딩 - (1) 동기와 비동기는 뭘까?

 

-공부를 할 때에는 내 나름의 방식으로 정의를 하는 것이 중요하다.

 

(1) 동기(Synchronous): 답변(결과)을 기다리는 것

(2) 비동기(Asynchronous): 답변(결과)을 기다리지 않는 것

 

• 만약 수박을 트럭에 싣는 일을 한다고 생각해보자.
• 동기식이라면, 수박을 트럭에 싣고, 상대방이 잘 확인했는지를 확인할 때까지 가만히 있는것. // 기다리는 동안에는 일을 하지 않는다.
• 비동기식이라면, 수박을 트럭에 싣고, 상대방의 상태를 확인하지 않고 계속해서 일하는 것
• 비동기식은 답변을 기다리지 않고, 바로바로 실행하기 때문에 효율이 좋다. 하지만 답변을 확인할 수 없다.

	동기	비동기
장점	업무가 단순하다	자원을 효율적으로 사용
단점	자원을 비효율적으로 사용	업무가 복잡해질 수 있다

 

• 동기식에서 답변이 올 때 까지 기다리는 것 = 블로킹(Blocking)
• 비동기식에서 답변이 올 때 까지 기다리지 않는 것 = 논블로킹(Non-Blocking)

 

*비동기가 더욱 효율적이라면, 비동기로만 하는 게 나을까?

• 결과를 반드시 확인해야 하는 일이라면 동기식으로 코드를 작성해야 한다. (중간에 결과를 확인해야 하거나, 결과가 다음 행동에 영향을 주는 일!)

---

시나리오 코드

 

-아래의 코드에서 asyncFunction()를 실행시키면, 두번째 작업이 가장 마지막에 출력된다.

-이는 첫번째->세번째->두번째 식으로 실행된다는 걸 알려준다.

-비동기는 이처럼 다른 행위를 기다리지 않고 실행된다.

 

*콜백 함수: 다른 함수의 파라미터로 넘겨지는 함수! (asyncFunction에서는 console.log를 실행시키는 함수가 여기에 해당된다.

// 동기 프로그래밍
function syncFunction(){
    console.log('첫번째 작업');
    console.log('두번째 작업');
    console.log('세번째 작업');
}

syncFunction();

function asyncFunction(){
    console.log('첫번째 작업');

    setTimeout(function(){
    consol.log('두번째 작업');
    },1000)
    // setTimeout -> 자바스크립트 내장 함수 중 하나로 웹 API에서 지원함
    // 일정 시간이 자는 뒤에 특정 작업을 수행해라는 함수

    console.log('세번째 작업');
}

asyncFunction();

 

https://inf.run/B3fkQ

학습 페이지