JS - 비동기와 동기, 함수 표현식과 함수 선언문

동기 vs 비동기

동기	비동기
동기는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행	요청을 보낸 후 응답과 관계없이 다음 동작을 실행
실행 순서가 확실함	실행 순서가 확실하지 않음

자바스크립트는 single thread

• 이벤트를 처리하는 Call stack이 하나 뿐인 언어입니다.
• 여러 가지 이벤트를 처리할 때에 동기적으로 처리하게 된다면 하나의 이벤트라 모두 처리될 때까지 다른 어떤 업무도 수행하지 못하는 현상이 일어납니다.
• 그래서 자바스크립트는 즉시 처리하지 못하는 이벤트들을 Web API로 보내 call stack이 비었을 때에 먼저 처리된 이벤트들을 줄세워 다시 이벤트 큐에 줄을 세워놓게 됩니다.(Event Loop)
• 이 때 Web API로 들어오는 순서는 중요하지 않고, 어떤 이벤트가 먼저 처리되느냐가 중요합니다.

비동기 흐름을 처리하는 방식들

1. 콜백 함수 사용 (일명 콜백 지옥)

• 처리되어야 하는 이벤트들을 순차적으로 콜백함수로 넣어주는 방식, 일명 콜백 지옥입니다.
  doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
  doThirdThing(newResult, function(finalResult) {
  console.log('Got the final result: ' + finalResult);
  }, failureCallback);
  }, failureCallback);
  }, failureCallback);
• 가독성이 매우 떨어진다는 단점이 있습니다.
• 에러 처리를 한다면 모든 콜백에서 각각 에러 핸들링을 해주어야 합니다.
• 이러한 불편함 때문에 ES6에서 비동기 흐름을 컨트롤하는 방법으로 Promise 객체가 등장합니다.

2. Promise 객체

• Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.
• 결과 값을 돌려받을 수 있기 때문에 이후 처리를 컨트롤 할 수 있습니다.
• promise 객체는 new 키워드로 생성할 수 있으며 4개의 상태 값을 가집니다.
• Pending : 아직 결과 값이 반환되지 않은 진행 중인 상태
• fulfilled : 성공
• Rejected : 실패
• Settled : 결과 값이 성공 혹은 실패로 반환된 상태
• 상태 값은 크게 Pending과 Settled로 나눌 수 있으며, Settled는 다시 fulfilled와 Rejected로 나누어집니다.

• promise Chaining

자바스크립트가 event loop를 처리하는 방식

1. call stack 비었는가?
2. task queue 작업이 있는가?
3. 1번 2번 조건이 충족하면, task queue 작업을 call stack으로 전달해줍니다.

함수 표현식과 함수 선언문의 차이

• 함수 선언문은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
• 함수 선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.
• 함수 표현식은 함수 선언문과 달리 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있습니다.