콜백 때려잡기

 

이해한 것 같다가도 헷갈리는 콜백 다시 정리하기

 

 

 

콜백을 사용한 예시

var users = ['Minho', 'Oana', 'Ben'];

function addUser(username, callback) {
  setTimeout(()=> {
    users.push(username);
    callback();
  }, 5000);
}

function getUsers() {
  setTimeout(()=> {
    console.log(users);
  }, 5000);
}

// First add user to database then execute getUsers after user has been added.
addUser("Ryan", getUsers);
// addUser("Ryan", getUsers());
// 이 때 중요한 것은 함수를 바로 실행시켜주면 (getUsers()) 콜백이 실행되지 않는다.

위의 코드를 실행시키면,

 

10초 후, ["Minho", "Oana", "Ben", "Ryan"] 가 콘솔에 출력된다.

 

 

 

콜백을 사용하지 않은 예시

var users = ['Minho', 'Oana', 'Ben'];

function addUser(username) {
  setTimeout(()=> {
    users.push(username);
  }, 5000);
}

function getUsers() {
  setTimeout(()=> {
    console.log(users);
  }, 5000);
}

// First add user to database
addUser("Ryan");

// Second get updated list of users
getUsers();

위의 코드를 실행시키면,

5초 후 ["Minho", "Oana", "Ben", "Ryan"] 가 출력된다.

하지만 여기서 getUser의 시간을 콘솔창에는 ["Minho", "Oana", "Ben"] 만 출력되고

5초 후 다시 users를 호출했을 때,   ["Minho", "Oana", "Ben", "Ryan"] 가 출력된다.