Functional Javascript

FP feats JS

by Santi Barchetta / @dudesl

TGIF 12/06/2015 Example Code Live presentation

What Is Functional Programming?

What Is Functional Programming?

TL;DR

"...es un paradigma de programación declarativa basado en la utilización de funciones aritméticas que no maneja datos mutables o de estado. Enfatiza la aplicación de funciones, en contraste con el estilo de programación imperativa, que enfatiza los cambios de estado”

Wikipedia

#Inmutabilidad

What Is Functional Programming?

"...is the use of functions that transform values into units of abstraction, subsequently used to build software systems”

Functional JavaScript, Michael Fogus, 2013

#Transformación

What Is Functional Programming?

"...produces abstraction through clever ways of combining functions.”

Eloquent Javascript

What Is Functional Programming?

¿Como la FP produce abstracción?

Aprovechando el uso de funciones de primera clase (first class functions) y funciones de orden superior (higher-order functions).

...y, sobre todo, evitando el scope global.

Para programar funcionalmente

necesitas un lenguaje funcional.

  • FP debe ser facilitado por el lenguaje.
  • Algunos lenguajes son estrictamente funcionales - Haskell
  • Algunos lenguajes son funcionales, sin un forzado estricto. - Scala

First Class Functions

Las funciones de primera clase son valores, y pueden ser usadas de igual forma que cualquier expresión típica.

First Class Functions

Pueden ser asignadas a variables

             

var foo = function(){ 
    return 'hai' 
};

foo(); // "hai"

First Class Functions

Pueden ser retornadas por otras funciones

var bar = function() {
    return function() {
        return 'foo'
    };
};

bar(); // function () {return 'foo'}

First Class Functions

Pueden ser pasadas como argumentos a otras funciones.


		var baz = function(func) {
			return func();
		};

		baz(function() {return 'foo'}) // "foo"
		          

Higher-Order Functions

Podemos usar funciones como parametros y/o retornar una función


		var bar = function(func) {
		        return function() {
		          return func();
		        };
		      };

		bar(function() {return 'foo'})() // "foo"
		          

Pure Functions


		function power(base, exponent) {
		  var result = 1;
		  for (var count = 0; count < exponent; count++)
		    result *= base;
		  return result;
		}

		show(power(2, 10));
		          
they always return the same value when given the same arguments, and never have side effects. Eloquent Javascript

Why Functionally Program with JavaScript?

La FP es una característica de JS

  • JS tiene first class functions (y funciones anónimas)
  • JS tiene higher-order functions
  • JS tiene CLOSURES!

Functional JS hace que tus scripts sean mejores.

  • Alienta a unidades de código mas pequeñas.
  • Es DRY (do not repeat yourself)
  • Más semántico, mas declarativo.
  • Es facil de leer y razonar.

Conceptos de FP en muchos lenguajes

Es mas bien un estilo, no una sintaxis particular

  • Haskell
  • Erlang
  • Scala
  • Clojure
  • Uh... matemática

How, functional JavaScript?

Recapitulando

Vimos:

  • Algunos pilares de la FP:
    • Inmutabilidad
    • Transformación
    • First class functions

Stateless functions

Las funciones 'statetful' mutan de estado fuera de su propio scope. La FP lo evita.


		var number = 1; // No es FP

		var increment = function() {
			return number += 1;
		};

		increment(); // 2
		increment(); // 3
		increment(); // 4

							

							* Stephen Young [2]

Stateless Functions

Las funciones 'stateless' no mutan de estado fuera de su scope.


		var number = 1;

		var increment = function(n) {
				return n + 1;
		};

		increment(number); // 2
		increment(number); // 2
		increment(number); // 2
							

							* Stephen Young [2]

Stateless Functions

Las funciones 'stateless' nos permiten evitar efectos secundarios en nuestra apliación.



		var number = 2;
		var sideEffect = function(n) {
		  number = n * 3;
		  return number * n;
		};
		sideEffect(3);

							

							* Stephen Young [2]

Recursión para hacer looping

To understand recursion, you must understand recursion.

*Anonymous

Recursión para hacer looping

Funciones que se llaman a sí mismas


		var loop = function(n) {
			if (n > 9) {
				console.log(n);
				return;
			} else {
				console.log(n);
				loop(n + 1);
			}
		};

		loop(0);
							

							* Stephen Young [2]

Array.prototype#Methods

Applicative programming is a technique that allows a function to be applied to each element of a list

*Mary Simoni [3]

Array.prototype#Methods

Array.prototype.map()


		var squared = [1, 2, 3, 4, 5].map(function(el) {
			return Math.pow(el, 2);
		}); // [1, 4, 9, 16, 25]
							

Array.prototype#Methods

Array.prototype.filter()


		var even = [1, 2, 3, 4, 5].filter(function(el) {
			return el % 2 === 0;
		}); // [2, 4]
							

Array.prototype#Methods

Array.prototype.reduce()


		var sum = [1, 2, 3, 4, 5].reduce(function(memo, curr) {
			return memo + curr;
		}); // 15
									

Funciones predicados

Un predicado determina cuando algo es verdadero o falso.

Funciones predicados


		var isNull = function(obj) {
			return obj === null;
		};

		isNull(null) // true
							

Closures

Closures are functions that refer to independent (free) variables... the function defined in the closure "remembers" the environment in which it was created.

*Mozilla Developer Network[5]

Closures


		function stringCount(string) {
			return function(subString) {
				return string.match(new RegExp(subString, 'g')).length;
			};
		}

		var count = stringCount('sup sup sup');

		count('sup'); // 3
							

Closures

Memoise Pattern Editor
						

Curried functions

La "currificación" (Currying) o aplicación parcial, es la técnica de transformar una función con aridad n en otra función equivalente, de aridad 1.

Curried Functions



		var foo = function (x) {
		   return function (y) {
		     return function (z) {
		       return x + y + z;
		     }
		   }
		 }

		 var bar = foo(1) // partially applied function
		 bar(2)(3) // 6

							

Composición de funciones

It’s really that simple: Whenever you are chaining two or more functions together, you’re composing them

*Reginald Braithwaite [4]

Composición de funciones



		var compose = function(a, b) {
			return function (c) {
				return a(b(c));
			};
		};

		var addOne = function(number) { return number + 1 };
		var double = function(number) { return number * 2 };
		var addOneAndDouble = compose(double, addOne); // right to left

		addOneAndDouble(2); // 6

							

Y mas!

Third Party Libs

Underscore/Lo-Dash

var numbers = _.filter([1, 'foo', 3, 'bar', 5, 6], _.isNumber); // [1, 3, 5, 6] var evens = _.filter([1, 2, 3, 4, 5, 6], function(num) { return num % 2 == 0; }); // [2, 4, 6]

Ramda

var evens = ramda.filter(function(num){ return num % 2 === 0; }); evens([1, 2, 3, 4, 5, 6]); // [2, 4, 6]

Conceptos avanzados

Hay muchas cosas por saber de FP

  • Functors
  • Monads
  • Promises
  • Combinators

Vamos!

Hagamos mejor código

Made with Slides.com