====== Observables compared to other techniques ======

약속 대신에 관찰 대상을 사용하여 값을 비동기 적으로 전달할 수 있습니다. 마찬가지로, 관찰 가능 객체는 이벤트 핸들러를 대신 할 수 있습니다. 마지막으로 observables는 여러 값을 전달하기 때문에 어레이에서 빌드하고 작동 할 수있는 곳에 observables를 사용할 수 있습니다.

Observables는 이러한 각각의 상황에서 대체 기술과 다소 다르게 동작하지만 중요한 이점을 제공합니다. 다음은 차이점을 자세히 비교 한 것입니다.

===== Observables compared to promises =====

옵서버블은 종종 약속과 비교됩니다. 주요 차이점은 다음과 같습니다.

  * 관찰 대상은 선언적입니다. 구독까지 계산이 시작되지 않습니다. 약속은 생성 즉시 실행됩니다. 따라서 관찰 결과는 결과가 필요할 때마다 실행할 수있는 레시피를 정의하는 데 유용합니다.
  * Observables는 많은 가치를 제공합니다. 약속은 하나를 제공합니다. 이는 관측 값을 시간이 지남에 따라 여러 값을 가져 오는 데 유용하게 만듭니다.
  * Observables는 체인과 구독을 구분합니다. 약속에는 .then () 절만 있습니다. 이로써 관측 대상은 작업이 실행되지 않고 시스템의 다른 부분에서 사용되는 복잡한 변환 방법을 만드는 데 유용합니다.
  * Observables subscribe ()는 오류 처리를 담당합니다. 아동의 약속에 푸시 오류를 약속합니다. 이로 인해 관측 가능은 중앙 집중적이고 예측 가능한 오류 처리에 유용합니다.

==== Creation and subscription ====

  * Observables는 소비자가 구독 할 때까지 실행되지 않습니다. subscribe()는 정의 된 비헤이비어를 한 번 실행하고 다시 호출 할 수 있습니다. 각 구독에는 고유 한 계산이 있습니다. Resubscription은 값의 재 계산을 유발합니다.
<code javascript>
// declare a publishing operation
new Observable((observer) => { subscriber_fn });
// initiate execution
observable.subscribe(() => {
      // observer handles notifications
    });
</code>
  * 약속은 즉시 실행됩니다. 결과의 계산은 약속이 만들어지면 시작됩니다. 작업을 다시 시작할 방법이 없습니다. 모든 then 절 (subscription)은 동일한 계산을 공유합니다.
<code javascript>
// initiate execution
new Promise((resolve, reject) => { executer_fn });
// handle return value
promise.then((value) => {
      // handle result here
    });
</code>

==== Chaining ====
  * Observables는지도와 구독과 같은 변환 기능을 구분합니다. 구독 만 구독자 기능을 활성화하여 값 계산을 시작합니다.
<code javascript>
observable.map ((v) => 2 * v);
</code>
  * 약속은 마지막 .then 절 (subscription과 동일)과 중간 .then 절 (map과 동일)을 구별하지 않습니다.
<code javascript>
promise.then ((v) => 2 * v);
</code>

==== Cancellation ====
  * 관찰 가능한 구독을 취소 할 수 있습니다. 가입 취소는 청취자가 더 이상 값을받지 못하게하고 가입자 기능에 작업 취소를 알립니다.
<code javascript>
const sub = obs.subscribe (...);
sub.unsubscribe ();
</code>
  * 약속을 취소 할 수 없습니다.

==== Error handling ====

  * 관찰 가능한 실행 오류는 구독자의 오류 처리기로 전달되며 구독자는 관찰 대상에서 자동으로 구독을 취소합니다.
<code javascript>
obs.subscribe (() => {
  throw Error('my error');
});
</code>
아동의 약속에 푸시 오류를 약속합니다.
<code javascript>
promise.then (() => {
  throw Error('my error');
});
</code>

==== Cheat sheet ====

다음 코드 스니펫은 observables와 promise를 사용하여 같은 종류의 연산을 정의하는 방법을 보여줍니다.

^ OPERATION ^ OBSERVABLE ^ PROMISE ^
|Creation |<code javascript>new Observable((observer) => {
    observer.next(123);
  });</code>|<code javascript>new Promise((resolve, reject) => {
    resolve(123);
  });</code>|
|Transform |<code javascript>obs.map((value) => value * 2 );</code>|<code javascript>promise.then((value) => value * 2);</code>|
|Subscribe |<code javascript>sub = obs.subscribe((value) => {
    console.log(value)
  });</code>|<code javascript>promise.then((value) => {
    console.log(value);
  });</code>|
|Unsubscribe |<code javascript>sub.unsubscribe();</code>|Implied by promise resolution.|
| | | |

===== Observables compared to events API =====
Observables는 이벤트 API를 사용하는 이벤트 핸들러와 매우 유사합니다. 두 기술 모두 알림 핸들러를 정의하고 시간 경과에 따라 전달되는 여러 값을 처리하는 데 사용합니다. 관찰 가능에 가입하는 것은 이벤트 리스너를 추가하는 것과 같습니다. 한 가지 중요한 차이점은 이벤트를 처리기에 전달하기 전에 이벤트를 변환하도록 관찰 가능을 구성 할 수 있다는 것입니다.

observable을 사용하여 이벤트 및 비동기 작업을 처리하면 HTTP 요청과 같은 컨텍스트에서보다 일관된 이점을 얻을 수 있습니다.

다음은 observables 및 이벤트 API를 사용하여 동일한 종류의 작업을 정의하는 방법을 보여주는 코드 샘플입니다.

^ ^ Observable ^ Events API ^
|Creation & cancellation |<code javascript>// Setup
let clicks$ = fromEvent(buttonEl, ‘click’);
// Begin listening
let subscription = clicks$
  .subscribe(e => console.log(‘Clicked’, e))
// Stop listening
subscription.unsubscribe();</code>|<code javascript>function handler(e) {
  console.log(‘Clicked’, e);
}
// Setup & begin listening
button.addEventListener(‘click’, handler);
// Stop listening
button.removeEventListener(‘click’, handler);</code>|
|Subscription |<code javascript>observable.subscribe(() => {
  // notification handlers here
});</code>|<code javascript>element.addEventListener(eventName, (event) => {
  // notification handler here
});</code>|
|Configuration |키 스트로크를 청취하지만 입력 값을 나타내는 스트림을 제공하십시오.<code javascript>
fromEvent(inputEl, 'keydown').pipe(
  map(e => e.target.value)
);</code>|구성을 지원하지 않습니다.<code javascript>element.addEventListener(eventName, (event) => {
  // Cannot change the passed Event into another
  // value before it gets to the handler
});</code>|
| | | |

===== Observables compared to arrays =====

관측 대상은 시간이 지남에 따라 값을 산출합니다. 배열은 정적 인 값 집합으로 만들어집니다. 어떤 의미에서, observables는 배열이 동기적인 경우 비동기입니다. 다음 예에서 ➞ 비동기 값 전달을 의미합니다.

^ ^ Observable ^ Array ^
|Given |<code>obs: ➞1➞2➞3➞5➞7
obsB: ➞'a'➞'b'➞'c'</code> |<code>arr: [1, 2, 3, 5, 7]
arrB: ['a', 'b', 'c']</code> |
|concat() |<code>obs.concat(obsB)
➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'</code> |<code>arr.concat(arrB)
[1,2,3,5,7,'a','b','c']</code> |
|filter() |<code>obs.filter((v) => v>3)
➞5➞7</code> |<code>arr.filter((v) => v>3)
[5, 7]</code> |
|find() |<code>obs.find((v) => v>3)
➞5</code> |<code>arr.find((v) => v>3)
5</code> |
|findIndex() |<code>obs.findIndex((v) => v>3)
➞3</code> |<code>arr.findIndex((v) => v>3)
3</code> |
|forEach() |<code>obs.forEach((v) => {
  console.log(v);
})
1
2
3
5
7</code> |<code>arr.forEach((v) => {
  console.log(v);
})
1
2
3
5
7</code> |
|map() |<code>obs.map((v) => -v)
➞-1➞-2➞-3➞-5➞-7</code> |<code>arr.map((v) => -v)
[-1, -2, -3, -5, -7]</code> |
|reduce() |<code>obs.scan((s,v)=> s+v, 0)
➞1➞3➞6➞11➞18</code> |<code>arr.reduce((s,v) => s+v, 0)
18</code> |