programação funcional com javascript

128

Upload: alexandre-gomes

Post on 26-Jan-2017

56 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Programação Funcional com Javascript
Page 2: Programação Funcional com Javascript

revisão

Page 3: Programação Funcional com Javascript

Object !

Page 4: Programação Funcional com Javascript

Object !

Prototipo de Object !

Page 5: Programação Funcional com Javascript

Object !

Prototipo de Object !

Object.prototype.pO = 1

Page 6: Programação Funcional com Javascript

Object !

Prototipo de Object !

pO = 1

Object.prototype.pO = 1

Page 7: Programação Funcional com Javascript

A !

a = 2

var A = function() { this.a = 2; }

Object !

Prototipo de Object !

pO = 1

Page 8: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

Object !

Prototipo de Object !

pO = 1

Page 9: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

A.prototype.pA = 3

Object !

Prototipo de Object !

pO = 1

Page 10: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

A.prototype.pA = 3

Object !

Prototipo de Object !

pO = 1

Page 11: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

var B = function() { this.b = 4; }

B !

b = 4

Page 12: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

Prototipo de B !

Page 13: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

Prototipo de B !

B.prototype = new A

Page 14: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

B.prototype = new A

Page 15: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

B.prototype = new A

Page 16: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

B.prototype = new A

new A() !a = 2

Page 17: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

B.prototype = new A

new A() !a = 2

Page 18: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

B.prototype.pB = 5

Page 19: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

B.prototype.pB = 5

Page 20: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

Page 21: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

x = new B()

Page 22: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

x = new B()x

new B()

!b = 4

Page 23: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

x = new B()x

new B()

!b = 4

Prototipo de B !

Page 24: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

x new B()

!b = 4

Prototipo de B !

Page 25: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

x.bx

new B()

!b = 4

Prototipo de B ! ?

Page 26: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

x new B()

!b = 4

Prototipo de B !

Page 27: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5 x.pBx

new B()

!b = 4

Prototipo de B !

?

Page 28: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

x new B()

!b = 4

Prototipo de B !

Page 29: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5 x.ax

new B()

!b = 4

Prototipo de B !

?

Page 30: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

x new B()

!b = 4

Prototipo de B !

Page 31: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

x.pA

x new B()

!b = 4

Prototipo de B !

?

Page 32: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

x new B()

!b = 4

Prototipo de B !

Page 33: Programação Funcional com Javascript

A !

a = 2

Prototipo de A !

pA = 3

Object !

Prototipo de Object

!pO = 1

B !

b = 4

new A() !a = 2

pB = 5

x.pO

x new B()

!b = 4

Prototipo de B !

?

Page 34: Programação Funcional com Javascript
Page 35: Programação Funcional com Javascript

function f (x) { return function (y) { return x + y; }; } var a = f(5); var b = a(3); alert(b); // ????

Page 36: Programação Funcional com Javascript

Javascript

Alexandre Gomes

princípios da programação funcional com

Page 37: Programação Funcional com Javascript

programação imperativa

1. Bata bem todos os ingredientes ( menos o fermento) da massa no liquidificador, aproximadamente 2 a 3 minutos

2. Acrescente o fermento e bata por mais uns 15 segundos

3. Coloque em uma fôrma redonda, u n t a d a c o m m a n t e i g a e polvilhada com farinha de trigo

4. Asse por cerca de 40 minutos em forno médio (180º graus), preaquecido

programação declarativa

Comunique assim que estiver pronto. Não deixe o bolo queimar. Não deixe que abram o forno antes da hora.

Page 38: Programação Funcional com Javascript

Buscar alunos com menos de 30 anos.

alunos = [{nome: “Rodrigo”, idade: 30}, {nome: “Patricia”, idade: 20}, {nome: “Marcos”, idade: 33}, {nome: “Ricardo”, idade: 28} ]

Page 39: Programação Funcional com Javascript

menores = [] !for (int i = 1; i <= 4; i++) { aluno = alunos[i]; if (aluno.idade < 30) { menores.add(aluno); } } !return menores;

alunos = [{nome: “Rodrigo”, idade: 30}, {nome: “Patricia”, idade: 20}, {nome: “Marcos”, idade: 33}, {nome: “Ricardo”, idade: 28} ]

Page 40: Programação Funcional com Javascript

menores = [] !for (int i = 1; i <= 4; i++) { aluno = alunos[i]; if (aluno.idade < 30) { menores.add(aluno); } } !return menores;

alunos = [{nome: “Rodrigo”, idade: 30}, {nome: “Patricia”, idade: 20}, {nome: “Marcos”, idade: 33}, {nome: “Ricardo”, idade: 28} ]

imperativa

Page 41: Programação Funcional com Javascript

alunos = [{nome: “Rodrigo”, idade: 30}, {nome: “Patricia”, idade: 20}, {nome: “Marcos”, idade: 33}, {nome: “Ricardo”, idade: 28} ]

Nome Idade1 Rodrigo 302 Patricia 203 Marcos 334 Ricardo 28

Page 42: Programação Funcional com Javascript

Nome Idade1 Rodrigo 302 Patricia 203 Marcos 334 Ricardo 28

SELECT * FROM alunos WHERE idade < 30

Page 43: Programação Funcional com Javascript

Nome Idade1 Rodrigo 302 Patricia 203 Marcos 334 Ricardo 28

SELECT * FROM alunos WHERE idade < 30

declarativ

a

Page 44: Programação Funcional com Javascript

menores = [] !for (int i = 1; i <= 4; i++) { aluno = alunos[i]; if (aluno.idade < 30) { menores.add(aluno); } } !return menores;

alunos = [{nome: “Rodrigo”, idade: 30}, {nome: “Patricia”, idade: 20}, {nome: “Marcos”, idade: 33}, {nome: “Ricardo”, idade: 28} ]

SELECT * FROM alunos WHERE idade < 30

Page 45: Programação Funcional com Javascript
Page 46: Programação Funcional com Javascript

var numbers = [1,2,3,4,5]

Page 47: Programação Funcional com Javascript

var numbers = [1,2,3,4,5] var doubled = [] !for(var i = 0; i < numbers.length; i++) { var newNumber = numbers[i] * 2 doubled.push(newNumber) } console.log(doubled) //=> [2,4,6,8,10]

Page 48: Programação Funcional com Javascript

var numbers = [1,2,3,4,5] var doubled = [] !for(var i = 0; i < numbers.length; i++) { var newNumber = numbers[i] * 2 doubled.push(newNumber) } console.log(doubled) //=> [2,4,6,8,10]

var numbers = [1,2,3,4,5] var doubled = numbers.map(function(n) { return n * 2 }) console.log(doubled) //=> [2,4,6,8,10]

Page 49: Programação Funcional com Javascript

var numbers = [1,2,3,4,5]!!!!!!

Page 50: Programação Funcional com Javascript

var numbers = [1,2,3,4,5]!var total = 0!!for(var i = 0; i < numbers.length; i++) {! total += numbers[i]!}!console.log(total) //=> 15

Page 51: Programação Funcional com Javascript

var numbers = [1,2,3,4,5]!var total = 0!!for(var i = 0; i < numbers.length; i++) {! total += numbers[i]!}!console.log(total) //=> 15

var numbers = [1,2,3,4,5]!!var total = numbers.reduce(function(sum,n){! return sum + n!});!console.log(total) //=> 15

Page 52: Programação Funcional com Javascript

programação imperativa

1. HOW

programação declarativa

WHAT

Page 53: Programação Funcional com Javascript

SELECT * FROM alunos WHERE idade < 30

Page 54: Programação Funcional com Javascript

SELECT * FROM alunos WHERE idade < 30

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

Page 55: Programação Funcional com Javascript

SELECT * FROM alunos WHERE idade < 30

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

var total = [1,2,3].reduce(function(sum,n){! return sum + n!});

Page 56: Programação Funcional com Javascript
Page 57: Programação Funcional com Javascript

function f (x) { return function (y) { return x + y; }; } var a = f(5); var b = a(3); alert(b); // ????

Page 58: Programação Funcional com Javascript

first-classfunctions

Page 59: Programação Funcional com Javascript
Page 60: Programação Funcional com Javascript

higher-orderfunction

Page 61: Programação Funcional com Javascript
Page 62: Programação Funcional com Javascript
Page 63: Programação Funcional com Javascript
Page 64: Programação Funcional com Javascript
Page 65: Programação Funcional com Javascript
Page 66: Programação Funcional com Javascript
Page 67: Programação Funcional com Javascript
Page 68: Programação Funcional com Javascript

:closures:

Page 69: Programação Funcional com Javascript
Page 70: Programação Funcional com Javascript
Page 71: Programação Funcional com Javascript
Page 72: Programação Funcional com Javascript
Page 73: Programação Funcional com Javascript
Page 74: Programação Funcional com Javascript
Page 75: Programação Funcional com Javascript
Page 76: Programação Funcional com Javascript

a closure (...) is a function or reference to a function together with a referencing environment

http://en.wikipedia.org/wiki/Closure_(computer_science)

Page 77: Programação Funcional com Javascript
Page 78: Programação Funcional com Javascript
Page 79: Programação Funcional com Javascript
Page 80: Programação Funcional com Javascript

:closure:

Page 81: Programação Funcional com Javascript
Page 82: Programação Funcional com Javascript
Page 83: Programação Funcional com Javascript
Page 84: Programação Funcional com Javascript
Page 85: Programação Funcional com Javascript

Por quê?!

Page 86: Programação Funcional com Javascript
Page 87: Programação Funcional com Javascript
Page 88: Programação Funcional com Javascript
Page 89: Programação Funcional com Javascript

#comofas?!

Page 90: Programação Funcional com Javascript
Page 91: Programação Funcional com Javascript
Page 92: Programação Funcional com Javascript

a closure (...) is a function or reference to a function together with a referencing environment

Page 93: Programação Funcional com Javascript

closure = function + environment

Page 94: Programação Funcional com Javascript

closure = function + environment

Page 95: Programação Funcional com Javascript
Page 96: Programação Funcional com Javascript
Page 97: Programação Funcional com Javascript

(

Page 98: Programação Funcional com Javascript
Page 99: Programação Funcional com Javascript
Page 100: Programação Funcional com Javascript
Page 101: Programação Funcional com Javascript
Page 102: Programação Funcional com Javascript
Page 103: Programação Funcional com Javascript
Page 104: Programação Funcional com Javascript
Page 105: Programação Funcional com Javascript
Page 106: Programação Funcional com Javascript
Page 107: Programação Funcional com Javascript

=

=

=

Page 108: Programação Funcional com Javascript

)

Page 109: Programação Funcional com Javascript
Page 110: Programação Funcional com Javascript

closure = function + environment

Page 111: Programação Funcional com Javascript
Page 112: Programação Funcional com Javascript
Page 113: Programação Funcional com Javascript
Page 114: Programação Funcional com Javascript

...

Page 115: Programação Funcional com Javascript

E o Kiko?!

Page 116: Programação Funcional com Javascript
Page 117: Programação Funcional com Javascript
Page 118: Programação Funcional com Javascript
Page 119: Programação Funcional com Javascript
Page 120: Programação Funcional com Javascript
Page 121: Programação Funcional com Javascript
Page 122: Programação Funcional com Javascript

encapsulamento, que é bom....

Page 123: Programação Funcional com Javascript
Page 124: Programação Funcional com Javascript

>> “Alexandre Gomes”

>> undefined

>> undefined

Page 125: Programação Funcional com Javascript
Page 126: Programação Funcional com Javascript

Yahoo Javascript Module Pattern

Page 127: Programação Funcional com Javascript

P&Raprender.unb.br

Page 128: Programação Funcional com Javascript