[JavaScript]Callback vs Promise 자바스크립트 콜백함수 vs 프로미스 예시, 비교

이은진·2020년 11월 4일
2

JavaScript Study

목록 보기
1/24

1. 콜백함수

1.1 콜백함수 예시

const getDataCallback = (callback) => { 
  setTimeout(() => {
    callback('This is my CALLBACK error', undefined)
    callback('This is my CALLBACK error', undefined)
  }, 2000)
}

getDataCallback((err, data) => {
  if (err) {
    console.log(err)
  } else {
    console.log(data)
  }
})

//This is my CALLBACK error
//This is my CALLBACK error

1.2 콜백함수 특징

  1. Once we are READY to actually call the callback, we can access to an argument called 'callback'.
    콜백함수는 함수가 작동될 준비가 됐을 때 작동하는 함수다.
  2. We have to fake the first argument setting an equal to undefined, saying there is no error, and then we pass our real data for the second argument.
    콜백함수는 argument가 한 개라서, 호출할 때 두 개의 인자에 에러날 경우와 정상일 경우에 출력할 내용을 직접 순서대로 작성해줘야 한다.
  3. The name 'callback' is not spaecific cus we just have one, dont know what to do when things went well or not, we just place two arguments in order inside
    2번의 이유로 콜백함수는 자체만으로 봤을 때 정상적으로 작동했을 때와 그렇지 않았을 때 뭘 해야 하는지 의미가 모호하다.
  4. Might accidently call callback function twice
    함수 내부에서 같은 데이터를 두 번 이상 request할 수 있다: 오류발생 가능성

2. 프로미스

2.1 프로미스 예시

const myPromise = new Promise((resolve, reject) => { 
  setTimeout(() => {
    //resolve('This is the PROMISE DATA')
    reject('This is my PROMISE error')
    reject('This is my PROMISE error')
  }, 3000) 
})

myPromise.then((data) => { 
  console.log(data)
}, (err) => {
  console.log(err)
})

//This is my PROMISE error

2.2 프로미스 특징

  1. Promise constructor already built in JS
    프로미스는 자바스크립트에 원래부터 내장된 constructor다.
  2. We have separate two functions, call resolve when nothing went wrong and call reject when something failed. Clear semantics 'resolve', 'reject'
    정상적으로 이행하면 resolve 함수를, 뭔가 오류가 나면 reject 함수를 각각 호출한다. 따라서 argument 하나밖에 없는 콜백보다 의미가 더 clear하다.
  3. Can only call resolve/reject single time even if we call the same thing twice
    프로미스 안에서 resolve나 reject를 두 번 호출하는 실수를 범할 가능성 없음.

프로미스 then 메서드 자세히 보기

myPromise.then((data) => { 
  console.log(data)
}, (err) => {
  console.log(err)
})

myPromise.then((data) => { 
  console.log(data)
}, (err) => {
  console.log(err)
})

//This is my PROMISE error
//This is my PROMISE error
  1. The first function gets called when the promise resolves(=things went well)
    .then은 두 개의 함수를 인수로 받는다. 첫번째는 프로미스 함수가 잘 이행됐을 때 호출되는 함수고,
  2. The second function gets called when things went poorly
    두번째는 에러가 발생했을 때 호출되는 함수다.
  3. We call myPromise.then() twice meaning we are doing two different things with one data, not requesting the data twice
    위 예시에서 두 번 then을 호출했는데, 그 의미는 같은 데이터를 두 번 개별로 사용한다는 의미지, 데이터를 두 번 호출한다는 의미는 아니다.
profile
빵굽는 프론트엔드 개발자

0개의 댓글