---
# System prepended metadata

title: FP

---

# FP
## Extracting calculations from actions

1. Observe how information enters and leaves a function.
2. Discover functional techniques to make code more testable and
reusable.
3. Learn how to extract calculations from actions.

![](https://i.imgur.com/Dimsfbk.png)


---
### New assignment
Offer free shipping if the order total is at least $20. Put an icon next to the buy button if adding that item to the cart will bump the cart over $20

```javascript=
function update_shipping_icons() {
  var buy_buttons = get_buy_buttons_dom();
    
  for(var i = 0; i < buy_buttons.length; i++) {
    var button = buy_buttons[i];
    var item = button.item;
      
    if(item.price + shopping_cart_total >= 20)
      button.show_free_shipping_icon();
    else
      button.hide_free_shipping_icon();
 }
}
```

```javascript=
function update_tax_dom() {
  set_tax_dom(shopping_cart_total * 0.10);
}
```

```javascript=
function calc_cart_total() {
  shopping_cart_total = 0;
    
  for(var i = 0; i < shopping_cart.length; i++) {
   var item = shopping_cart[i];
   shopping_cart_total += item.price;
   }
    
  set_cart_total_dom();
  update_shipping_icons();
  update_tax_dom()
}
```
## We need to make it more testable
#### The code contains **business rules** that are not easy to test
Every time the code changes, George has to write a test to do the following:
1. Set up a browser
2. Load a page
3. Click buttons to add items to the cart
4. Wait for the DOM to update
5. Scrape the value out of the DOM
6. Parse the string into a number
7. Compare it to the expected value

### In order to test it easily, complete these steps:
* Separate the business rules from the DOM updates.
* Get rid of those global variables!

## We need to make it more reusable
Can’t reuse for a few reasons:
* The code reads the shopping cart from a **global variable**, but they need to process orders from the database, not the variable
* The code writes **directly to the DOM**, but they need to print tax receipts and shipping labels

### Do these things to make it reusable:
* Don’t depend on **global variables**.
* Don’t assume the **answer goes in the DOM**.
* **Return the answer from the function**.

![](https://i.imgur.com/0JArsZT.png)

## Functions have inputs and outputs
![](https://i.imgur.com/961yjVZ.png)
Functional programmers call these implicit inputs and outputs side effects. They are not the main effect of the function (which is to calculate a return value).

* Separate business rules from DOM updates
  Because they aren’t part of the return value, they are implicit.
* Get rid of global variables
* Return the answer from the function

![](https://i.imgur.com/16Zc55A.png)
* Assigning a global variable is an output because data is leaving the function.
* Reading a global variable is an input because data is entering the function.

![](https://i.imgur.com/drYNVZR.png)
---
![](https://i.imgur.com/coipM1U.png)
* Copying a mutable value before you modify it is a way to implement immutability. It’s called copy-on-write. We’ll get into the details in chapter 6.
---
## Summary
* Functions that are actions will have implicit inputs and outputs.
* Calculations have no implicit inputs or outputs by definition.
* Shared variables (such as globals) are common implicit inputs and outputs.
* Implicit inputs can often be replaced by arguments.
* Implicit outputs can often be replaced by return values.
* As we apply functional principles, we’ll find the ratio of code in actions to code in calculations shifting toward calculations.