1
00:00:02,200 --> 00:00:05,910
Let's start with pure functions and side effects,

2
00:00:05,920 --> 00:00:07,410
what is that?

3
00:00:07,420 --> 00:00:11,850
Well, a pure function is a function which for some given input,

4
00:00:11,890 --> 00:00:21,340
so for some given arguments, always produces the same output, so the same arguments, the same values for

5
00:00:21,340 --> 00:00:26,230
the given arguments always produce the same output

6
00:00:26,230 --> 00:00:35,050
and it also does not trigger any side effects, which means it does not change anything outside of the

7
00:00:35,050 --> 00:00:35,670
function.

8
00:00:36,190 --> 00:00:39,540
So let's have a look at this in practice. For this again,

9
00:00:39,540 --> 00:00:46,000
we get a very basic project, an empty HTML file pretty much with no content and an app.js file

10
00:00:46,020 --> 00:00:47,160
which is also empty,

11
00:00:47,160 --> 00:00:52,440
you can create it yourself or take the one which you find attached and in there, I want to create a pure

12
00:00:52,470 --> 00:00:55,080
function without side effects with you.

13
00:00:55,350 --> 00:00:57,030
And a basic example for this

14
00:00:57,030 --> 00:01:01,530
and of course you can create the function in any way you want with the function keyword, as a function

15
00:01:01,530 --> 00:01:05,970
expression or as a function expression with the arrow function syntax,

16
00:01:05,970 --> 00:01:12,630
here I'll go through the good old function declaration syntax. So I'll create such a function and l name it add

17
00:01:13,180 --> 00:01:19,620
and this will take two numbers, num1 and num2 as parameters let's say and then return num1 + num2

18
00:01:19,620 --> 00:01:20,190
,

19
00:01:20,220 --> 00:01:26,400
so it's a very basic function which adds two numbers. We can then console log a call to that function

20
00:01:26,400 --> 00:01:33,480
with the numbers 1 and 5 for example and another one with the values 12 and 15.

21
00:01:33,530 --> 00:01:41,110
Now if we do that and we execute this function simply by loading our empty HTML file, we see that we get

22
00:01:41,110 --> 00:01:48,250
the results 6 and 27 and no matter how often I reload, which I'm doing here, we always get the same result

23
00:01:48,340 --> 00:01:54,040
which shouldn't be a surprise because there is no randomness in this function, there is no strange behavior.

24
00:01:54,370 --> 00:02:03,670
For the same values as I input, we always will get back the same result, 6 and 27 and therefore this is

25
00:02:03,670 --> 00:02:11,170
a perfect example for a pure function. It does not change anything outside of the function and it always

26
00:02:11,170 --> 00:02:15,250
produces the same result for the same inputs.

27
00:02:15,250 --> 00:02:24,610
Now what would be an example for an impure function? For example, add random where we always get an input

28
00:02:25,060 --> 00:02:34,270
and then we return num1 plus math.random, so we return our input plus a random number. If we then call

29
00:02:34,360 --> 00:02:43,120
add random, let's say with a value of 5, then we of course see that if we run this code, we get different

30
00:02:43,120 --> 00:02:47,670
results down there every time I reload this page, you see how this changes.

31
00:02:47,830 --> 00:02:53,980
Of course we do because we add a random function but because we can't predict the output for a given

32
00:02:53,980 --> 00:02:57,240
input, this would be an impure function,

33
00:02:57,250 --> 00:03:05,560
so a function that is not pure. A function is also not to be considered pure if it introduces side effects

34
00:03:05,770 --> 00:03:13,270
which is a fancy term for saying it changes anything outside of the function, that could be an HTTP

35
00:03:13,270 --> 00:03:18,460
request which you are sending or data which is stored in the database but it could also be something more

36
00:03:18,460 --> 00:03:23,710
trivial, like let's say changing some variable which is defined outside of the function. Let's say we

37
00:03:23,710 --> 00:03:34,190
have our previous result variable which is 0 and then we had a function, add more numbers, where we have

38
00:03:34,190 --> 00:03:36,010
num1 and num2 again

39
00:03:36,500 --> 00:03:42,070
and I do still sum them up, num1 + num2

40
00:03:42,110 --> 00:03:48,200
but then I also set previous result equal to sum before I return the result.

41
00:03:48,200 --> 00:03:56,570
So this function here would now not be pure because it introduced a side effect, the side effect is not

42
00:03:56,810 --> 00:04:01,870
that we calculate the sum here because that is stored in a constant which is part of the function,

43
00:04:01,880 --> 00:04:03,800
this would be absolutely fine,

44
00:04:03,920 --> 00:04:06,160
the side effect is this line here,

45
00:04:06,320 --> 00:04:10,630
we change a variable that is defined outside of the function.

46
00:04:10,670 --> 00:04:16,670
So when you call this function and you don't see the function definitions, if you just call it like this,

47
00:04:16,970 --> 00:04:23,570
it might not be obvious that besides returning a result, this function changes something and therefore,

48
00:04:23,750 --> 00:04:26,090
this might be something you want avoid.

49
00:04:26,090 --> 00:04:31,130
Now I'll talk a bit more about the rules regarding when you should use pure functions and when it's

50
00:04:31,130 --> 00:04:34,010
OK to use other functions in the next lecture

51
00:04:34,160 --> 00:04:40,580
but for the moment, just be aware that this function would hold a so-called side effect. Another example

52
00:04:40,580 --> 00:04:46,640
for a function with a side effect would be a function that changes an object or an array that you pass

53
00:04:46,640 --> 00:04:47,180
into it.

54
00:04:47,720 --> 00:04:55,910
Let's say we have our hobbies here and there we got an array with sports and cooking and then we have

55
00:04:55,910 --> 00:05:04,430
a function, print hobbies and we expect to get our hobbies here as an argument, as a parameter,

56
00:05:04,430 --> 00:05:06,100
I'll just name it h here

57
00:05:06,200 --> 00:05:13,400
and of course we console log h here but let's say for whatever reason, we also push a new hobby onto

58
00:05:13,400 --> 00:05:22,650
that array, new hobby. If we now call print hobbies and we pass in hobbies, we'll see that what actually

59
00:05:22,650 --> 00:05:29,150
gets printed is our hobbies array with the new extra hobby here, as you can see here and the reason for

60
00:05:29,150 --> 00:05:35,270
that of course is that we change that array but because arrays are objects and objects are reference

61
00:05:35,270 --> 00:05:36,010
values,

62
00:05:36,170 --> 00:05:42,530
when we change that array here, we change the original array because what we get here in the parameter

63
00:05:42,620 --> 00:05:49,670
is not a copy of that array but a copy of the address of the array and therefore, we work with the exact

64
00:05:49,760 --> 00:05:51,440
same object in memory,

65
00:05:51,440 --> 00:05:55,640
so when we change it inside of the function, we also change it outside of the function,

66
00:05:55,730 --> 00:06:01,640
hence again we have a side effect. So that are pure functions and side effects,

67
00:06:01,820 --> 00:06:05,300
is it now a good idea to use pure function? Is it bad?

68
00:06:05,300 --> 00:06:07,610
Is it bad to use side effects?

69
00:06:07,610 --> 00:06:10,940
How should you work with functions with this extra knowledge gained?