[코딩온] 웹개발자 풀스택 과정 6주차 회고 | JavaScript - 콜백함수

자바스크립트의 콜백함수에 대해 알아보자

콜백함수

JavaScript는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있는데, 인자(매개변수)로 대입되는 함수를 콜백함수라고 한다.

즉, 다른 함수가 실행을 끝낸 뒤 실행되는 함수

함수를 선언할 때는 parameter(인자, 매개변수)로 함수를 받아서 쓸 수 있다.

• 비동기 받ㅇ식으로 작성된 함수를 동기 처리하기 위하여 사용
  독립적으로 수행되느 작업도 있는 반면 응답을 받은 이후 처리되어야 하는 종속적인 작업도 있을 수 있으므로 그에 대한 대응 방법이 필요

콜백지옥

• 비동기 프로그래밍시 발생하는 문제
• 함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기가 너무 깊어지는 현상
• 가독성은 떨어지고 코드수정 난이도는 올라간다.

Promise

• 비동기 함수를 동기 처리하기 위해 만들어진 객체
• 성공과 실패를 분리하여 반환
• 비동기 작업이 완료된 이후에 다음 작업을 연결시켜 진행할 수 있는 기능을 가짐

Promise 사용법 01

function promise1(flag) {
	return new Promise(function (resolve, reject) {
    if(flag) {
		resolve('promise 상태는 fulfilled!!! then으로 연결됩니다. \n 이때의 flag가 true입니다.');
	} else {
		reject('promise 상태는 rejected!!! catch로 연결됩니다'. \n 이때의 flag가 false입니다.');
	}
  });
}

• Promise는 두 가지 콜백 함수를 가짐
  resolve(value): 작업이 성공(fulfilled)한 경우, 그 결과를 value와 함께 호출
  reject(error): 에러(rejected)발생 시 에러 객체를 나타내는 error와 함께 호출
  

Promise 사용법 02

함수 호출 (성공)
promise1(true)
 .then(function (result) {
 	console.log(result);
 })
 .catch(function (err) {
 	console.log(err);
 });
 
 함수 호출 (실패)
promise1(true)
 .then(function (result) {
 	console.log(result);
 })
 **.catch**(function (err) {
 	console.log(err);
 });
 
 - resolve() -> then 메서드 실행
 - reject() -> catch 메서드 실행
 
 

async / await

• Promise도 chaning을 하다보면 then().then() 처럼 꼬리를 물게 되어 코드의 가독성이 떨어질 수 있다.
• Promise보다 직관적인 코드를 위해 등장한 async, await
• 기능이 추가된 것이 아닌, Promise를 다르게 사용하는 것

async / await
프로미스 기반 코드를 좀 더 쓰기 쉽고 읽기 쉽게 하기 위해 등장
비동기 처리 패턴 중 가장 최근에 나온 문법

async

• 함수 앞에 붙여 Promise를 반환한다

• 프로미스가 아닌 값을 반환해도 프로미스로 감싸서 반환한다.

  await

• 프로미스 앞에 붙여 프로미스가 다 처리될 때가지 기다리는 역할을 하며 결과는
  그 후에 반환한다.

function goMart() {
	console.log('마트에 가서 어떤 음료를 살지 고민한다');
}

function pickDrink() {
	return new Promise(function (resolve, reject) {
    	setTimeout(function () { 
        	console.log('고민 끝!!');
            product = '제로 콜라';
            price = 2000;
            resolve();
           }, 3000);
         });
        }
        
  function pay() {
  	console.log(`상품명 : ${product}, 가격: ${price}`);
   }
   
   async function exec() {
   	goMart();
    await pickDrink();
    pay();
   }
   
   let product;
   let price;
   exec();

결론

자바스크립트에서 가장 중요한 개념들을 알아봤다. 동기와 비동기등을 이해하고 사용하는데 연습을 통해서 익히고 이해해야 할 것 같다. 콜백함수로 처리된 코드를 Promise를 이용한 코드로 바꾸는 연습을 해야겠다고 느꼈다.

참고

[코딩온] 웹개발자 풀스택 과정 6주차 ppt