Download - Light Talk sobre JavaScript Funcional
![Page 1: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/1.jpg)
Programação Funcional em
JavaScript
![Page 2: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/2.jpg)
Sou Emanuel Gonçalves, estudante do curso de Sistemas de Informação,
Unigranrio – Caxias. Sou desenvolvedor Front-End, amo JavaScript e Tecnologias
Web.
![Page 3: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/3.jpg)
O que veremos?Conceitos básicos da programação funcional:
Functions First-Class e High Order;Compose e Curriyng;
Como fazer um código JavaScript nos moldes da PF?Map, Reduce, Filter, Every, Some;
![Page 4: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/4.jpg)
Que raios é PF?É um paradigma da Ciência da Computação que trata um código como um apanhado de funções matemáticas, em que os dados são imutáveis e não há mudança de estado no sistema.
![Page 5: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/5.jpg)
![Page 6: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/6.jpg)
Vamos aos princípios e conceitosComo eu programo em PF?
![Page 7: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/7.jpg)
Utilizando funções!
![Page 8: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/8.jpg)
![Page 9: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/9.jpg)
Mas quaisquer tipos de funções e de que qualquer forma?
![Page 10: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/10.jpg)
![Page 11: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/11.jpg)
var counter = 0;
function increment() { counter++; console.log(counter);}
increment(); // 1increment(); // 2
console.log(counter); // 2
![Page 12: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/12.jpg)
Dados imutáveisPerceba que no exemplo anterior, a variável counter é modificada a cada chamada de increment. Coisa chata de acontecer!
![Page 13: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/13.jpg)
Funções devem ser purasOlhe agora a diferença com PF
![Page 14: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/14.jpg)
var counter = 0;
function increment(counter) { return counter + 1;}
increment(counter); // 1increment(counter); // 1
console.log(counter); // 0
![Page 15: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/15.jpg)
E se eu passar como parâmetro um dado não numérico
![Page 16: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/16.jpg)
function increment(x) { x++; console.log(x);}
increment(“a”); // NaN
increment(true); // 2
increment(false); // 1
![Page 17: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/17.jpg)
É importante estabelecer um contrato!
![Page 18: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/18.jpg)
function rntNumber(x) { if (typeof x === “number”) return x; else throw new Error(“É necessário um número”);}
increment(rtnNumber(“a”)); // Errorincrement(rtnNumber(true)); // Errorincrement(rtnNumber(10)); // 11
![Page 19: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/19.jpg)
Sem laços de repetiçãoUse a recursividade
![Page 20: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/20.jpg)
function iterar(x) { if(x == 0) return console.log(x); else console.log(x); return iterar(x-1);}
iterar(5);543210
![Page 21: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/21.jpg)
Bases da PF para funções
![Page 22: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/22.jpg)
Funções devem:Retornar valores ou outras funções!!!Terem, ao menos, um parâmetro;
Dai derivam as:First-Class Functions; eHigh Order Functions
![Page 23: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/23.jpg)
First-Class Functions
![Page 24: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/24.jpg)
É toda função que pode ser:Passada para uma variável;Retornada de uma função;Passada como um parâmetro
![Page 25: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/25.jpg)
High Order Functions
![Page 26: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/26.jpg)
É toda função que:Recebe uma ou mais funções como parâmetro;Retorna uma outra função;
![Page 27: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/27.jpg)
Vamos a mais código?
![Page 28: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/28.jpg)
function somar(x, y) { return x + y;}
function multiplicar(x, y) { return x * y;}
function calcular(f, x, y) { return f(x, y);}
![Page 29: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/29.jpg)
var soma = somar(2, 2);console.log(soma) // 4
var multiplicacao = multiplicar(2, 2);console.log(multiplicação); // 4
// Ou você pode fazer assim, usando COMPOSEvar soma = calcular(soma, 2, 2); // 4 var multiplicacao = calcular(multiplicar, 2, 2); // 4
![Page 30: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/30.jpg)
Curriyng
![Page 31: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/31.jpg)
function add(x) { return function (y) { return x + y; }}
var addFive = add(5);addFive(10); // 15
var addTen = add (10);addTen(10); // 20
![Page 32: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/32.jpg)
Métodos de ArrayMap, filter, reduce, every, some
![Page 33: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/33.jpg)
var numBin = [1, 0, 1, 0, 1, 0] .reverse();
function isBin(x) { return x < 2 && x >= 0;}
// Usando o método everyvar isBinario = numBin.every(isBin);
![Page 34: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/34.jpg)
if(isBinario) { // Usando o método map var calculo = numBin.map(function(x, i) { return x * (Math.pow(2, i)); // O i é o índice do array });
// Usando o método reduce var calcFinal = calcFinal.reduce(function(x, y) { return x + y; });}
console.log(calcFinal); // 42
![Page 35: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/35.jpg)
Método filterÉ usado quando você quer “filtrar” o seu array
var arrayNums = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var numsPares = arrayNums.filter(function(x){ return x % 2 == 0;});
console.log(numsPares); // [2, 4, 6, 8];
![Page 36: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/36.jpg)
Método someLogicamente falando, é o oposto do every, em que se apenas um elemento se encaixa na condição, ele retorna true
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
Var isPar = number.some(function(x){ return x % 2 == 0;});
console.log(isPar); // true
![Page 37: Light Talk sobre JavaScript Funcional](https://reader035.vdocuments.com.br/reader035/viewer/2022062901/58f2efdb1a28ab75108b45a1/html5/thumbnails/37.jpg)
Obrigado por sua atenção!!!!emanuelgdev.com.brgithub.com/emanuelgsouza