[RXJS] from vs of 차이

개요

• from 과 of의 차이를 알아보자.

from

먼저 공식 문서를 보면 다음과 같다.

Creates an Observable from an Array, an array-like object, a Promise, an iterable object, or an Observable-like object.

1. array 또는 array-like object를 observable로 전환해준다.

from([1,2,3])
    .forEach(item => console.log(`case 1: ${item}`));

// case 1: 1, case 1: 2, case 1: 3

2. Promise또는 observable like object를 변환해준다.

function promisify<T>(item: T): Promise<T> {
  return Promise.resolve(item);
};

from(promisify(1))
    .forEach(item => console.log(`case 2: ${item}`));

// case 2: 1

3. 해당하는 type이 아닐경우 compile error를 발생시킨다.

from(1)
    .forEach(item => console.log(`case 2: ${item}`));

// error!

of

Converts the arguments to an observable sequence.

1. argument를 observable sequence로 바꾸어준다.

of(1)
  .forEach(item => console.log(`case 1: ${item}`));

// case 1: 1

of(1,2,3)
  .forEach(item => console.log(`case 2: ${item}`));

// case 2: 1 case 2: 2 case 2: 3

2. list를 따로 sequence로 변환해주지는 않는다.

of([1,2,3])
    .forEach(item => console.log(`case 3: ${item}`));

// case 3: 1,2,3

3. 단순 변환이기 때문에 promise로 넘길 경우 promise를 직접적으로 받게된다.

of(promisify(1))
    .forEach(item => console.log(`case 4: ${item}`));

// case 4: [object Promise]