[READ-ONLY] Mirror of https://github.com/Schniz/functional-programming-smalltalks. small talks about fp in js for Keywee
move files and fix links
Gal Schlezinger
(Jan 15, 2018, 6:47 PM +0200)
9faa3e97
84467f7f
+158
-158
+2
-2
README.md
+2
-2
README.md
···
25
25
26
26
* [First class functions](talk01/01_first-class-functions.md) - introduction
27
27
* [Function purity](talk01/02_purity.md) - introduction
28
-
* [Function composition](talk01/02_purity.md) - introduction
29
-
* [Lenses](talk01/03_lenses.md) - pattern
28
+
* [Function composition](talk01/03_function_composition.md) - introduction
29
+
* [Lenses](talk01/04_lenses.md) - pattern
30
30
31
31
# Thanks
32
32
-61
talk01/02.5_function_composition.md
-61
talk01/02.5_function_composition.md
···
1
-
# Function composition
2
-
3
-
I am going to talk a lot about the `compose` function. It is basically function composition:
4
-
5
-
```
6
-
+-------------> f o g ------------+
7
-
| |
8
-
| v
9
-
+-+-+ +------+ +---------+
10
-
| x | -> g -> | g(x) | -> f -> | f(g(x)) |
11
-
+---+ +------+ +---------+
12
-
```
13
-
14
-
```js
15
-
const upcase = x => x.toUpperCase();
16
-
const excl = x => `${x}!`;
17
-
const shout = x => excl(upcase(x));
18
-
19
-
console.log(shout("gal is awesome"));
20
-
```
21
-
22
-
The more functions we compose, the ugly it looks. Let's make it better.
23
-
24
-
```js
25
-
const upcase = x => x.toUpperCase();
26
-
const excl = x => `${x}!`;
27
-
28
-
const compose = (f, g) => x => f(g(x));
29
-
30
-
const shout = compose(upcase, excl); // x => upcase(excl(x))
31
-
console.log(shout("gal is more than awesome"));
32
-
```
33
-
34
-
What just happened?
35
-
36
-
```js
37
-
// ("gal")
38
-
const shout = compose(upcase, excl);
39
-
// ("gal")
40
-
const shout = compose(upcase, excl);
41
-
// ("gal!")
42
-
const shout = compose(upcase, excl);
43
-
// ("GAL!")
44
-
const shout = compose(upcase, excl);
45
-
```
46
-
47
-
GREAET ANIMATION! And if we'd like to implement `compose` for more than just 2 functions (`sanctuary` doesn't support
48
-
it, but `ramda` does)
49
-
50
-
```js
51
-
const upcase = x => x.toUpperCase();
52
-
const excl = x => `${x}!`;
53
-
const addIrcChatBubble = name => text => `<${name}> ${text}`;
54
-
55
-
const compose = (...fns) => x => fns.reduceRight((acc, currFn) => currFn(acc), x);
56
-
57
-
const firstExample = addIrcChatBubble("gal")(upcase(excl("hello everyone")));
58
-
const secondExample = compose(addIrcChatBubble("gal"), upcase, excl)("hello everyone"); // extract shout!
59
-
60
-
console.log({ firstExample, secondExample });
61
-
```
+61
talk01/03_function_composition.md
+61
talk01/03_function_composition.md
···
1
+
# Function composition
2
+
3
+
I am going to talk a lot about the `compose` function. It is basically function composition:
4
+
5
+
```
6
+
+-------------> f o g ------------+
7
+
| |
8
+
| v
9
+
+-+-+ +------+ +---------+
10
+
| x | -> g -> | g(x) | -> f -> | f(g(x)) |
11
+
+---+ +------+ +---------+
12
+
```
13
+
14
+
```js
15
+
const upcase = x => x.toUpperCase();
16
+
const excl = x => `${x}!`;
17
+
const shout = x => excl(upcase(x));
18
+
19
+
console.log(shout("gal is awesome"));
20
+
```
21
+
22
+
The more functions we compose, the ugly it looks. Let's make it better.
23
+
24
+
```js
25
+
const upcase = x => x.toUpperCase();
26
+
const excl = x => `${x}!`;
27
+
28
+
const compose = (f, g) => x => f(g(x));
29
+
30
+
const shout = compose(upcase, excl); // x => upcase(excl(x))
31
+
console.log(shout("gal is more than awesome"));
32
+
```
33
+
34
+
What just happened?
35
+
36
+
```js
37
+
// ("gal")
38
+
const shout = compose(upcase, excl);
39
+
// ("gal")
40
+
const shout = compose(upcase, excl);
41
+
// ("gal!")
42
+
const shout = compose(upcase, excl);
43
+
// ("GAL!")
44
+
const shout = compose(upcase, excl);
45
+
```
46
+
47
+
GREAET ANIMATION! And if we'd like to implement `compose` for more than just 2 functions (`sanctuary` doesn't support
48
+
it, but `ramda` does)
49
+
50
+
```js
51
+
const upcase = x => x.toUpperCase();
52
+
const excl = x => `${x}!`;
53
+
const addIrcChatBubble = name => text => `<${name}> ${text}`;
54
+
55
+
const compose = (...fns) => x => fns.reduceRight((acc, currFn) => currFn(acc), x);
56
+
57
+
const firstExample = addIrcChatBubble("gal")(upcase(excl("hello everyone")));
58
+
const secondExample = compose(addIrcChatBubble("gal"), upcase, excl)("hello everyone"); // extract shout!
59
+
60
+
console.log({ firstExample, secondExample });
61
+
```
-95
talk01/03_lenses.md
-95
talk01/03_lenses.md
···
1
-
# Lenses
2
-
3
-
Lenses are a pattern in functional programming to "see" the "world". Lenses can show you the world as it is, you can
4
-
focus on whatever you want to see, and you can manipulate everything.
5
-
6
-
Lenses have 3 methods: `view`, `over` and `set`.
7
-
8
-
```js
9
-
const user = {
10
-
name: "gal",
11
-
nickname: "schniz"
12
-
};
13
-
14
-
const { lensProp, view, over, set } = require("ramda");
15
-
const $name = lensProp("name");
16
-
17
-
const userName = view($name, user);
18
-
console.log(userName);
19
-
```
20
-
21
-
You can say that it isn't impressive. It's just like using `user.name`. But lenses give more than just that. They're
22
-
composable.
23
-
24
-
```js
25
-
const user = {
26
-
name: "gal",
27
-
nickname: "schniz",
28
-
hobby: {
29
-
name: "talking"
30
-
}
31
-
};
32
-
33
-
const { lensProp, view, over, set, compose } = require("ramda");
34
-
const $name = lensProp("name");
35
-
const $hobby = lensProp("hobby");
36
-
37
-
const hobbyName = view(compose($hobby, $name), user);
38
-
console.log(hobbyName);
39
-
```
40
-
41
-
Still not impressive? yes, still like `user.hobby.name`. Let's see the most powerful thing about lenses.
42
-
43
-
```js
44
-
const { lensProp, view, over, set, compose } = require("ramda");
45
-
const $name = lensProp("name");
46
-
const $hobby = lensProp("hobby");
47
-
48
-
const user = {
49
-
name: "gal",
50
-
nickname: "schniz",
51
-
hobby: {
52
-
name: "talking",
53
-
lovedSince: "forever"
54
-
}
55
-
};
56
-
57
-
const userHagever = set($name, "hagever", user);
58
-
const userDifferentHobby = set(compose($hobby, $name), "javascripting", user);
59
-
console.log({ user, userHagever, userDifferentHobby });
60
-
61
-
// in plain javascript, using shallow copying, it would be like
62
-
63
-
const userDifferentHobbyJS = Object.assign({}, user, {
64
-
hobby: Object.assign({}, user.hobby, {
65
-
name: "javascripting"
66
-
})
67
-
});
68
-
69
-
console.log({ userDifferentHobbyJS });
70
-
```
71
-
72
-
Which one is better?
73
-
74
-
The last function I need to show you is `over`. Well, `over` is like `set`, but more flexible. You can implement `set` with `over`.
75
-
`over` takes a function (instead of a new plain value) to apply on the old value - it is something between `view` and `set`.
76
-
77
-
```js
78
-
const { lensProp, view, over, set, compose } = require("ramda");
79
-
const $nickname = lensProp("name");
80
-
81
-
const user = {
82
-
name: "gal",
83
-
nickname: "schniz",
84
-
};
85
-
86
-
const addHandleIfMissing = nickname => nickname.charAt(0) == '@' ? nickname : `@${nickname}`
87
-
const userWithHandle = over($nickname, addHandleIfMissing, user)
88
-
console.log({ user, userWithHandle });
89
-
90
-
// implementing set is easy -
91
-
92
-
const setWithOver = (lens, value, obj) => over(lens, () => value, obj)
93
-
const userWithNewNick = setWithOver($nickname, 'new nick', user)
94
-
console.log({ user, userWithNewNick })
95
-
```
+95
talk01/04_lenses.md
+95
talk01/04_lenses.md
···
1
+
# Lenses
2
+
3
+
Lenses are a pattern in functional programming to "see" the "world". Lenses can show you the world as it is, you can
4
+
focus on whatever you want to see, and you can manipulate everything.
5
+
6
+
Lenses have 3 methods: `view`, `over` and `set`.
7
+
8
+
```js
9
+
const user = {
10
+
name: "gal",
11
+
nickname: "schniz"
12
+
};
13
+
14
+
const { lensProp, view, over, set } = require("ramda");
15
+
const $name = lensProp("name");
16
+
17
+
const userName = view($name, user);
18
+
console.log(userName);
19
+
```
20
+
21
+
You can say that it isn't impressive. It's just like using `user.name`. But lenses give more than just that. They're
22
+
composable.
23
+
24
+
```js
25
+
const user = {
26
+
name: "gal",
27
+
nickname: "schniz",
28
+
hobby: {
29
+
name: "talking"
30
+
}
31
+
};
32
+
33
+
const { lensProp, view, over, set, compose } = require("ramda");
34
+
const $name = lensProp("name");
35
+
const $hobby = lensProp("hobby");
36
+
37
+
const hobbyName = view(compose($hobby, $name), user);
38
+
console.log(hobbyName);
39
+
```
40
+
41
+
Still not impressive? yes, still like `user.hobby.name`. Let's see the most powerful thing about lenses.
42
+
43
+
```js
44
+
const { lensProp, view, over, set, compose } = require("ramda");
45
+
const $name = lensProp("name");
46
+
const $hobby = lensProp("hobby");
47
+
48
+
const user = {
49
+
name: "gal",
50
+
nickname: "schniz",
51
+
hobby: {
52
+
name: "talking",
53
+
lovedSince: "forever"
54
+
}
55
+
};
56
+
57
+
const userHagever = set($name, "hagever", user);
58
+
const userDifferentHobby = set(compose($hobby, $name), "javascripting", user);
59
+
console.log({ user, userHagever, userDifferentHobby });
60
+
61
+
// in plain javascript, using shallow copying, it would be like
62
+
63
+
const userDifferentHobbyJS = Object.assign({}, user, {
64
+
hobby: Object.assign({}, user.hobby, {
65
+
name: "javascripting"
66
+
})
67
+
});
68
+
69
+
console.log({ userDifferentHobbyJS });
70
+
```
71
+
72
+
Which one is better?
73
+
74
+
The last function I need to show you is `over`. Well, `over` is like `set`, but more flexible. You can implement `set` with `over`.
75
+
`over` takes a function (instead of a new plain value) to apply on the old value - it is something between `view` and `set`.
76
+
77
+
```js
78
+
const { lensProp, view, over, set, compose } = require("ramda");
79
+
const $nickname = lensProp("name");
80
+
81
+
const user = {
82
+
name: "gal",
83
+
nickname: "schniz",
84
+
};
85
+
86
+
const addHandleIfMissing = nickname => nickname.charAt(0) == '@' ? nickname : `@${nickname}`
87
+
const userWithHandle = over($nickname, addHandleIfMissing, user)
88
+
console.log({ user, userWithHandle });
89
+
90
+
// implementing set is easy -
91
+
92
+
const setWithOver = (lens, value, obj) => over(lens, () => value, obj)
93
+
const userWithNewNick = setWithOver($nickname, 'new nick', user)
94
+
console.log({ user, userWithNewNick })
95
+
```