Парадигмы программирования

Procedural

    let string = 'hello';
    string += ', ';
    string += 'world';
  

Object-Oriented

    class StringBuilder {
      constructor(initialString = '') {
        this.value = initialString;
      }

      append(string) {
        this.value += string;
      }
    }

    const string = new StringBuilder('hello');
    string.append(', ');
    string.append('world');
  

Chaining

    class StringBuilder {
      constructor(initialString = '') {
        this.value = initialString;
      }

      append(string) {
        this.value += string;
        return this;
      }
    }

    const string = new StringBuilder('hello');
    string
      .append(', ')
      .append('world');
  

Functional (Imperative)

    const append = (string1, string2) => string1 + string2;
    let string = 'hello';
    string = append(string, ', ');
    string = append(string, 'world');
  

built-in functions

    const append = (string1, string2) => string1 + string2;
    let string = 'hello';
    string = string.concat(', ');
    string = string.concat('world');
  

lodash

    const { join, concat } = _;
    let string = 'hello';
    string = join(concat(string, ', '), '');
    string = join(concat(string, 'world'), '');
  

Functional (Declarative). Ramda

• map, filter, reduce, sort
• compose, pipe
• evolve
• path, prop, pathEq, propEq, pathOr, propOr
• assoc, assocPath
• tap

    const { concat } = R;
    const append = pipe(concat, join);
    let string = 'hello';
    string = concat(string, ', ');
    string = concat(string, 'world');
  

Reactive. RxJS

rxjs.operators

• map, filter, reduce, sort, find, findIndex
• count
• buffer
• debounce
• delay
• distinctUntilChanged
• finalize
• first
• flatMap
• groupBy
• max
• min
• pluck
• repeat
• retry
• skip
• switchMap
• take
• takeUntil
• takeWhile
• tap
• throttle
• withLatestFrom

rxjs.examples

• import { of, concat } from 'rxjs';
  
  concat(
    of('hello'),
    of(', '),
    of('world'),
  ).subscribe(console.log);
        

• rxjs.of(1).subscribe(x => console.log(x));
        

• rxjs.generate(0, v => v < 10, v => v + 1).subscribe(x => console.log(x));
        

• const tenCounter$ = rxjs.interval(200).pipe(rxjs.operators.take(10));
        

• tenCounter$.pipe(
    rxjs.operators.take(3)
  ).subscribe(x => console.log(x));
        

• rxjs.fromEvent(window, 'click').subscribe(x => console.log(x));
        

• destroy$ pattern

  const destroy$ = new rxjs.Subject();
  const observable$ = rxjs.interval(1000);
  observable$.pipe(rxjs.operators.takeUntil(destroy$)).subscribe(x => console.log(x));
  destroy$.next();
        

• const clicks$ = rxjs.fromEvent(window, 'click');
  clicks$.pipe(
    rxjs.operators.buffer(clicks$.pipe(rxjs.operators.debounceTime(200))),
    rxjs.operators.filter(x => x.length === 2),
  ).subscribe(x => console.log(x))
        

• rxjs.fromEvent(window, 'click').pipe(
    rxjs.operators.map(x => x.x),
    rxjs.operators.distinctUntilChanged(),
  ).subscribe(x => console.log(x))
        

ObservableHQ