Callback, Promise, Observable and Async/await

1. Callback

  : 자바스크립트에서 함수는 객체이며, 객체를 함수의 파라미터로 전달가능하기에, 즉 함수를 파라미터로 전달하는것을

   콜백함수라 하며, 함수내에서 파라미터로 전달된 함수가 먼저 실행하게끔하여 비동기에서의 취약점을 보완

  : 과거에는 많이 사용되었으나, 콜백X1000 되어 사용되는 경우가 많으며 이를 콜백지옥이라고도 표현하는데, 코드 디버

   깅, 가독성등의 문제가 발생

// 일반적인 함수
const getFriend = () => {
	return{name: "John"}
};

// 친구정보 가져오기 
const myFriend = getFriend();
console.log("My friend is ", myFriend.name);  // My friend is John


// 매 2초마다 함수실행 - 서버에서 데이터 가져오는 상황설정
const getFriend = () => {
  setTimeout(() => {
  	return {name: "John"}
  }, 2000);
};

// 데이터는 2초마다 가져오는데, 가지고 오지도 않았는데 출력하니 에러가 난다
const myFriend = getFriend();
console.log("My friend is ", myFriend.name);


// 파라미터로 cb를 넣어줌...cb는 객체이며, 이는 결국 함수이다. 
// 자바스크립트에서 함수는 객체. 
// 즉 콜백은 함수를 파라미터로 넣어서 전달하는것이며, 이를 콜백 함수라 한다
const getFriend = (cb) => {
	setTimeout(() => {
  	cb({ name: "John"});
  }, 2000);
};

// 함수를 실행할때, 익명 함수에 인자로 friend를 전달 - 함수를 파라미터로 사용
// getFriend에 파라미터를 받아서 일처리를 먼저 한 후 출력한다.  
getFriend((friend) => {
	console.log(friend.name);
})

// 확실하게 보기 위해서 아직은 헷깔리는 Arrow Function을 제거후 확인하기
function getFriend(cb){
  setTimeout(){
  	cb(name:"John"})
  }, 2000);
}

getFriend(function(friend){
	console.log(friend.name);
})

2. Promise

   : 콜백함수의 문제를 해결하고, 콜백 함수를 연결하기 위해 제시된 promise

   : 상태는 pending, fulfilled, rejected로 구분되며, then 메서드를 통해 연결한다

// Promise 예제
let myFirstPromise = new Promise((resolve, reject) => {
	setTimeout(() => {
  	resolve("Success!");
  }, 250);
});

myFirstPromise.then((successMessage) => {
	console.log("Yay! " + successMessage);
});
// Yay! Success!


// Promise 체이닝
new Promise(function(resolve, reject) {
  setTimeout(() => resolve("one"), 1000);
}).then(result => {
  console.log(result); // one
  return "two";
}).then(result => { //
  console.log(result); // two
  return "three";
}).then(function(result) {
  console.log(result); // three
}).catch(error => console.log(error.message));


// 간단한 예 추가
let promise = new Promise((resolve, reject) => {
	const button = document.querySelector('button');
  button.addEventListener('click', () => {
  	resolve(button.textContent);
  });
});

promise
  .then( (result) => {
		console.log(result);
  }).then(() => {
  	document.getElementById("res").innerHTML = "promise";
  })
  .catch(error => console.log(error.message));

3. Rxjs Observable

  : 하나 이상의 아이테을 처리할때, push 방법으로, subscribe를 통해 실현

  : observer객체는 next(), error(), complete() 함수를 가지고 있다.

const button = document.querySelector('button');
const observable = Rx.Observable.fromEvent(button, 'click');

observable.subscribe(event => {
  document.getElementById("res").innerHTML = "Observable";
	console.log(event.target);
});

4. async & await

  : 함수앞에 async, 비동기 처리되는 메서드 앞에 await

  : Promise, Callback 보다 더 뛰어난 가독성

// 기본문법
async function test() { 
  const res = await fetchUser('...'); 
  console.log(res);
}