[JS] callback

오늘은 자바스크립트 공부하면서 지겹게 들었던 콜백에 대해 정리해 보려고 합니다.

 

(1) 콜백함수에 대해 아주 간단하게 설명하면

 

콜백함수란?

정의: 함수 안에 파라미터로 들어가는 함수
용도: 순차적으로 실행하고 싶을 때 씀
특징: 콜백함수가 필요한 함수들에만 콜백함수 사용 가능 (addEventlListener, setTimeOut,,,)

 

 

(2) 콜백함수 예시

document.querySelector(".button").addEventListener("click", function(){
  
})

//addEventListener 안에 들어있는 함수가 콜백함수
//click 이벤트 발생 후 순차적으로 실행

 

 

(3) 콜백함수 만들어 보기

//순차적으로 1, 2 나오도록 하고 싶다면?

function first(파라미터){
  console.log(1)
  파라미터()
}

function second(){
  console.log(2)
}

first(second)

 

 

(4) 콜백함수 총정리

"use strict";

//Javascript is synchronous
//호이스팅 된 이후부터 우리가 작성한 순서에 맞춰서 실행
//hoisting: var,fucntion 등이 제일 위로 올라가는 것


//asyncronous
console.log("1");
setTimeout(() => {
  console.log("2");
}, 1000);
console.log("3"); //1,3,2 순서로 출력


//Synchronous callback
function printImmediately(print) {
  print();
}
printImmediately(() => console.log("hello"));


//Asynchronous callback
function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}
printWithDelay(() => console.log("async callback"), 2000); //1,3,hello,2,async callback


//콜백 지옥 체험해보기
class UserStorage {
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() => {
      if (
        (id === "ellie" && password === "dream") ||
        (id === "coder" && password === "academy")
      ) {
        onSuccess(id);
      } else {
        onError(new Error("not found"));
      }
    }, 2000);
  }

  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if (user === "ellie") {
        onSuccess({ name: "ellie", role: "admin" });
      } else {
        onError(new Error("no access"));
      }
    }, 1000);
  }
}

const userStorage = new UserStorage();
const id = prompt("enter your id");
const password = prompt("enter your password");
userStorage.loginUser(id, password, (user) => {
  userStorage.getRoles(
    user,
    (userWithRole) => {
      alert("Hello ${userWithRole.name}, you have a ${userWithRole.role} role");
    },
    (error) => {
      console.log(error);
    },
  );
});
(error) => {
  console.log(error);
};

 

다음에는 콜백을 무찌르기 위한 promise에 대해 공부하고 위의 콜백 지옥 예시를 바꿔 보겠습니다!