[Javascript] callback, promise, async/await

sunny·2022년 10월 10일

callback 이해하기!

👉 func은 바로 실행되진 않지만 다른 함수의 입력값으로 전달되서 다른 함수에 의해서 나중에 호출된다!!

callback 함수 예제

기본

words = ['apple', 'banana', 'grape'];
function callback(element){
  return element.length > 6;
}
newWords = wrods.filter(callback);

익명 함수

words = ['apple', 'banana', 'grape'];

newWords = wrods.filter(function(element){
  return element.length > 6;
});

화살표 함수

words = ['apple', 'banana', 'grape'];

newWords = wrods.filter((element) => {
  return element.length > 6;
});

newWords = wrods.filter(element => element.length > 6);

callback 함수 예제2

words = ['apple', 'banana', 'grape'];
function myfilter(origin, callback) {
  var result = [];
  for(var i = 0; i < origin.length; i++){
  	var current = origin[i];
    if(callback(current)){
    	result.push(current);
    }
  }
}
newWords = myfilter(words, element => element.length > 6);

Promise 이해하기!

promise 👉 실행은 바로 하되, 결과값은 나중에 받는 객체

결과값은 실행이 완료된 후 then이나 catch 메서드를 통해 받는다
new Promise는 바로 실행되지만, 결과값은 then을 붙였을 때 받게 된다.
콜백 지옥 해결

언제 비동기적 처리를 하느냐?

이벤트 리스터를 사용할 때 콜백 함수 자주 사용
언제 끝날 지 예측하기 어려울 때
주가 되는 작업이 아닐 때
대표적으로, 통신할 때

promise 예제

기본 예제

const condition = true; // true면 resolve, false면 reject

const promise = new Promise((resolve, reject) => {
    if (condition) {
        resolve('성공');
    } else {
        reject('실패');
    }
});
// 다른 코드가 들어갈 수 있음
promise
    .then((message) => {
        console.log(message); // 성공(resolve)한 경우 실행
    })
    .catch((error) => {
        console.error(error); // 실패(reject)한 경우 실행
    })
    .finally(() => { // 끝나고 무조건 실행
        console.log('무조건 실행');
    });

promise chaining

const condition = false; // true면 resolve, false면 reject

const promise = new Promise((resolve, reject) => {
    if (condition) {
        resolve('성공');
    } else {
        reject('실패');
    }
});
// 다른 코드가 들어갈 수 있음
promise
    .then((message) => {
        return new Promise((resolve, reject) => {
            resolve(message);
        });
    })
    .then((message2) => {
        console.log(message2);
        return new Promise((resolve, reject) => {
            resolve(message2);
        });
    })
    .then((message3) => {
        console.log(message3);
    })
    .catch((error) => {
        console.error(error); // 실패(reject)한 경우 실행
    })

예제

function findAndSaverUser(Users) {
    Users.findOne({})
        .then((user) => {
            user.name = 'zero';
            return user.save();
        })
        .then((user) => {
            return Users.findOne({ gender: 'm' });
        })
        .then((user) => {
            // 생략
        })
        .catch(err => {
            console.error(err);
        });
}

async/await 이해하기!

함수 선언부를 일반 함수 대신 async function으로 교체한 후, 프로미스 앞에 await을 붙인다.

async 는 암묵적으로 promise를 반환한다.
await 는 resolve, reject와 같은 promise 객체를 기다린다.

async 예제

promise 코드

function findAndSaverUser(Users) {
    Users.findOne({})
        .then((user) => {
            user.name = 'zero';
            return user.save();
        })
        .then((user) => {
            return Users.findOne({ gender: 'm' });
        })
        .then((user) => {
            // 생략
        })
        .catch(err => {
            console.error(err);
        });
}

async/await 코드

async function findAndSaverUser(Users) {
    try{
        let user = await Users.findOne({});
        user.name = 'zero';
        user = await user.save();
        user = await Users.findOne({ gender: 'm' });
        // 생략
    } catch (error) {
        console.error(error);
    }
}