함수, Observable, Promise

함수와 Observable의 공통점

const xhr = new XMLHttpRequest();
xhr.onload = function(e) {
  afterAjaxResult = JSON.parse(xhr.responseText);

  const result = foo(atferAjaxResult);
  console.log(result);
}

const {interval} = rxjs;
const numbers$ = interval(100);

numbers$.subscribe(value => console.log(value));

함수와 observable은 데이터를 받는 시점을 지연할 수 있다. 함수는 넘겨줄 파라미터가 아직 존재하지않거나 준비되지 않았을 때, Observable은 subscribe를 호출하기 전까지 데이터를 전달하지 않는다. 이런 식으로 데이터를 받을 시점을 지연시킬 수 있다는 공통점이 있다.

함수와 Observable이 다른 점이 있다면 함수는 호출 시 반환값이 딱 한 개인 반면에 Observable은 next()를 호출해 구독 이후 여러개의 데이터를 전달 할 수 있다. 또한 함수는 개발자가 데이터를 요청하는 pull 방식이라면, Observable은 변할 때마다 데이터가 전달되는 push 방식이다.

 

Promise와 Observable

 

Promise와 Observable은 유사한 면이 많다. Promise도 Observable과 마찬가지로 구독 형태를 띄우고 있다. 하지만 Promise는 정의부가 생성 시 딱 한번 호출되고, Observable의 complete와 같은 취소를 위한 인터페이스가 없다. (취소와 같은 동작을 하도록 할 수는 있음 번거로울 뿐)

 

또한 then이 호출될 때에 이미 결정된 상탯값만을 반환하기 때문에 동일한 값만 계속 받을 수 있다. 사용자에게는 lazy하게 보일 수 있지만 원칙적으로는 lazy하다고 하기 힘들다.

 

 

구분	함수	Observable	Promise
정의	함수 선언	Observable 객체 생성	Promise 객체 생성
호출	함수 호출	subsribe	then
호출시 정의부 실행 여부	매번 정의부 실행	매번 정의부 실행	생성 시 단 한번 호출
지연(lazy) 가능 여부	O	O	X (정해진 상태값만 호출)
데이터	한 개	여러 개	한 개
에러처리 지원	별도로 없음	error	reject
취소 지원	x	o	x
전달 방식	pull	push	push

 

 

Pull vs Push

 

Pull 

• 개발자가 주도적으로 데이터의 상태를 확인하고 관리.  but 데이터의 변경 여부를 주기적으로 확인해야함

 

Push 

• 데이터를 전달하는 주체의 상태에 관심을 둘 필요가 없음. 
• 관심있는 데이터에 한정하여 데이터 관리 가능 => 데이터의 거부권을 가지고 있다
• 데이터 처리에 따른 오류 처리가 필요 없음 ( 데이터가 전달되었을 때 처리되기 때문에)
• 리액티브하다. (데이터의 변경에 Pull보다 빠르게 반응하고 자동으로 다른 객체에도 전달할 수 있기 때문)