[JavaScript] 동기/비동기, Callback

🌼 동기 vs 비동기 처리

작성한 순서대로 코드가 실행되는 것을 동기적이라고 하고 순서가 보장되지 않고 실행되는 것을 비동기적이라고 말한다. JavaScript는 Single Thread로 동작하는 언어지만 코드가 실행되는 환경에 JavaScript engine 뿐만 아니라 Web API도 있어 Runtime 환경에서 비동기적 프로그래밍이 가능한 것이다.

// JavaScript is asynchronous .
// Execute the code back by orger after hoisting
// hoisting: var, function 등의 선언이 제일 상위로 올라가는 개념

// 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);

🌼 Callback?

callback 함수는 다른 함수의 인자로 사용되는 함수 또는 어떤 이벤트가 발생하고 나서 실행되는 함수이다. callback 함수를 활용하면 JavaScript의 비동기적 처리 특성을 어느정도 control 할 수 있지만 무분별하게 사용할 경우(callback chaining) 1) 코드 가독성이 떨어지고 2) debugging / 유지보수가 어렵게 된다.

// Callback Hell example
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: 'admim'});
      } else {
        onError(new Error('no acces'));
      }
    }, 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)
  }
);

출처 - YOUTUBE(얄팍한 코딩사전, 드림코딩 by Ellie)