동기적 호출 , 비동기적 호출

동기적 호출(Synchronous)이란

음식점을 예시로 들 수 있는데
1. 첫 손님이 주문하고
2. 주문받은 요리를 진행하고
3. 요리가 끝난 음식을 손님에게 전달
4. 전달 후 다음 두번째 손님 주문

위와같은 상황에서 첫손님이 주문하고 요리하고 전달하기까지 다음손님(두번째 손님)은 아무것도 못하고 첫번째 손님에게 전달될때까지 하염없이 기다려야만 한다 이게바로 동기적 호출이라고 볼 수 있다

비동기적 호출(Asynchronous)이란

위 예시와 같이
음식점을 예로
1번부터 4번까지 전부 한번에 진행된다는점,
즉 1번이 끝나고 2번이 시작되는 것을 기다리지 않고
1번이 시작해도 바로 2번이 시작하고 3번도 시작, 4번도 시작한다

Callback 함수

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

const printAll = () => {
  printString("A", () => { // A가 실행되고
    printSting("B", () => { // A가 실행된후 안에 B가 실행되고
      prtingString("C", () => {}) // B까지 실행됬으면 마지막 C가 실행된다
    })
  })
}
printAll()

위 예제처럼 콜백함수의 특징으로 콜백이 한개, 두개일때는 괜찮아 보일진 몰라도 여러개가 있으면 콜백지옥이 된다
즉 코드가 가독성이 엄청 떨어지고 비효율적이기 때문에
콜백지옥을 벗어나야 한다

Promise

콜백지옥을 벗어나기위해 사용하는 하나의 클래스
resolve(), reject()를 사용한다

resolve는 성공, reject는 실패라고 기억하면된다.
코드 가독성이 콜백지옥보다 더욱 좋아진다

// 콜백함수 예제 활용
// resolve 사용
const printString = (string) => {
  return new Promise((resolve, reject) => {
    setTimeout (
      () => {
        console.log(string)
        resolve()
      },
    Math.floor(Math.random() * 100) + 1
   )
 })
}

const printAll = () => {
  printString("A")
  .then(() => { // .then으로 이어나간다
    return printString("B")
  })
  .then(() => {
    return PrintString("C")
  })
}
printAll()

async, await

Promise와 비슷해보이지만 다르며 await를 통해 비동기 함수들을 동기적인것처럼 사용이 가능하다

function goToBad() {
  return new Promise((resolve, reject) => {
    setTimeout() => { resolve'4. goToBed') }, 100)
  })
}
const result = async () => {
  const one = await gotoa();
  console.log(one)
  
  const two = await sitAndCode();
  console.log(two)
  
  const three = await eatLunch();
  console.log(three)
  
  const four = await goToBed();
  console.log(four)
};

result();

타이머 관련 API

setTimeout(callback, millisecond)

일정 시간 후에 함수를 실행

매개변수(parameter): 실행할 콜백 함수, 콜백 함수 실행 전 기다려야 할 시간 (밀리초)
return 값: 임의의 타이머 ID

setTimeout(function () {
  console.log('1초 후 실행');
}, 1000);
// 123

setInterval(callback, millisecond)

일정 시간의 간격을 가지고 함수를 반복적으로 실행

매개변수(parameter): 실행할 콜백 함수, 반복적으로 함수를 실행시키기 위한 시간 간격 (밀리초)
return 값: 임의의 타이머 ID

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

clearInterval(timerId)

setInterval 타이머를 종료

매개변수: 타이머 ID
return 값: 없음

const timer = setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
clearInterval(timer);
// setInterval이 종료됨.
```