동기(Synchronous)

동기 방식

서버에 요청을 보냈을 때,응답을 받아야 다음 동작을 수행하는 방식을 말한다.

동기적 처리

위와 같은 코드를 작성하고 실행해보면 위에서 아래로 순서대로 실행이 될 것이다.

이렇게 위에서 내려오면서 순서대로 코드를 실행하는것을 "동기적 처리" 라고 한다.

현재 작업을 완료해야만 다음 줄의 코드를 실행한다.

비동기(Asynchronous)

비동기 방식

서버에 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행하는 방식

비동기적 처리

setTimeout 메소드는 인자를 두 개 받는다.

첫번째 인자는 콜백함수, 두번째 인자는 지연시간이다.
현재 위 코드에서 지연시간이 0이니깐, 결과는 1, 2, 3으로 출력될까?

하지만 결과값은 1, 3, 2 순서로 출력됐다.
결과가 이렇게 나온 이유는 setTimeout 함수는 비동기적으로 작동하는 함수이기 때문이다.

흐름을 살펴보면

1️⃣ console.log("1") 은 자기 역할(로그찍기)을 끝내야만 다음 라인으로 넘어간다. 따라서 '1'을 출력한다.
2️⃣ setTimeout() 함수는 비동기적으로 작동하는 함수이기때문에 우선 다음 라인으로 넘어간다. (본인의 수행할 일을 마칠 동안 시간이 걸리니까 그동안 다른 코드들이 일을 할 수 있도록 우선 넘겨주는것!)
3️⃣ 곧 바로 console.log("3") 이 실행된다!
4️⃣ 비동기적 처리가 끝나고 console.log("2") 를 실행한다!

비동기적 코드의 실행 결과는 동기적 코드가 전부 실행 되고나서 값을 반환한다.

참고
https://velog.io/@daybreak/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC