JavaScript_동기와 비동기

[동기]{실행 순서가 확실한 것 (발생하는 하나의 이벤트가 모두 끝날 떄까지 다른 이벤트를 처리하지 못하고 이벤트가 모두 완료 된 후 다음 이벤트를 동작) }
1. Single Thread(단일 스레드), Synchronus(동기)

2. Memory Heap 
- 변수와 객체의 메모리 할당을 담당하는 곳

3. Call Stack
- 함수가 호출이 되면 쌓이는 곳
- LIFO(Last In Frist Out) 구조

---

[비동기]{연속적으로 발생하는 이벤트를담은 후 완료되는 순서대로 일을 처리하는 실행 순서가 확실하지 않은 것}
* 비동기를 사용해야 하는 이유 *

function first(){
	console.log(1);
}
function second(){
	console.log(2);
}
		
first();
second();

//결과
//1
//2

# 자바스크립트는 순차적으로 처리하는 언어이기 때문에 함수 호출한 first, second 순서대로 실행된다.
# 하지만 만약 함수가 request와 response를 해야한다면?
# 이러한 이유때문에 비동기가 필요한 것이다.

function first(){
	setTimeout(function (){ // setTimeout으로 실행시간을 늦춘다.
		console.log(1);
	},300); // 100 : 1초
}
function second(){
	console.log(2);
}
first();
second();

//결과
//2
//1(3초후 출력)

1. 콜백함수(CallBack)
- 단점 : 가동성이 떨어진다 / 에러처리를 해야하면 모든 콜백에서 각각 에러 핸들링을 해야한다.

2. Promise 
- 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.
- Promise를 사용하여 비동기 작업이 완료된 후의 결과 값을 받을 수 있는데, 그렇기 때문에 이후 처리를 컨트롤 할 수 있다.
- new키워드로 생성할 수 있으며 총 4개의 상태 값을 가진다.
[1] Pending   : 아직 결과 값이 반환되지 않은 진행 중인 상태
[2] fulfilled : 성공
[3] Rejected  : 실페
[4] Settled   : 결과 값이 성공 혹은 실패로 반환된 상태 (한번 Setteld된 값은 재실행 할 수 없다.)
- new Promise로 생성된 인스턴스 객체는 "객체"이기 때문에 변수로 할당하거나 함수의 인자로 사용할 수 없다.
- 인스턴스 호출시에는 대표적으로 then과 catch 메소드를 사용한다.

/** resolve시 then으로 **/

const promise = new Promise((res,rej) => {
	setTimeout(() => {
		res(111);
	}, 1000);
});

promise
.then(res => console.log(res));

//출력 111

/** reject시 catch로  **/

const promise = new Promise((res, rej) => {
  setTimeout(() => {
    rej('error!');
  }, 1000);
});

promise
  .then(res => console.log(res))
  .catch(err => console.error(err));

// catch 메소드에 잡혀서 console.error에서 출력된 값
error!

** 중요 **
- then 메소드는 다시 Promise를 반환한다.
- Promise 객체를 반환하는 것은 then, catch 메소드를 사용할 수 있다는 것이며, 이를 통해 연속적으로 then 메소드를 사용하여 
  Promise charining이 가능하다는 것을 의미한다.