What is the difference between functional reactive and imperative ractive approaches?

Question

JavaScript

In one book I found two examples of a reactive approach. But I do not understand what is their fundamental difference. Please help me figure it out.
Imperative reactive approach. Live demo here
Code:

class Calculator {
  constructor(){
    this.VAT = 22;
  }
  sum(items){
    const items$ = Rx.Observable.from(items);
    const total$ = items$.map(value => value + (value * this.VAT/100))
    .reduce((acc, value) => acc + value);
    return total$;
  }
}

class Receipt {
  constructor(calculator){
    this.calc = calculator;
  }
  print(...items){
    const total$ = this.calc.sum(items);
    total$.subscribe(total => console.log(`total receipt £${total.
toFixed(2)}`));
  }
}


const JEANS = 80.00;
const SHIRT = 35.00;
const SHOES = 90.00;
const COAT = 140.00;
const HAT = 29.00;

const calc = new Calculator();
const receipt = new Receipt(calc);

receipt.print(JEANS, SHIRT, SHOES, COAT, HAT);

Functional reactive approach. Live demo here .
The code:

class Calculator {
  getTotal(...items){
    const items$ = Rx.Observable.from(items);
    const total$ = items$.map(v => this.addVAT(v))
                     .reduce(this.sumElements);
    return total$;
  }
  addVAT(itemValue){
    return itemValue + this.calculateVAT(itemValue);
  }
  calculateVAT(value){
    const VAT = 22;
    return value * VAT/100;
  }
  sumElements(accumulator, value){
    return accumulator + value
  }
}

class Receipt {
  print(total$){
    total$.subscribe(total => console.log(`total receipt £${total.
toFixed(2)}`));
  }
}


const JEANS = 80.00;
const SHIRT = 35.00;
const SHOES = 90.00;
const COAT = 140.00;
const HAT = 29.00;

const calc = new Calculator();
const receipt = new Receipt();

receipt.print(calc.getTotal(JEANS, SHIRT, SHOES, COAT, HAT));

In my opinion, in both examples there are no external variables that store the intermediate state. Therefore, I would refer both of these examples to functional programming. But the author of the book would not agree with me.

Answer 1

In the first example (imperative), your class object Calculatorafter creation stores the state : this.VAT = 22. And all subsequent methods of this class work with this state (class context).
In the second example (functional), on the contrary, the class has no state . It, in fact, is a separate namespace for pure functions. Functions in their work absolutely do not affect the state of the object.
In general, IMHO, the example is just bad . Add the logic of mutation (change) to both examples VAT, and you will immediately understand what the difference is. For in the first example, you will directly modify this.VAT, and use it later. And in the second example, you have to pass the valueVATparameter without storing it anywhere.
And the difference between functional reactive and imperative reactive approaches is that:
1. In the functional approach, your entire program is, in fact, one big pure function, made up of a composition of many small ones (like a formula in mathematics), and according to which the data, according to essence, flow, transforming into the desired result at the output.
2. In the imperative approach, your data is spread over separate living entities that have their own internal state and communicate with each other. Reactivity here is only in the fact that these entities have reactive properties, that is, when a property changes, all entities that depend on it recalculate dependent properties / values.
The difference, as such, is not in reactivity, but only in the way the task is decomposed. Reactivity here and there is essentially the same (in the example:) Rx.Observable.from(items).

Answer 2

Imperative programming describes the logic of the program in explicit commands with statements that change the state of the program.
Functional programming describes the logic of the program as the calculation of function values ​​and does not imply explicit storage of the program state.
Imperative style:

const result = 10 * 10 + 15 * 2;
console.log(result);

Functional Style:
console.log(sum(square(10), double(15)));