동기, 비동기

동기Syncronous 와 비동기Asynchronous는 중요한 개념이다.

• 동기는 요청 후 응답을 받아야만 다음 동작을 실행하는 방식
• 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식

예를 들어
비동기는 세탁기를 돌려놓고 청소를 하는 개념이다.(병렬적)
동기는 청소만 하는 개념이다.(직렬적)

자바스크립트에서 동기와 비동기

자바스크립트는 단일 스레드 프로그래밍 언어 이기 때문에 단일 호출 스택 기능으로 한번에 하나의 일을 처리 한다. 그러므로 자바스크립트에서는 동기 방식이 Default이다. 때문에 하나의 함수를 처리하는데 시간이 오래 걸리면 다음 실행해야할 함수에 지장을 줄 수있다.

동기의 장단점

장점 : 설계가 매우 간단하고 직관적이다.
단점 : 결과가 주어질 때 까지 아무것도 못하고 대기해야 한다.

비동기의 장단점

장점 : 요청에 따른 결과가 반환되기 까지 다른 작업을 수행할 수 있다.
단점 : 동기식 보다 설계가 복잡하다.

** 블럭과 논블럭 (동기, 비동기에서 만들어진 개념)
블럭 상태: A브라우저가 오픈 되기전까지 다른 브라우저는 계속 대기해야하는 상태
논블럭 상태: A브라우저가 오픈 되기전까지 다른 브라우저는 대기 하지 않고 제약없이 사용할 수 있는 상황

동기 방식에서 비동기 방식을 쓰는 방법

Call back 함수

콜백 함수란 다른 함수의 인자로 이용되는 함수이며 어떤 이벤트에 의해 호출되는 함수이다.

function synchronous(callback, sec){
	callBackFunction() 
}
synchronous(()=>console.log('동기방식')

위 예시는 2초 뒤에 콜백함수(()=>console.log('동기방식')) 가 실행되는 동기 방식의 코드이다.

function synchronous(callback, sec){
	setTimeout(callback, sec*1000)
}
synchronous(()=>console.log('동기방식'),2)
console.log('비동기방식')

동기 방식을 따른다면 2초 뒤 '동기방식'이 출력된 후 '비동기방식'이 출력할 것이다.
하지만 setTimeout이라는 비동기 함수(Web API)를 사용해서 '비동기방식'을 먼저 출력하고, 2초 뒤에 '동기방식'이 출력된다.
*Web API
: 브라우저에서 제공하는 API로 DOM, Ajax, Timeout 등이 있다.