patrones y

(buenas) prácticas
 1. Funciones 3. Asincronismo
a. Closures a. Hosting environment
b. Module pattern b. Event loop
c. AMD y RequireJS c. Callbacks
2. Objetos d. Promises
a. Tipos e. Q
b. Herencia prototípica 4. Underscore.JS
c. this
d. new
JS
 Funciones

Ciudadanos de primera clase

FUNCIONES
 Scopes

léxico dinámico
FUNCIONES
 Scopes

léxico
FUNCIONES
 Scopes
function() {

léxico }

function() {

function() {
función }

}
FUNCIONES
 Expresiones y declaraciones
function hacerAlgo() { ... }

Esto es una declaración.

Dónde queda declarado hacerAlgo?
Hoisting
FUNCIONES
 Expresiones y declaraciones
function hacerAlgo() { ... }

var hacerAlgo = function () { ... }

Esto es una declaración, una asignación y una expresión de función anónima

Dónde queda declarado hacerAlgo?
Puedo acceder a hacerAlgo desde la función?
FUNCIONES
 Expresiones y declaraciones
function hacerAlgo() { ... }

var hacerAlgo = function () { ... }

var hacerAlgo = function hacerAlgo () {

... }
FUNCIONES

Y ahora?
 Closures
 Se producen en los lenguajes con funciones de primera clase.

función entorno

 Asocia las ocurrencias de variables libres con la variable a la cual estaba

ligado el nombre en el momento en que se creó la clausura
FUNCIONES
 Closures

function sumarA(x) {

return function(y)
{
return x + y;
}

}
FUNCIONES
 Closures

var sumarA20 = sumarA(20);

FUNCIONES
 Closures

for (var i=1; i<=5; i++)

{
setTimeout(function (){
console.log( i );
}, i*1000 );
}
FUNCIONES

5 5 5 5 5
 Closures

for (var i=1; i<=5; i++)

{
(function(j){
setTimeout(function (){
console.log( j );
}, i*1000);
})(i);
}
FUNCIONES
 Closures

for (var i=1; i<=5; i++)

{
fn(i);
}

function(j){
setTimeout(function (){
console.log( j );
FUNCIONES

}, i*1000);
}
 Closures
function() {

function() {

function() {

}
FUNCIONES

}
 IIFE
IIFE
 Immediately Invoked Function Expression
(function hacerAlgo() {
...
})();

 Aísla el scope. Permite el encapsulamiento

 No protege contra las variables definidas globalmente (sin var)
IIFE
 Immediately Invoked Function Expression
(
function hacerAlgo() {
function
...
expression
}
)();
MODULE PATTERN
 Immediately Invoked Function Expression
(
function hacerAlgo() {
function
... scope
expression
}
)();
MODULE PATTERN
 Module pattern

closure
MODULE PATTERN
 Module pattern

function () {

};
MODULE PATTERN
 Module pattern

function () {
var metodoPrivado = function () { ...}
};
MODULE PATTERN
 Module pattern

function () {
var metodoPrivado = function () { ...}

return {
metodoPublico: function() { ... }
}
};
MODULE PATTERN
 Module pattern

var Modulo = function () {

var metodoPrivado = function () { ...}

return {
metodoPublico: function() { ... }
}
};
MODULE PATTERN
 Múltiples instancias

var Modulo = function () {

return { ... }
}

var a = Modulo();
var b = Modulo();
MODULE PATTERN

var c = Modulo();
 Múltiples instancias

var Modulo = function () {

return { ... }
}

var a = Modulo();
a.metodoPublico();
MODULE PATTERN
 Module pattern

IIFE closure
MODULE PATTERN
 Module pattern

(function () {

})();
MODULE PATTERN
 Singleton

var Modulo = (function () {

var metodoPrivado = function () { ... }

return {
metodoPublico: function() { ... }
}
})();
MODULE PATTERN

Modulo.metodoPublico();
 Construyendo la API

var Modulo = (function () {

var retorno = {};

var metodoPrivado = function () { ... }

retorno.metodoPublico = function() {
... }
MODULE PATTERN

return retorno;
})();
 Revealing

var Modulo = (function () {

var retorno = {
metodoPublico : metodoPublico
};

function metodoPublico = function() {

... }
MODULE PATTERN

return retorno;
})();
 Augmentation

var ModuloPlus = (function (Modulo) {

Modulo.otroMetodoPublico = function {
... }

return Modulo
MODULE PATTERN

})(Modulo || {});
 Mixins

var ModuloPlus = (function ($, _) {

})(jQuery, _);
MODULE PATTERN
MODULE PATTERN
AMD
 Asynchronous Module Definition

define(“modulo”, [“jquery”, “anotherDependency”],

function ($, dep) {

return function() {};

}
});
MODULE PATTERN
REQUIRE JS
 Require JS

define(“modulo”, [“require”],
function (require) {

var dep1 = require(“dep1”);

var dep2 = require(“dep2”);

return function() {};

}
});
REQUIRE JS
 Require JS

requirejs.config({
baseUrl: 'lib',
paths: {
app: '../app'
}
});

requirejs(['app/main']);
REQUIRE JS
 Require JS

define(function (require) {

var messages = require('./messages');

var print = require('print');

print(messages.getHello());

});
REQUIRE JS
{}
 Objetos
var obj = { ... }

var obj = new Object();

OBJETOS
 Tipos primitivos

string number boolean

null undefined object

No todo es un objeto!
OBJETOS
 Tipos primitivos

object
OBJETOS
 Tipos primitivos

object
function
OBJETOS
 Tipos primitivos

object
array function

Las funciones también tienen propiedades!

OBJETOS
 Y esto que son?

String Number Boolean

Object Function Array

Date RegExp Error

OBJETOS
 Y esto que son?
funciones

String Number Boolean

Object Function Array

Date RegExp Error

OBJETOS
 objetos vs otros tipos
var str = “Esto es un string”;
typeof str;
str instanceof String;

var strObj = new String(“Esto es un

string”);
typeof strObj;
strObj instanceof String;
OBJETOS
 Cohersion
str.length
str.charAt(3);

str.length
primitive string
OBJETOS
 Cohersion
str.length
str.charAt(3);

str.length
primitive string
object “String”
OBJETOS
 Formas literales y construidas

String string Boolean boolean

Number number

Error

Function RegExp Date

object
Array Object undefined
OBJETOS

null
 Propiedades
obj.identificador
obj[“identificador”]

obj[“Hola!”]

var otroObjeto = {};

obj[otroObjeto] === obj[“[object Object]”]
OBJETOS
 Arrays y objetos
var arr = [ "str", 42, "otroStr" ];
myArray.prop = "strProp";
myArray.length; // 3
myArray.prop; // "strProp"

var arr = [ "str", 42, "otroStr" ];

myArray["3"] = "strProp";
myArray.length; // 4
myArray[3]; // "strProp"
OBJETOS
 For … in
for(prop in obj){
console.log(“obj.” + prop + “ = “ + obj[prop]
}
OBJETOS
 this
 Runtime binding, depende del call-site
OBJETOS
 this
(default binding)
function hacerAlgo() {
return this;
}

hacerAlgo() === window; // true

OBJETOS
 this
(implicit binding)
var algo = {
prop: ‘val’,
fn: function() {return this;}
}

algo.fn() === algo; // true

OBJETOS
 this
(implicit binding)
var algo = {
prop: ‘val’,
}

algo.fn = function() {return this;}

algo.fn() === algo; // true;

OBJETOS
 this
(implicit binding)
var algo = {
otro : {
fn: function() {return this;}
}
}

algo.otro.fn() === algo.otro; // true;

OBJETOS
 this
(explicit binding)
var fn = function(a,b,c) {
console.log([a,b,c].join(“ “));
return this;
}

fn.apply(obj, [1,2,3]); // 1 2 3; obj

OBJETOS
 this
(explicit binding)
var fn = function(a,b,c) {
console.log([a,b,c].join(“ “));
return this;
}

fn.apply(obj, {a:1,b:2,c:3}); // 1 2 3;
obj
OBJETOS
 this
(explicit binding)
var fn = function(a,b,c) {
console.log([a,b,c].join(“ “));
return this;
}

fn.call(obj,1,2,3); // 1 2 3; obj
OBJETOS
 this
(explicit binding)
var fn = function(a,b,c) {
console.log([a,b,c].join(“ “));
return this;
}

fn2 = fn.bind(obj,1,2);
fn(3); // 1 2 3; obj
OBJETOS
 this
1. En el caso del operador new, refiere al objeto creado
(new binding)
2. Si es llamada utilizando call o apply, el objeto empleado
en el primer parametro de la llamada
(explicit binding)
3. Si es una invocación al método apuntado por una
propiedad de un objeto, this refiere al objeto
(implicit binding)
4. Por defecto, es el objeto global
(default binding)
OBJETOS
 Herencia
Herencia clásica o tradicional

 Existen clases y objetos

 Las clases definen las cualidades de los objetos
 Las nuevas instancias de objetos son creadas a partir de una
función constructor
HERENCIA PROTOTÍPICA

Herencia prototípica

 No existen las clases

 Los objetos se construyen ex-nihilo (de la nada) o a partir de
otros objetos, llamados prototipos
 Herencia prototípica
Delegation o differential inheritance

 Este es la forma de herencia prototípica de JS

 Los objetos mantienen un enlace a sus prototipos
 Se delega el acceso a las propiedades de un objeto a través
de la cadena prototípica
 Un cambio en un prototipo se refleja en sus clones
HERENCIA PROTOTÍPICA

Cloning o concatenative inheritance

 Se clonan los objetos

 Las diferencias en un prototipo no son propagadas a sus
clones
 Herencia prototípica
Delegation o differential inheritance

 Se basa en que se tiende a pensar los objetos en base a las

diferencias a partir de otros
HERENCIA PROTOTÍPICA

Cloning o concatenative inheritance

 En una forma pura prototípica, luego de su creación, los

objetos divergen de sus prototipos de forma independiente,
siendo que los clones son copias exactas del prototipo y no
mantienen un link a estos
 Herencia prototípica en JS
 Los objetos tienen una referencia a otro objeto llamado
prototipo.
 Cuando se busca una propiedad en un objeto, se consulta al
objeto. Si este no la posee, se la busca recursivamente en el
prototipo. Si la propiedad no se encuentra, se devuelve
undefined.
 Cuando se setea una propiedad, se setea en el objeto, no en
el prototipo
HERENCIA PROTOTÍPICA
 Herencia prototípica en JS
HERENCIA PROTOTÍPICA
 Herencia prototípica
obj objPrototype
__proto__ __proto__
a 10 c 30
b 20 d 40
… …
HERENCIA PROTOTÍPICA

obj.a; // 10
obj.c; // 30
 Herencia prototípica
obj objPrototype
__proto__ __proto__
a 10 c 30
b 20 d 40
d 50 …
…
HERENCIA PROTOTÍPICA

obj.a; // 10 obj.d = 50;

obj.c; // 30 objPrototype.d; // 40
 Herencia prototípica
var a = {
x: 10,
calcular: function (z) { return this.x + this.y + z; }
};

var b = { y: 20, __proto__: a };

var c = { y: 30, __proto__: a };

HERENCIA PROTOTÍPICA

b.calcular(30); // 60
c.calcular(40); // 80
 Herencia prototípica
a
b
__proto__
__proto__
y 20
y 20

c
HERENCIA PROTOTÍPICA

__proto__
Object.prototype
y 30
__proto__ null
builtins
 new

Calculadora
__proto__
Calculadora = function() { ... }
prototype
otros
HERENCIA PROTOTÍPICA
 new Calculadora
__proto__
prototype
otros

Calculadora.prototype
__proto__
x 10 Calculadora.prototype.x = 10;
Calculadora.prototype.calcular = function() { ... }
constructor
calcular <fn>
HERENCIA PROTOTÍPICA
 new Calculadora
__proto__
b prototype
__proto__ otros
y 20
var b = new Calculadora();

Calculadora.prototype
__proto__
x 10
HERENCIA PROTOTÍPICA

constructor
calcular <fn>
 new Calculadora
__proto__
b prototype
__proto__ otros
y 20
var b = new Calculadora();
var c = new Calculadora();
Calculadora.prototype
__proto__
c x 10
HERENCIA PROTOTÍPICA

__proto__ constructor
y 20 calcular <fn>
 new Calculadora
__proto__
b prototype
__proto__ otros
Function.Prototype
y 20
__proto__
y 20
Calculadora.prototype
__proto__
c x 10
Object.Protype
HERENCIA PROTOTÍPICA

__proto__ constructor
__proto__ null
y 20 calcular <fn>
y 20

A estas funciones se les llama constructores. Pero son funciones comunes.

 new
constructor pattern
var author = new Person(“Arg1”, “Arg2”);

1. obj = {}
2. obj.__proto__ = Person.prototype
HERENCIA PROTOTÍPICA

3. return Person.call(obj, “arg1”, “arg2”) || obj

 Object.create
prototypal pattern
var algo = Object.create(otraCosa);

1. obj = {}
2. obj.__proto__ = otraCosa;
HERENCIA PROTOTÍPICA

3. return obj
 Propiedades y herencia prototípica

var padre = { prop1 : “propiedad”, prop2 : { subProp: 2 }

}
var hijo = Object.create(padre);

padre.prop1 = "padre";
padre.prop1 === hijo.prop1; // true
HERENCIA PROTOTÍPICA

hijo.prop1 = "hijo";
padre.prop1 !== hijo.prop1; // true
 Propiedades y herencia prototípica

var padre = { prop1 : “propiedad”, prop2 : { subProp: 2 }

}
var hijo = Object.create(padre);

hijo.prop2.subProp = 3;
padre.prop2.subProp === hijo.prop2.subProp; // true
HERENCIA PROTOTÍPICA
 Herencia

function Base(){ ... }

function Sub() {
Base.call(this);
...
}
HERENCIA PROTOTÍPICA

Sub.prototype = Object(Base.prototype);
Sub.prototype.otroMetodo = function() { ... }
 Herencia

Hijo.prototype.metodo = function() {
Base.prototype.metodo.call(this, ...);
...
}
HERENCIA PROTOTÍPICA
 instanceof

o1 instanceof o2

Aparece o2.prototype aparece en la cadena prototipica de o1

HERENCIA PROTOTÍPICA
 isPrototypeOf

o2.isPrototypeOf(o2)

Aparece o2 aparece en la cadena prototipica de o1

HERENCIA PROTOTÍPICA
 Object.getPrototypeOf

Object.getPrototypeOf(o)

Devuelve el prototipo de o
HERENCIA PROTOTÍPICA

o.__proto__

Es una propiedad interna

 Hosting environment

Explorer

JS
ASYNC
 Hosting environment

NodeJS

JS
ASYNC
 Event Loop
Message Queue

hacerAlgo Call stack

clickBoton
ASYNC
 Event Loop
Message Queue

clickBoton Call stack

hacerAlgo
ASYNC
 Event Loop
Message Queue

clickBoton Call stack

hacerAlgo
esperarEjecucion
ASYNC
 Event Loop
Message Queue

clickBoton Call stack

hacerAlgo
esperarEjecucion
setTimeout
ASYNC
 Event Loop
Message Queue

clickBoton Call stack

hacerAlgo
esperarEjecucion
ASYNC
 Event Loop
Message Queue

clickBoton Call stack

hacerAlgo
ASYNC
 Event Loop
Message Queue

clickBoton Call stack

ASYNC
 Event Loop
Message Queue

Call stack

clickBoton
ASYNC
 Event Loop
Message Queue

ejecucionTimeout Call stack

clickBoton
ASYNC
 Event Loop
Message Queue

ejecucionTimeout Call stack

clickBoton clickBoton
ASYNC
 Callbacks

descargarDesdeUrl(‘www.urudata.com’);
ASYNC
 Callbacks

descargarDesdeUrl(‘www.urudata.com’, descargaTerminada);

function descargaTerminada(data) { ... }

ASYNC
 Composición de callbacks

descargarDesdeUrl(‘www.urudata.com’, descargaTerminada);

function descargaTerminada(data) {

obtenerMetadata(data.metadataUrl, metadataObtenida);

function metadataObtenida() { ... }

ASYNC

La composición no es uniforme
 Manejo de errores en callbacks

descargarDesdeUrl(‘www.urudata.com’, descargaTerminada);

function descargaTerminada(data) {

if(data.errors.length > 0)
throw new Error(“Error!”);

obtenerMetadata(data.metadataUrl, metadataObtenida);

}
ASYNC

Quién los maneja?

 Callbacks vs Promises
Callbacks
- Yo te llamo cuando termine
Promises
- Te prometo X. Hacé lo que quieras con la promesa

Algunos dicen que los callbacks son imperativos y las

promesas son funcionales
ASYNC
 Promises
- Las promesas representan un valor futuro
- Una promesa puede cumplirse o rechazarse
- Cuando se rechazan o aceptan se le puede pasar un
valor
- Muchas librerías soportan además notificaciones
ASYNC
 Promises
- Las promesas proveen una abstracción para
representar el estado de una llamada asíncrona e
implementar control de flujo basado en ese estado
ASYNC
 Promises
- Las promesas proveen una abstracción para representar el estado
de una llamada asíncrona e implementar control de
flujo basado en ese estado
ASYNC
 - Es una de las librerías más populares y completas
- Puede intercambiar promesas con jQuery, Dojo, When.js, WinJS y
otros
Q
 Promises
Composición
var descarga = descargarDesdeUrl(‘www.urudata.com’);

descarga.then(function() { ... }).

then(function() { ... });

Manejo de errores
var descarga = descargarDesdeUrl(‘www.urudata.com’);

descarga.then(function() { ... }, manejarError).

then(function() { ... }, manejarError);
Q
 Promises

var promesaSalida = promesaEntrada

.then(handlerSuccess, handlerError);
Q
 Promises

var promesaSalida = promesaEntrada

.then(function(input){
...
}), function(reason) {
...
});

- Si se devuelve un valor en un handler, la promesa se resuelve con ese

valor.
- Si se lanza un error, la promesa es rechazada
- Si se devuelve una promesa, ese es el valor que toma promesaSalida
Q
 Promises

var promesaSalida = promesaEntrada

.then(null, function(reason) {
...
});
Q
 Promises

var promesaSalida = promesaEntrada

.fail(function(reason) {
...
});
Q
 Promises

var promesaSalida = promesaEntrada

.fin(function() {
...
});
Q
 Promises

var promesaSalida = promesaEntrada

.then(function(valor) {
return otraPromesa
}).then(function (otroValor) {
...
});
Q
 Promises

var promesaSalida = promesaEntrada

.then(function(valor) {
return otraPromesa
.then(function (otroValor) { ... });
});

- El retorno de la promesa nesteada no entra en la cadena de retornos.

- En cambio, valor y otroValor quedan ambos disponibles en la
clausura de la función nesteada
Q
 Promises

var combinacion = Q.all([promesaA, promesaB]);

- La promesa se acepta con un array con el valor de cada uno de los

valores de aceptación de los promesas
- En caso de un rechazo, el valor de rechazo es de la primera promesa
rechazada
Q
 Promises

var combinacion = Q.spread([promesaA, promesaB],

function(valorA, valorB){ ... });

return getUsername()
.then(function (username) {
return [username, getUser(username)];
})
.spread(function (username, user) {
...
});

- Spread realiza un .all internamente

Q
 Promises

var promesa = Q.any(promesas)

var promesa = Q.allSettled(promesas)

var promesa = promesaAnterior.done()

Q
 Promises

var funcs = [foo, bar, baz, qux];

var result = Q(initialVal);

funcs.forEach(function (f) {
result = result.then(f);
});

return result;
Q
 Promises

return funcs.reduce(
function (soFar, f) {
return soFar.then(f);
}, Q(initialVal));

return funcs.reduce(Q.when, Q(initialVal));

Q
 Promises

return fn.then(success, error, progress);

Q
 De dónde vienen las promesas?

Q.fcall(function(x, y) { return x + y; }, 10, 20);

Q.fcall(function() { throw “Error”; });

Q.delay(1000);

Q.timeout(promesa, 1000);

Q.promise(function(resolve,reject,notify){ ... })
Q
 De dónde vienen las promesas?

Q.when(valueOrPromise, function(value){ ... },

function(value){ ... })

Q.when($.get(...));

Q($.ajax(...)).then(function() {...});
Q
 Deferreds

var q = Q.defer();

FS.readFile("foo.txt", "utf-8", function (error, text) {

if (error) {
deferred.reject(new Error(error));
} else {
deferred.resolve(text);
}
});

return deferred.promise;
Q
 Deferreds

Deferred

Promise
Q
 Deferreds

Deferred

Promise

.resolve .then
.reject
.notify
Q
 Deferreds
Deferred
Promise
Pendings

.then(fn)
Q
 Deferreds
Deferred
Promise
Pendings result = defer();

.then(fn)
Q
 Deferreds
Deferred
Promise
Pendings result = defer();

callback = function(val) {
result.resolve(fn(val))
} .then(fn)
Q
 Deferreds
Deferred
Promise
Pendings result = defer();
callback callback = function(val) {
result.resolve(fn(val))
} .then(fn)
Q
 Deferreds
Deferred

Pendings
callback
Q
 Deferreds
Deferred

Pendings .resolve(value)
callback
Q
 Deferreds
Deferred

Pendings .resolve(value)
callback promise_value = ref(value)
Q
 Deferreds
Deferred

Pendings .resolve(value)

promise_value = ref(value)

callback
Q
 Deferreds
Deferred

Pendings .resolve(value)

promise_value = ref(value)

value.then(callback(promise_value))
Q
 Deferreds
Deferred

Pendings .resolve(value)

promise_value = ref(value)

value.then(function(val) {
result.resolve(fn(val))
}) (promise_value));
Q
 Promises
- Existen otras librerias como Q, RSVP, ES6, jQuery
- Q es compatible con las promesas de jQuery y otras libererías then-
able
Q
 - Es una colección de helpers
- Responde a la pregunta “¿Qué necesito para empezar a ser
productivo inmediatamente?”
- Muchos de sus métodos responden a un enfoque funcional
UNDERSCORE.JS
 Underscore.js

_.each(lista, iterador)
UNDERSCORE.JS
 Underscore.js

_.each([1,2,3], alert)
UNDERSCORE.JS
 Underscore.js

_.each({uno: 1, dos: 2, tres: 3}, alert)

UNDERSCORE.JS
 Underscore.js

_.each({uno: 1, dos: 2, tres: 3}, alert)

_.map(lista, iterador)
UNDERSCORE.JS
 Underscore.js

_.each({uno: 1, dos: 2, tres: 3}, alert)

_.map([1,2,3], function(n){ return n * n})

UNDERSCORE.JS
 Underscore.js

_.each({uno: 1, dos: 2, tres: 3}, alert)

_.map({uno: 1, dos: 2, tres: 3},

function(v,k){ return k + “ = “ + v; })
UNDERSCORE.JS
 Underscore.js

_.each({uno: 1, dos: 2, tres: 3}, alert)

_.map({uno: 1, dos: 2, tres: 3},

function(v,k){ return k + “ = “ + v; })

_.reduce(lista, iterador, memo)

UNDERSCORE.JS
 Underscore.js

_.each({uno: 1, dos: 2, tres: 3}, alert)

_.map({uno: 1, dos: 2, tres: 3},

function(v,k){ return k + “ = “ + v; })

_.reduce([1,2,3], function(memo,numero){ memo + numero },

memo)
UNDERSCORE.JS
 Underscore.js

_.each({uno: 1, dos: 2, tres: 3}, alert)

_.map({uno: 1, dos: 2, tres: 3},

function(v,k){ return k + “ = “ + v; })

_.reduce([1,2,3], function(memo,numero){ memo + numero },

memo)
UNDERSCORE.JS

_.find(lista, predicado)
 Underscore.js

_.each({uno: 1, dos: 2, tres: 3}, alert)

_.map({uno: 1, dos: 2, tres: 3},

function(v,k){ return k + “ = “ + v; })

_.reduce([1,2,3],
function(memo,numero){ return memo + numero }, 0)
UNDERSCORE.JS

_.find([0,1,2,4], function(n) { return n % 2 == 0; })

 Underscore.js

_.filter(lista, predicado)
UNDERSCORE.JS
 Underscore.js

_.filter([0,1,2,4], function(n) { return n % 2 == 0; })

UNDERSCORE.JS
 Underscore.js

_.filter([0,1,2,4], function(n) { return n % 2 == 0; })

_.where(lista, propiedades)
UNDERSCORE.JS
 Underscore.js

_.filter([0,1,2,4], function(n) { return n % 2 == 0; })

_.where(obras, {shakespeare: ‘Shakespeare’,ano: 1611})

_.sortBy(lista, iterador)
UNDERSCORE.JS
 Underscore.js

_.filter([0,1,2,4], function(n) { return n % 2 == 0; })

_.where(obras, {shakespeare: ‘Shakespeare’,ano: 1611})

_.sortBy([1,2,3,4,5], function(n){ return Math.sin(n)})

UNDERSCORE.JS
 Underscore.js

_.filter([0,1,2,4], function(n) { return n % 2 == 0; })

_.where(obras, {shakespeare: ‘Shakespeare’,ano: 1611})

_.sortBy([{nombre: ‘Juan’, edad: 12},

{nombre: ‘Pedro’, edad: 32}], ‘edad’)
UNDERSCORE.JS
 Underscore.js

_.filter([0,1,2,4], function(n) { return n % 2 == 0; })

_.where(obras, {shakespeare: ‘Shakespeare’,ano: 1611})

_.sortBy([{nombre: ‘Juan’, edad: 12},

{nombre: ‘Pedro’, edad: 32}], ‘edad’)

_.groupBy(lista, iterador)
UNDERSCORE.JS
 Underscore.js

_.filter([0,1,2,4], function(n) { return n % 2 == 0; })

_.where(obras, {shakespeare: ‘Shakespeare’,ano: 1611})

_.sortBy([{nombre: ‘Juan’, edad: 12},

{nombre: ‘Pedro’, edad: 32}], ‘edad’)

_.groupBy([{nombre: ‘Juan’, sexo: ‘M’}, {nombre: ‘Pedro’,

UNDERSCORE.JS

sexo:‘M’}, {nombre: ‘Mariana’, sexo: ‘F’}],

‘sexo’)
 Underscore.js

_.first(arr)

_.last(arr)

_.compact(arr)

_.flatten(arr)
UNDERSCORE.JS

_.uniq(arr)

_.zip(*arr)
 Underscore.js

_.object(arr)

_.memoize(fn, [hash])

_.delay(fn, wait)

_.throttle(fn, wait)
UNDERSCORE.JS

_.debounce(fn, wait)

_.once(fn)
 Underscore.js

_.keys(obj) _.reject(lista,predicado)

_.values(obj) _.sortBy(lista, iterador)

_.mapObject(obj) _.sample(lista, [n])

_.some(lista, [predicado])
UNDERSCORE.JS

_.every(lista,
[predicado])
_.max(lista, [iterador])
 Underscore.js

_.iteratee()

_.iteratee(function(item) { ... })

_.iteratee({ nombre : valor})

_.iteratee(‘propiedad’)
UNDERSCORE.JS

_.matcher({ nombre : valor})

 Underscore.js
chaining

_.chain(lista)
.map(fn)
.flatten()
.compact()
.sortBy(‘propiedad’)
.value()
UNDERSCORE.JS
 Underscore.js
OO-style

_.map(lista, function(v) { ... })

_(lista).map(function(v) { ... })
UNDERSCORE.JS
 Recorrimos mucho terreno rápidamente
 Vimos algunas características del lenguaje y como nos permiten
aplicar ciertos patrones
 Presentamos algunas librerías que resuelven problemas recurrentes o
mediante patrones y cambios de paradigma
 Existen muchas otras librerías que podríamos recorrer como D3.js o
React.js
 JS ya no es un lenguaje sólo web
 Los navegadores modernos son cada vez más capaces y ofrecen cada
vez mas herramientas
 Los frontends son cada vez más complejos y demandantes. Buen
diseño, buenos patrones y calidad son indispensables para desarrollar
soluciones escalables.
 Esto es posible, pero requiere entender JS como un lenguaje
diferente.
Gracias!