[JS] 동기(Synchronous), 비동기(Asynchronous) 프로그래밍(+Promise)

동기, 비동기 프로그래밍은 코드가 실행되는 순서의 차이가 있다. 이 두가지 개념을 기차에 비유해 보자면, 

아래 그림과 같다. 

동기 프로그래밍은 앞 기차가 가기 전까지 뒤 기차들은 순서를 기다려야 하는 것과 같다.

 

 

 

 

 

 

비동기

비동기 프로그래밍은 앞 기차가 가길 기다리지 않아도 되고 다른 경로로 이동해서 최적의 선로를 찾아 운행되는 것과 같다. 

 

 

 

 

 

 

 

즉 동기는 하나의 코드가 실행되기 끝나기를 기다려야 다음 코드가 실행될 수 있는 것이라면, 비동기는 한 코드의 실행시간이 길어질 때 다음 코드들도 동시에 실행 되는 것이다.

console.log('1번기차 출발')

setTimeout(() => {
console.log('2번기차 출발')}, 3000)

console.log('3번기차 출발')

 

2번기차가 출발하는 것을 기다리지 않고 3번기차가 먼저 출발 할 수 있게 한다.  

 

 

 

 

 

 

 

function async(name) {
  console.log(`${name}에게 배달 `);
  
  setTimeout(() => {
    console.log(`${name}식사완료`);
  }, 5000)


setTimeout(() => {
  console.log(`${name}그릇수거`);
}, 10000)
}

let people = ["유민상", "김준현", "문세윤"]
for(let i = 0; i < people.length; i++) {
  async(people[i])
}

비동기로 작업이 실행되고 있는 위의 코드가 더 복잡해지고 함수 안에 함수가 계속 생기다보면 문제가 발생할 확률이 많아진다. 보다 직관적이고 비동기를 순차적으로 실행할 수 있게 만들어 주기위한 해결책으로 등장한 것이 Promise이다. 

new Promise((resolve, reject) => {
  setTimeout(function(){
    resolve("Success!"); 
  }, 2500);
})

.then((successMessage) => {
  console.log("Yeah! " + successMessage);
  return "Yeah! " + successMessage
})

.then((successMessage) => {
  console.log(successMessage + 'congratulations')
})

resolve가 실행되면, 2.5초 뒤에 Success가 then의 인자로 전달돼서 첫번째 then에는 Yeah! Success!가 출력된다.

Yeah! Success!를 return하고 두번째 then에는 앞선 리턴값을 인자로 받아서 콘솔에 띄워보면, 출력값은 "Yeah! Success congratulations"가 될 것이다.  이런식으로 하면 비동기 작업을 순차적으로 실행할 수 있다.

 

* 참고자료

https://www.youtube.com/watch?v=m0icCqHY39U