JavaScript 동기 비동기 Callback & Promise & async-await

Jun·2021년 3월 15일
0

callback 함수란?

함수형태의 매개변수로 갖고있는 함수가 다른 함수의 인자로 넘겨질때 인자로 된 함수를callback형태의 함수라고 할수있다. Callback 함수는 비동기(Async) 를 사용할때 이용된다.

function callbackFuntion(name,callback){

  console.log(name);

  let getInfo = callback();

  console.log(getInfo);
  
}

callbackFuntion('Junrae Kim', (info =>{
      return 'welcome'
       }))

동기 & 비동기

자바 스크립트는 일반적으로 동기적으로 실행이 된다. 동기적이란 컴퓨터가 코드를 순서대로 읽어 나가면서 순서대로 작업을 하는 방식이다. 작업을 하는 동안에는 다음작업은 실행이 되지않고 기다리게된다. 무거운 작업을 하게되면 버퍼링이 길어지게된다. 이 무거운 작업이 끝날때까지 다른 작업들을 수행해 나아가면 시간을 단축시킬 수가 있다. 그래서 이를 활용한게 비동기적 방식이다. 비동기란 다른 작업을 수행하는 동시에 기다리지 않고 바로 다음 작업이 수행된다. 동기는 순서대로 작업을 하는 방식 즉 직렬 구조 방식이다. 비동기는 한번에 여러작업을 하여 병렬 구조 작업 방식을 보여준다. 실생활 비동기 예를들면 유튜브를 볼때 서버에서 동영상을 받으면서 다른작업도 동시에 할수 있다.

Promise

Promise 는 비동기를 사용하기 위한 '객체' 이다. '객체'이기 때문에 new 생성자를 쓴다. 콜백함수를 인자로 받는데 콜백함수는 두개의 인자를 받는다 첫번째 인자는 reslove, 두번째 인자는 reject이다. 다른 이름으로도 사용할수 있지만 일반적으로 resolve 와 reject로 사용함. 콜백함수를 시행할때 3가지의 상태가 있는데 1. pending. 2.fullfilled 3. rejected 이다. Pending 은 promise 객체를 생성할때의 상태이다. fullfilled 는 콜백 함수가 실행될때 resolve 가 되었을때 fullfilled. rejected 는 콜백 함수가 실행될때 error 가 나왔을때 즉 rejected 가 되었을때의 상태이다.

function promiseFunction (name){

  return new Promise((resolve,reject) =>{

        return resolve(name);

  })

}

let solved = promiseFunction('Junrae Kim');

console.log(solved); // Promise { 'Junrae Kim' } ((Returns a new Promise object))

Async-Await

Async-Await는 promise 와 동일하게 작동한다. 자바 스크립트가 개발되면서 좀더 편리하게 사용하기 위한 객체이다. Async 는 반드시 promise 형태로 return 되어야하고 await 의 부분도 반두시 promise 를 반환해주어야한다.

0개의 댓글