자바스크립트 callback(콜백) 함수

 

콜백(callback)

 

• Javascript는 synchronous(동기적) 실행
• hoisting 된 이후부터, 코드가 작성한 순서대로 실행
• callback
  - 콜백 함수는 나중에 실행하는 함수
  - 동기식 콜백, 비동기식 콜백이 존재
  - 동기식은 코드를 순차적으로 실행, 다음 줄 실행전에 현재 줄 코드가 완료될 때까지 대기
  - 비동기식은 코드가 실행될 때까지 대기하는 동안 나머지 작업을 실행
  - setTimeout은 비동기 함수 중 하나로 callback 함수를 주어진 시간 뒤에 실행
  - 동작 과정은 함수를 매개변수로 전달, 특정 작업 실행 후 매개변수로 전달된 함수가 호출
     (A라는 메서드 호출 시, B라는 메서드를 매개변수로 넘겨주고 A메서드에서 B메서드를 호출)
  - 콜백 함수 안에 또 다른 함수를 호출할 경우 콜백 체인 형성

 console.log(`1`); // 동기  setTimeout(() => console.log(`2`), 1000); // 비동기 - 1초 뒤에 console.log 출력  console.log(`3`); // 동기    // 동기식 callback  function printImmediately(print) {    print();  }  printImmediately(() => console.log(`hello`)); // 동기    // 비동기식 callback  function printWithDelay(print, timeout) {    setTimeout(print, timeout); // 2초 뒤에 console.log 출력  }    printWithDelay( () => console.log(`async callback`) , 2000); // 비동기      // 결과: 1 > 3 > hello > 2 > async callback

콜백 체인 문제점

 

• 콜백 체인이 길어질 경우 코드 가독성이 떨어짐
• 비즈니스 로직을 이해하기 힘듦
• 유지보수가 어려움
  
  

로그인 후 특정 시간 뒤에 로그인된 이용자 정보(아이디, 권한)를 출력하는 콜백 지옥 예제 코드

 class UserStorage {    loginUser(id, password, onSuccess, onError) {      setTimeout(() => {        if (          (id === `ellie` && password === `123`) ||          (id === `gunwoo` && password === `1104`)        ) {          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 id = prompt(`enter your id`);  const password = prompt(`enter your password`);    const userStorage = new UserStorage();  userStorage.loginUser(    id,    password,    user => {      userStorage.getRoles(        user,        userInfo => {          alert(`name: ${userInfo.name}, role: ${userInfo.name}`);        },        error => {          console.log(error);}       );      },    error => {      console.log(error);   } );

코드 출처 : https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2