비동기

- 동기(synchronous)

   특정 코드의 실행이 완료될 때까지 기다리고 난 후, 다음 코드를 수행 (여러 코드를 수행하기에는 무리가 있음)

 

-비동기(asynchronous)

  특정 코드의 실행이 완료되는 것을 기다리지 않고, 다음 코드를 수행 (여러코드 병행이 가능함)

 

>> 비동기의 경우가 더욱 효율적이며, 싱글 스레드 기반인 자바스크립트가 비동기 처리가 가능한 이유는 환경에서 도와주기 때문

 

 

<내장 비동기 함수>

const timer = setTimeout(function () {
  console.log('10초 후 실행');
}, 10000);


setInterval(function () {
  console.log('1초마다 실행');
}, 1000);

const timer = setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
clearInterval(timer);

동기 일 경우, 위에서 부터 하나씩 오겠지만, 비동기 처리를 하기 때문에

위와 같은 경우 10초 후 실행 부터가 아닌, 1초마다 실행 > 지우기 > 10초 후 실행 순으로

이루어진다.

이유는 더 빨리 동작이 완료되는 순서로 작동하기 때문, 순서를 예측할 수가 없다.

 

 

하지만, 코드를 짤때 개발자가 예측할 수 없도록 코드를 짜는 것은 옳은 방법이 아니다. 

비동기로 작동하는 코드를 제어할 수 있는 방법을 알아야한다.

 

[제어방법] : 비동기를 동기화 하기

- 콜백 함수

const printString = (string, callback) => {
  setTimeout(function () {
    console.log(string);
    callback();
  }, Math.floor(Math.random() * 100) + 1);
};

const printAll = () => {
  printString('1번', () => {
    printString('2번', () => {
      printString('3번', () => {});
    });
  });
};

printAll();

console.log(
  `아래와 같이 Callback 함수를 통해 비동기 코드의 순서를 제어할 수 있습니다!`
);

 

위와 같은 상황

'아래와 같이 Callback 함수를 통해 비동기 코드의 순서를 제어할 수 있습니다!'

1번

2번

3번

 

이 나올 것. 1,2,3번은 일정한 시간 후에 프린트 되도록 되어있기에 가장 먼저 동작이 완료 될 

'아래와 같이 Callback 함수를 통해 비동기 코드의 순서를 제어할 수 있습니다!' 문장이 먼저 작동하게 되고,

그 뒤 1,2,3 번 문장이 작동하지만, printAll() 이라는 함수 안에 1번 2번 3번 순서로 콜백이 되어있기 때문에 위와 같은

순서를 지키며 작동하게 된다.

 

+) 하지만, 콜백함수를 길게 사용할 수록 가독성이 낮아지고, 코드의 길이가 길어지기 때문에 짧은 길이에만 사용하기를 권장한다.

 

 

- Promise (Callback Hell 방지)

promise 는 class이다 >> new 키워드로 자신의 자식 객체를 생성한다.

또한, Promise는 비동기 처리를 수행할 콜백함수(executor)를 인수를 전달 받는데, 이는 resolve, reject 함수를 인수로 전달받는다.

 

1) Promise 객체가 생성 > 2) executor 자동실행 >  코드 정상실행 3) resolve 함수 / 코드 에러 발생 3) reject 함수

 

 

Promise 객체의 내부 프로퍼티(속성)

- state, result (하지만, 직접 접근이 아닌, .then, .catch, .finally 와 같은 메서드를 사용해야 접근이 가능하다)

 

state : 기본은 pending(대기) > 콜백함수가 성공적으로 작동 했다면, fulfilled(이행) 으로 바뀌고, 에러가 났다면 rejected(거부) 된다.

 

 

result :기본은 undefined > 콜백함수가 성공적으로 작동했다면 resolve(value) 가 호출되어 value로, 에러가 발생되었다면 

             reject(error) 가 호출되어 error로 변한다.

 

(메서드)

.then : executor의 코드가 정상처리 될 경우 사용가능

.catch : executor의 코드가 에러처리 될 경우 사용가능

.finally : executor의 코드 정상 에러 상관없이 사용가능

 

 

- Async / Await (Promise Hell 방지)

함수 앞에 async 을 붙이고, 함수 안에 await 후 코드를 사용하면,

await이 붙은 코드가 먼저 작동하고 그 후, 뒤의 코드들이 작동한다.

// 함수 선언식
async function funcDeclarations() {
	await 작성하고자 하는 코드
	...
}

// 함수 표현식
const funcExpression = async function () {
	await 작성하고자 하는 코드
	...
}

// 화살표 함수
const ArrowFunc = async () => {
	await 작성하고자 하는 코드
	...
}