[TE] Functional thinking

name: title
class: left, top
background-image: url(https://danlebrero.com/images/blog/books/grokking-simplicity/grokking-simplicity.jpg)
background-size: cover

# .fancy[[TE] Functional thinking]

### Functional programming

.whiteinline[.left[Carlos Granell&#183; Universitat Jaume I]]

.whiteinline[.left[EI1039 - Diseño de Software &#183; Sep 2023]]

???

Image credits: [danlebrero.com](https://danlebrero.com/2021/09/15/grokking-simplicity-summary/)

[How Functional Programming Can Make You A Better Developer](https://www.youtube.com/watch?v=EqO4TcNLjl0)

[Book notes: Grokking Simplicity](https://danlebrero.com/2021/09/15/grokking-simplicity-summary/)

---
class: left

### Paradigmas de programación

>   .large[Abstrae entidades del mundo real en objetos]

>   .large[Organiza el acceso a los datos]

-   .large[<svg aria-hidden="true" role="img" viewBox="0 0 384 512" style="height:1em;width:0.75em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M297.2 248.9C311.6 228.3 320 203.2 320 176c0-70.7-57.3-128-128-128S64 105.3 64 176c0 27.2 8.4 52.3 22.8 72.9c3.7 5.3 8.1 11.3 12.8 17.7l0 0c12.9 17.7 28.3 38.9 39.8 59.8c10.4 19 15.7 38.8 18.3 57.5H109c-2.2-12-5.9-23.7-11.8-34.5c-9.9-18-22.2-34.9-34.5-51.8l0 0 0 0c-5.2-7.1-10.4-14.2-15.4-21.4C27.6 247.9 16 213.3 16 176C16 78.8 94.8 0 192 0s176 78.8 176 176c0 37.3-11.6 71.9-31.4 100.3c-5 7.2-10.2 14.3-15.4 21.4l0 0 0 0c-12.3 16.8-24.6 33.7-34.5 51.8c-5.9 10.8-9.6 22.5-11.8 34.5H226.4c2.6-18.7 7.9-38.6 18.3-57.5c11.5-20.9 26.9-42.1 39.8-59.8l0 0 0 0 0 0c4.7-6.4 9-12.4 12.7-17.7zM192 128c-26.5 0-48 21.5-48 48c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-44.2 35.8-80 80-80c8.8 0 16 7.2 16 16s-7.2 16-16 16zm0 384c-44.2 0-80-35.8-80-80V416H272v16c0 44.2-35.8 80-80 80z"/></svg> **encapsulación**: variables, objetos, clases...]

---
class: left

### Paradigmas de programación

.large[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> FUNCIONAL .small[<a name=cite-normand2021></a>[[Nor21](#bib-normand2021)]] ]

.large[Cada lenguaje de programación tiene funciones, entonces, ¿qué hace que un lenguaje de programación sea **funcional**?]

>   .large[Salidas solo dependen de las entradas]

>   .large[Sin efectos laterales! *No side  effects!*]

- Funcionan mejor si siguen **no side effects!**

???

Techniques are most effective when items can be processed independently, free of side effects, so they work better thanks to **no side effects**.

---
name: map-function
class: left

# `map` en R .small[<a name=cite-wickham2019></a><a name=cite-altman2021></a>[[Wic19](https://adv-r.hadley.nz/index.html); [ABW21](https://dcl-prog.stanford.edu/)]]

```r
# Cada vector es un planeta. 
# Elementos de cada vector representan el radio (km) de las lunas del planeta.
moons <-
  list(
    earth = 1737.1,
    mars = c(11.3, 6.2),
    neptune = 
      c(60.4, 81.4, 156, 174.8, 194, 34.8, 420, 2705.2, 340, 62, 44, 42, 40, 60)
  )
```

```r
length(moons)
## [1] 3
```

```r
length(moons$earth)
## [1] 1
length(moons$mars)
## [1] 2
length(moons$neptune)
## [1] 14
```

???

[https://dcl-prog.stanford.edu/purrr-basics.html](https://dcl-prog.stanford.edu/purrr-basics.html) from [Functional Programming](https://dcl-prog.stanford.edu/)

---
class: left

# `map` en R

???
`map()`, like all the map functions, takes a list/vector and a function as arguments.

---
class: left

# `map` en R

???

`map()` then applies that function to each element of the input list/vector.

---
class: left

# `map` en R

???
Applying the function to each element of the input list/vector results in one output element for each input element.

---
class: left

# `map` en R

???

`map()` then combines all these output elements into a list.

---
class: left

# `map` en R

.large[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> Aplicamos la función `length()` a cada elemento de la lista de entrada `moons`]

---
class: left

# `map` en R

.large[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> Cada invocación de `length()` produce un entero, luego el resultado es una lista de enteros]

---
class: left

# `map` en R

```r
map(moons, length)
## $earth
## [1] 1
## 
## $mars
## [1] 2
## 
## $neptune
## [1] 14
```

---
class: left

# `map` en R

.panelset.sideways[

.panel[.panel-name[`sort()`]

```r
sort(moons$neptune)
##  [1]   34.8   40.0   42.0   44.0   60.0   60.4   62.0   81.4  156.0  174.8
## [11]  194.0  340.0  420.0 2705.2
```
]

.panel[.panel-name[`map()` + `sort`]

```r
map(moons, sort)
## $earth
## [1] 1737.1
## 
## $mars
## [1]  6.2 11.3
## 
## $neptune
##  [1]   34.8   40.0   42.0   44.0   60.0   60.4   62.0   81.4  156.0  174.8
## [11]  194.0  340.0  420.0 2705.2
```
]

.panel[.panel-name[`sort(decreasing)`]

```r
sort(moons$neptune, decreasing = TRUE)
##  [1] 2705.2  420.0  340.0  194.0  174.8  156.0   81.4   62.0   60.4   60.0
## [11]   44.0   42.0   40.0   34.8
```
]

.panel[.panel-name[`map()` + `sort` + `decreasing`]

```r
map(moons, sort, decreasing = TRUE)
## $earth
## [1] 1737.1
## 
## $mars
## [1] 11.3  6.2
## 
## $neptune
##  [1] 2705.2  420.0  340.0  194.0  174.8  156.0   81.4   62.0   60.4   60.0
## [11]   44.0   42.0   40.0   34.8
```
]

]

---
class: left

# `map` en R

.large[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> Argumentos extra a `map()` se pasan automáticamente a la función]

???
Any arguments that come after `f` in the call to `map()` are inserted after the data in individual calls to `f()`.

[Source](https://adv-r.hadley.nz/functionals.html)

---
class: left

# `map` en R

.large[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> Argumentos extra a `map()` se pasan automáticamente a la función]

???

It’s important to note that these these arguments are not decomposed; or said another way, `map()` is only vectorised over its first argument. If an argument after `f` is a vector, it will be passed along as is.

[Source](https://adv-r.hadley.nz/functionals.html)

---
class: inverse, center, middle

# ¿Por qué son tan eficcientes estas funciones (`map()`, etc.)?

---
class: inverse, center, middle

# .cold[Sin efectos laterales!]

# .cold[*No side  effects!*]

---
class: inverse, center, middle

# .cold[El principio de la programación funcional es...]

---
class: inverse, center, middle

# .cold[...saber diferenciar entre ACCIONES y CÁLCULOS]

> .right[.large[.fancy["El código siempre se organiza en acciones, cálculos y datos"]]]

.right[*cualquier programador funcional*]

---
class: center, middle

# Si comprendes esta idea en PF para gestionar los efectos laterales, la podrás aplicar a CUALQUIER lenguaje de programación

---
class: inverse, center, middle

# Acciones, cálculos y datos

---
background-image: url(https://drek4537l1klr.cloudfront.net/normand/Figures/f0006-01.jpg)
background-size: contain

???
Image credits: [https://livebook.manning.com/book/grokking-simplicity/chapter-1/1](https://livebook.manning.com/book/grokking-simplicity/chapter-1/1)

---
background-image: url(https://drek4537l1klr.cloudfront.net/normand/Figures/f0007-01.jpg)
background-size: contain

???
Image credits: [https://livebook.manning.com/book/grokking-simplicity/chapter-1/1](https://livebook.manning.com/book/grokking-simplicity/chapter-1/1)

---
background-image: url(https://drek4537l1klr.cloudfront.net/normand/Figures/f0008-01.jpg)
background-size: contain

???
Image credits: [https://livebook.manning.com/book/grokking-simplicity/chapter-1/1](https://livebook.manning.com/book/grokking-simplicity/chapter-1/1)

---
name: actions
class: middle

# .coldinline[Acciones]

> .large[Dependen de cuántas veces o cuándo se ejecutan]

## También conocidas como...

> .large[Funciones con efectos laterales, funciones impuras]

## Ejemplos

> .large[Enviar un correo, leer de una base de datos]

???

Si envío un correo electrónico urgente hoy, es muy diferente a enviarlo la próxima semana. Y enviar el mismo correo electrónico 10 veces es diferente de enviarlo 1 vez o ninguna.]

---
name: calculations
class: middle

# .coldinline[Cálculos]

> .large[Producen la misma salida dada la misma entrada. No dependen de cuándo ni cuántas veces se invocan]

## También conocidas como...

> .large[Funciones puras]

## Ejemplos

> .large[Comprobar si dirección email es correcta, concatenación de cadenas]

---
name: data
class: middle

# .coldinline[Datos]

> .large[Son hechos sobre algo. Inertes, no son ejectables]

> .large[Deben interpretarse para ser útiles]

## También conocidas como...

> .large[Hechos]

## Ejemplos

> .large[Dirección de correo de un usuario, la ubicación devuelta por un servicio de geocoding, lugares de origen y destino]

???

Ejemplo: el recibo de un restaurante: el gerente del restaurante puede usarlo para determinar qué alimentos son populares. Y el cliente lo puede utilizar para realizar un seguimiento de su presupuesto para salir a cenar.

---
class: inverse, center, middle

## .cold[En PF, se prefieren los datos a los cálculos y los cálculos a las acciones]

---
class: inverse, center, middle

# Extraer cálculos de acciones

---
background-image: url(https://drek4537l1klr.cloudfront.net/normand/Figures/f0062-01.jpg)
background-size: contain

# Megamart.com

---
# Megamart.com

```javascript
var shopping_cart = [];
var shopping_cart_total = 0;
```

```javascript
function add_item_to_cart(name, price) {

shopping_cart.push({
    name: name,
    price: price
    });
  calc_cart_total();
}
```

```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(); /* lo vemos luego */
  update_tax_dom();        /* lo vemos luego */
}
```

---
background-image: url(https://drek4537l1klr.cloudfront.net/normand/Figures/f0063-01.jpg)
background-size: contain
# Megamart.com

---
# Megamart.com

```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);
}
```

---
# Todo el código anterior son acciones

.panelset.sideways[

.panel[.panel-name[`variables`]

### Acción: var globales son mutables

```javascript
var shopping_cart = [];
var shopping_cart_total = 0;
```
]

.panel[.panel-name[`add_item_to_cart`]

### Acción: modifica var globales

```javascript
function add_item_to_cart(name, price) {
  shopping_cart.push({
    name: name,
    price: price
  });
  calc_cart_total();
}
```

]

.panel[.panel-name[`update_shipping_icons`]

### Acción: lee del DOM; modifica el DOM

```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();
  }
}
```

]

.panel[.panel-name[`update_tax_dom`]

### Acción: modifica el DOM

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

.panel[.panel-name[`calc_cart_total`]

### Acción: modifica var global

---
class: center, middle

# ¿Es código testeable y reutizable?

---
# Extraemos cálculos de acciones

.panelset.sideways[

.panel[.panel-name[`Original`]

### `calc_cart_total()`

```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();
}
```
]

.panel[.panel-name[Paso 1]

### Aislar código que *calcula* en nueva función

```javascript
function calc_cart_total() {
* calc_total();
  set_cart_total_dom();
  update_shipping_icons();
  update_tax_dom();
}

*function calc_total() {
* shopping_cart_total = 0;
* for(var i = 0; i < shopping_cart.length; i++) {
*   var item = shopping_cart[i];
*   shopping_cart_total += item.price;
* }
*} 
```

]

.panel[.panel-name[Paso 2]

### Identificar inputs/outputs *explícitos y implícitos*

```javascript
function calc_cart_total() {
  calc_total();
  set_cart_total_dom();
  update_shipping_icons();
  update_tax_dom();
}

function calc_total() {  
* shopping_cart_total = 0; # Output implícito
* for(var i = 0; i < shopping_cart.length; i++) { # Input implícito
*   var item = shopping_cart[i]; # Input implícito
*   shopping_cart_total += item.price; # Output implícito
  }
}  
```

]

.panel[.panel-name[Paso 3]

### Convertir outputs *implícitos* en *explícitos*

```javascript
function calc_cart_total() {
* shopping_cart_total = calc_total();
  set_cart_total_dom();
  update_shipping_icons();
  update_tax_dom();
}

function calc_total() {  
* var total = 0; # Output explícito
  for(var i = 0; i < shopping_cart.length; i++) { # Input implícito
    var item = shopping_cart[i]; # Input implícito
*   total += item.price; # Output explícito
  }
* return total; # Output explícito
}  
```

]

.panel[.panel-name[Paso 4]

### Convertir inputs *implícitos* en *explícitos*

```javascript
function calc_cart_total() {
* shopping_cart_total = calc_total(shopping_cart);
  set_cart_total_dom();
  update_shipping_icons();
  update_tax_dom();
}

*function calc_total(cart) {  # Input explícito
  var total = 0; # Output explícito 
* for(var i = 0; i < cart.length; i++) { # Input explícito
*   var item = cart[i]; # Input explícito
    total += item.price; # Output explícito 
  }
  return total; # Output explícito
}  
```

]

.panel[.panel-name[Fin]

### `calc_total()` ya es un cálculo!

```javascript
function calc_cart_total() {
  shopping_cart_total = calc_total(shopping_cart); 
  set_cart_total_dom();
  update_shipping_icons();
  update_tax_dom();
}

*function calc_total(cart) {
  var total = 0; 
  for(var i = 0; i < cart.length; i++) {
    var item = cart[i]; 
    total += item.price; 
  }
  return total; 
}  
```
]

]

---
class: left

### Resumen: extracción de cálculos a partir de acciones

.large[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> Funciones que son acciones tienen inputs y/o /outputs implícitos]

.large[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> Inputs implícitos se pueden reemplazar por argumentos de entrada]

.large[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> Outputs implícitos se pueden reemplazar por valores de salida]

---

### Resumen

-   .large[lecturas de datos mutables son acciones]
-   .large[lecturas de datos inmutables son cálculos]

.large[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM281 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L136 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l182.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L393 239c9.4 9.4 9.4 24.6 0 33.9L281 385z"/></svg> Java, JS, Python, R... no son lenguajes funcionales puros, pero adoptan ideas de la programación funcional. .coldinline[**¡Piensa funcional!**]]

.large[<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg> La función `f` para un `map(x,f)`: ¿Acción o cálculo?]

---
# Referencias

<a name=bib-wickham2019></a>[Wickham, Hadley](#cite-wickham2019)
(2019). _Advanced R_. ISBN: 978-0815384571. URL:
[https://adv-r.hadley.nz/index.html](https://adv-r.hadley.nz/index.html).

<a name=bib-altman2021></a>[Altman, Sara, Bill Behrman, et
al.](#cite-altman2021) (2021). _Functional Programming_. URL:
[https://dcl-prog.stanford.edu/](https://dcl-prog.stanford.edu/).

<a name=bib-normand2021></a>[Normand, Eric](#cite-normand2021) (2021).
_Grokking Simplicity: Taming complex software with functional
thinking_. ISBN: 978-1617296208.