O documento explora a programação funcional em JavaScript, destacando seu paradigma de evitar efeitos colaterais e promover a imutabilidade. Aborda a diferença entre programação imperativa e declarativa, enfatizando a importância de funções puras e de alta ordem. Conclui ressaltando como a programação funcional ajuda a controlar a complexidade e a estruturar código de forma mais previsível e compreensível.

1. PROGRAMAÇÃO
FUNCIONAL
EM
JAVASCRIPT

2. PROGRAMAÇÃO
FUNCIONAL
EM
JAVASCRIPT
COMO E POR QUÊ?

3. Sim, é minha única foto boa e eu uso ela pra tudo.
Estudante de Ciência da Computação apaixonado por
programação funcional e pesquisador independente
(do grego: de mentira) em linguagens de programação.
Não tenho muita coisa interessante pra falar de mim
mesmo então vou preencher o slide com lorem ipsum
dolor sit amet, consectetur adipiscing elit.
ARTHUR
XAVIER

4. — BRET VICTOR
“A tecnologia muda rápido, mas o modo
de pensar das pessoas muda devagar.”

5. THE FUTURE OF
PROGRAMMING
BRET VICTOR
youtu.be/8pTEmbeENF4
“Pode haver muita resistência a
novas formas de trabalho que
demandem que você desaprenda o
que já aprendeu e pense de forma
diferente.”

6. s : → ℤ = α ↦
0 se α = ε
x + s(β) se α = x • β
f : ℤ → ℕ = x ↦ |x|JEITO
ESTILO
PARADIGMAMINDSET

7. O QUE É
PROGRAMAR?

8. TRANSFORMAR
PROBLEMAPROBLEMAPROBLEMAPROBLEMAPROBLEMA

9. TRANSFORMAR
SOLUÇÃO

10. PROBLEMAPROBLEMAPROBLEMAPROBLEMAPROBLEMA
DECOMPOR

11. SOLUÇÃO
DECOMPOR

12. MINDSET

16. :(

17. λ?

18. PROGRAMAÇÃO
IMPERATIVA
PROGRAMAÇÃO
DECLARATIVA
VS.

19. // const values : Array<number>;
console.log(values.map(x => x*x));

20. // const values : Array<number>;
let squares = [];
for (let value of values) {
squares.push(value*value);
}
console.log(squares);

21. // const names : Array<string>;
let promises = [];
for (let name of names) {
promises.push(name);
}
Promise.all(promises);

22. // const names : Array<string>;
Promise.all(names.map(getUserByName));

23. // const userId : string;
const steps = [
removeUserComments,
removeUserPosts,
removeUserFriends,
removeUserData,
];
for (let step of steps) {
await step(userId);
}

24. // const userId : string;
// Promise.sequence = ps => Promise.reduce(ps, (_, p) => p);
const steps = [
removeUserComments,
removeUserPosts,
removeUserFriends,
removeUserData,
];
return Promise.sequence(steps.map(step => step(userId)));

25. // const userIds : Array<string>;
const steps = [
removeUserComments,
removeUserPosts,
removeUserFriends,
removeUserData,
];
for (let step of steps) {
const promises = userIds.map(userId => step(userId);
await Promise.all(promises);
}

26. // const userIds : Array<string>;
const steps = [
removeUserComments,
removeUserPosts,
removeUserFriends,
removeUserData,
];
const runStepOnUsers = step => Promise.all(userIds.map(step));
const allSteps = steps.map(runStepOnUsers);
return Promise.sequence(allSteps);

27. PROGRAMAÇÃO
IMPERATIVA
PROGRAMAÇÃO
DECLARATIVA
VS.

28. λ¿

29. — EU
“Paradigma de programação onde computações são
representadas por funções ou expressões puras,
evitando efeitos colaterais e dados mutáveis, e que
utiliza amplamente de composição de funções e
funções de primeira classe.”

30. ≠FUNÇÃO PROCEDIMENTO

31. X Y
x
f(x)
f : X → Y

32. FUNÇÃO (PURA)

33. — WIKIPEDIA
“Uma função ou expressão produz efeitos colaterais se ela
modifica algum estado fora de seu escopo ou realiza
alguma interação observável com as funções que a
chamaram ou com o mundo externo.”

34. function append(x) {
this.array.push(x);
}

35. function appendTo(array, x) {
array.push(x);
}

36. function appendTo(array, x) {
return [...array, x];
}

37. IMUTABILIDADE

38. function increment(counter) {
counter.value += 1;
}

39. function increment(counter) {
return {
...counter,
value: counter.value + 1,
};
}

40. EFEITOS COLATERAIS

41. function sumOfSquares(array) {
let result = 0;
for (let x of array) {
result += x*x;
}
console.log(result);
};

42. function onNotification(notification) {
const message = notification.getMessage();
NotificationManager.addNotification(message);
ObscureObject1.obscureMethod1(notification);
ObscureObject2.obscureMethod2(notification);
ObscureObject3.obscureMethod3(notification);
// ...
};

43. function sumOfSquares(array) {
let result = 0;
for (let x of array) {
result += x*x;
}
return result;
};
console.log(sumOfSquares([2, 3, 5]));

44. const square = x => x*x;
const add = (a, b) => a + b;
function sumOfSquares(array) {
return array.map(square).reduce(add, 0);
}
console.log(sumOfSquares([2, 3, 5]));

45. FUNÇÕES
PURAS
1 Fáceis de testar;
2 Fáceis de entender;
3 Componíveis;
4 Determinísticas.
Fáceis de testar;
Fáceis de entender;
Componíveis;
Determinísticas.

46. FUNÇÕES
PURAS
1 Fáceis de testar;
2 Fáceis de entender;
3 Componíveis;
4 Determinísticas.
Cacheáveis;
Portáveis;
Paralelizáveis;
Simples.

47. EFEITOS COLATERAIS?

48. EFEITOS!

49. DADOS
EFEITOS
EFEITOS
EFEITOS
EFEITOS

51. function* watchLoadMoreStarred() {
while (true) {
const {login} = yield take(actions.LOAD_MORE_STARRED);
yield fork(loadStarred, login, true);
}
}
function* loadStarred(login, loadMore) {
const starredByUser = yield select(getStarredByUser, login);
if (!starredByUser || loadMore)
yield call(fetchStarred, login, starredByUser.nextPageUrl);
}

52. function* watchLoadMoreStarred() {
while (true) {
const {login} = yield take(actions.LOAD_MORE_STARRED);
yield fork(loadStarred, login, true);
}
}
function* loadStarred(login, loadMore) {
const starredByUser = yield select(getStarredByUser, login);
if (!starredByUser || loadMore)
yield call(fetchStarred, login, starredByUser.nextPageUrl);
}

53. function* watchLoadMoreStarred() {
while (true) {
const {login} = yield take(actions.LOAD_MORE_STARRED);
yield fork(loadStarred, login, true);
}
}
function* loadStarred(login, loadMore) {
const starredByUser = yield select(getStarredByUser, login);
if (!starredByUser || loadMore)
yield call(fetchStarred, login, starredByUser.nextPageUrl);
}

54. function* watchLoadMoreStarred() {
while (true) {
const {login} = yield take(actions.LOAD_MORE_STARRED);
yield fork(loadStarred, login, true);
}
}
function* loadStarred(login, loadMore) {
const starredByUser = yield select(getStarredByUser, login);
if (!starredByUser || loadMore)
yield call(fetchStarred, login, starredByUser.nextPageUrl);
}

55. FUNÇÕES DE PRIMEIRA CLASSE

56. =FUNÇÃO VALOR

57. function* watchLoadMoreStarred() {
while (true) {
const {login} = yield take(actions.LOAD_MORE_STARRED);
yield fork(loadStarred, login, true);
}
}
function* loadStarred(login, loadMore) {
const starredByUser = yield select(getStarredByUser, login);
if (!starredByUser || loadMore)
yield call(fetchStarred, login, starredByUser.nextPageUrl);
}

58. FUNÇÕES DE ALTA ORDEMALTA

59. ABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃO

60. OTIMIZAÇÃO

61. ABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃO

62. mapfilter reduce

63. function buildElements(n, factory) {
return Array(n).fill(0)
.map(Math.random)
.map(factory);
}
appendToDom(10, x => <h2>{x}</h2>);

64. function buildElements(n, factory) {
return Array(n).fill(0)
.map(Math.random)
.map(factory);
}
appendToDom(10, h2);

65. function buildElements(n, factory) {
return Array(n).fill(0)
.map(Math.random)
.map(factory);
}
appendToDom(10, small);

66. λ!

67. function buildElements(n, factory) {
return Array(n).fill(0)
.map(() => factory(Math.random()));
}
appendToDom(10, h2);

68. function buildElements(n, factory) {
return Array(n).fill(0)
.map(compose(factory, Math.random));
}
appendToDom(10, h2);

69. λ!

70. DESIGN PATTERNS?

71. MATEMÁTICA!

72. function getUserAndFriends(id) {
return Promise.all([
getUserData({ id }),
getUserFriends({ id }),
])
.then([user, friends] => ({
...user,
friends,
});
}

73. function getFriendsOfFirstFriend(id) {
return getUserFriends({ id })
.then(friends => getUserData(friends[0]))
.then(getUserFriends);
}

74. function getAvatarURL(user) {
return Maybe(user)
.then(user => user.avatar)
.then(avatar => avatar.url);
}
getAvatarURL({ avatar: { url: 'barbaz' } });
// == Maybe('test')
getAvatarURL(null);
// == Maybe(null)
getAvatarURL({ name: 'foobar' });
// == Maybe(null)

75. function Do(m, f) {
const gen = f();
function doRec(v = undefined) {
const {value, done} = gen.next(v);
const valueM = value instanceof m ? value : m.of(value);
return done ? valueM : valueM.then(doRec);
}
return doRec();
}

76. function generateUserURL(userMaybe) {
return Do(Maybe, function*() {
let user = yield userMaybe;
let name = yield user.name;
return user.hasPage ? nameToURL(name) : null;
});
}
generateUserURL({ name: 'foobar', hasPage: true });
// == Maybe('https://fezbok/foobar')
generateUserURL({ name: 'barbaz' });
// == Maybe(null)
generateUserURL(null);
// == Maybe(null)
getAvatarURL({ hasPage: true });
// == Maybe(null)

77. // Promise.of = Promise.resolve;
Do(Promise, function*() {
const friends = yield getUserFriends({ id });
const firstFriend = yield getUserData(friends[0]);
return getUserFriends(firstFriend);
});

78. async function getFriendsOfFirstFriend(id) {
const friends = await getUserFriends({ id });
const firstFriend = await getUserData(friends[0]);
return getUserFriends(firstFriend);
}

79. λ!

80. ?

84. 1Evite mutação
Use dados e APIs imutáveis e sempre use const ao invés de let e var.
Reduz o risco de estado compartilhado;

85. 2Evite dependências implícitas
Podem trazer efeitos colaterais indesejados e estado compartilhado.
this é uma dependência implícita;

86. 3Desacople dados e comportamento
Pense em unidades de trabalho pequenas e genéricas.
Abstraia e componha.

87. — EU
“Programação funcional é uma ótima
ferramenta para controle de complexidade.”

88. O(n²)

90. AbstractSingletonProxyFactoryBeanImpl

91. 1 Difícil de identificar e
decompor em partes;
2 Depende de recursos
compartilhados;
3 Ligado a uma ordem
de execução predefinida.
CÓDIGO
IMPERATIVO É
DIFÍCIL
DE TESTAR
Difícil de identificar e
decompor em partes;
Depende de recursos
compartilhados;
Ligado a uma ordem de
execução predefinida.

92. 1 Difícil de identificar e
decompor em partes;
2 Depende de recursos
compartilhados;
3 Ligado a uma ordem
de execução predefinida.
CÓDIGO
IMPERATIVO É
DIFÍCIL
DE REFATORAR
Difícil de identificar e
decompor em partes;
Depende de recursos
compartilhados;
Ligado a uma ordem de
execução predefinida.

93. 1 Difícil de identificar e
decompor em partes;
2 Depende de recursos
compartilhados;
3 Ligado a uma ordem de
execução predefinida.
CÓDIGO
IMPERATIVO É
DIFÍCIL
DE ENTENDER
Difícil de identificar e
decompor em partes;
Depende de recursos
compartilhados;
Ligado a uma ordem de
execução predefinida.

94. CÓDIGO
FUNCIONAL É
FÁCIL
DE ENTENDER
1 Difícil de identificar e
decompor em partes;
2 Depende de recursos
compartilhados;asdasda
sdas
3 Ligado a uma ordem de
execução predefinida.
Força a decomposição
de tarefas complexas;
Abstrai e generaliza
estruturas de controle
de fluxo;
Completamente
previsível.

95. REQUER
DESAPRENDER

96. REQUER
REAPRENDER

97. Brian Lonsdorf (Dr. Boolean)
PROFESSOR FRISBY’S
MOSTLY ADEQUATE GUIDE
TO FUNCTIONAL
PROGRAMMING

98. Luis Atencio
FUNCTIONAL
PROGRAMMING
IN JAVASCRIPT

99. Evan Czaplicki
ELM

100. @arthurxavierx @arthur-xavier
goo.gl/kL4SNH