비동기 in JS

동기적: 작업이 끝날 때까지 순차적으로 진행된다. 때문에 동시에 여러 작업을 할 수 없다.
비동기: 동시에 여러가지 작업이 가능하며 기다리는 과정에서 다른 함수도 호출 할 수 있다.

setTimeout()함수는 백그라운드에서 실행되기 때문에 사용하면 비동기적으로 코드를 짤 수 있다.

function work() {
  setTimeout(() => {
    const start = Date.now();
    for (let i = 0; i < 1000000000; i++) {}
    const end = Date.now();
    console.log(end - start + 'ms');
  }, 0);
}

console.log('작업 시작!');
work();
console.log('다음 작업');

-result-
작업 시작!
다음 작업
503ms

만약에 위의 코드에서 work()함수가 끝난 다음에 어떤 작업을 하길 원할 때는 어떻게 하면 될까?
callback함수를 사용하면 된다.
콜백함수란, 함수 타입의 값을 파라미터로 넘겨줘서, 파라미터로 받은 함수를 특정 작업이 끝나고 호출 해주는 것을 의미한다.

function work(callback) {
  setTimeout(() => {
    const start = Date.now();
    for (let i = 0; i < 1000000000; i++) {}
    const end = Date.now();
    console.log(end - start + 'ms');
    callback();
  }, 0);
}

console.log('작업 시작!');
work(() => {
  console.log('작업이 끝났어요!')
});
console.log('다음 작업');

-result-
작업시작!
다음 작업
498ms
작업이 끝났어요!

주로 비동기적으로 처리되는 작업.
1.Ajax Web API 요청: 만약 서버쪽에서 데이터를 받와아야 할 때는, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야 되기 때문에 작업을 비동기적으로 처리합니다.
파일 읽기: 주로 서버 쪽에서 파일을 읽어야 하는 상황에는 비동기적으로 처리합니다
2.암호화/복호화: 암호화/복호화를 할 때에도 바로 처리가 되지 않고, 시간이 어느정도 걸리는 경우가 있기 때문에 비동기적으로 처리합니다.
3.작업 예약: 단순히 어떤 작업을 몇초 후에 스케쥴링 해야 하는 상황에는, setTimeout 을 사용하여 비동기적으로 처리합니다.