Original subtitles

1 1

One operator that I dint mention 2

2

in the last lecture, 3

3

is the Remainder Operator. 4

4

And the reason for that is that the remainder operator, 5

5

has actually some special use cases, 6

6

and so it deserves a lecture on its own. 7

7

So what is the remainder operator? 8

8

Well, as the name says, the remainder operator, 9

9

simply returns the remainder of a division. 10

10

So lets check that out, 11

11

so the remainder operator is this one. 12

12

So the percentage sign, 13

13

and so lets check what five remainder two is, 14

14

and it is one. 15

15

So why is that? 16

16

Lets say we divide five by two, 17

17

and so then we get two point five. 18

18

But if we took only the integer part, 19

19

so only two then the result will be two. 20

20

Okay? 21

21

So if we did the division only until the integer part, 22

22

then that result will be two, 23

23

because two times two is four, 24

24

but then there will be the remainder of one. 25

25

Right? 26

26

Because five minus four is one. 27

27

So we can say that five is two times two plus one. 28

28

Alright? 29

29

And so this here is the remainder, 30

30

and therefore five remainder two is one. 31

31

Lets try another one, 32

32

lets say eight remainder two or three actually, 33

33

and so now the remainder is two. 34

34

Okay? 35

35

And if we did eight dived by three, 36

36

then we would get this number here. 37

37

But again if we only took the integer part, 38

38

so two, then we would only end up with six. 39

39

So two times three is six, so lets write that. 40

40

eight is two times three, 41

41

so this three here times two, 42

42

plus the remainder which is two. 43

43

So six plus two is eight, 44

44

and so two is the remainder and therefore, 45

45

that's the result that we get here 46

46

from the remainder operation. 47

47

Alright? 48

48

So maybe you are not yet familiar with this concept, 49

49

and so I hope that it made sense. 50

50

Now, one thing that is many times used for in programming, 51

51

is to check whether a certain number is even or odd. 52

52

So, even numbers are zero, two, four, six, eight, ten 53

53

and so on and so forth. 54

54

And the odd numbers are all the others. 55

55

So, one, three, five, seven, etcetera. 56

56

So, when is a number even? 57

57

Well, its even if its divisible by two. 58

58

And divisible by two means that if we divide it by two, 59

59

the remainder is zero. 60

60

So lets check that, 61

61

so six is an even number. 62

62

Right? 63

63

And so, the remainder of dividing it by two is zero. 64

64

And that's because, a dividing six by two, 65

65

is an integer number, so its exactly three. 66

66

So three times two, so this two here gives then six, 67

67

Alright? 68

68

But on the other hand, an even number is for example seven. 69

69

Alright? 70

70

And so here we have the remainder as one, 71

71

and that's because three times two is six, 72

72

and then plus one which is the remainder is seven again. 73

73

And so just like five, which is also an odd number. 74

74

Okey? 75

75

And so now we, can use that knowledge to check 76

76

whether a certain number is even or not. 77

77

So lets create a function, 78

78

isEven and a simple arrow function is perfect here, 79

79

so if the reminder of n with two is equal zero, 80

80

well then of course, this will return true. 81

81

And otherwise its gonna return false, 82

82

so when its one, then the result of this function 83

83

will be false. 84

84

So, lets use this, isEven, lets try with eight, 85

85

23 and maybe well, something else, it doesn't really matter, 86

86

and so intuitively, we know that eight is an even number 87

87

and so we get true. 88

88

This one is an odd number, and an even number, 89

89

and therefore we get the correct results. 90

90

Okay? 91

91

And so of course, this works to check if any number 92

92

is divisible by any other number. 93

93

Alright? 94

94

And whenever the results of the remainder operator is zero, 95

95

then that means that the first number is completely 96

96

divisible by the second one. 97

97

And again, this is sometimes very important 98

98

to know in programming. 99

99

So lets see another example here, 100

100

involving our application, 101

101

not really in practical terms, but just to have some fun. 102

102

So lets select all of the rows of our movements. 103

103

So, yeah lets check the hdml here, 104

104

so each of the movements is this row, 105

105

so this element with this class, 106

106

and so lets select all of them, 107

107

and then we will paint them a little bit 108

108

based on some conditions. 109

109

So lets select all of this elements, 110

110

so all, so that's that, and then this class name, 111

111

and so this here will return a note list, 112

112

and so lets convert it to a real array, 113

113

and for that this time am gonna use the spread operator, 114

114

so I will spread all of these elements, 115

115

into this newly created array, and then on that array, 116

116

I can immediately call for each, 117

117

and so lets specify a call back function, 118

118

with the current element, 119

119

which is the current row, and the current index. 120

120

Alright? 121

121

And now lets say that I wanted to color 122

122

every second row of the movements. 123

123

So all i have to do, is to check if the code index 124

124

is divisible by two. 125

125

So I, which will start at zero, 126

126

then its gonna be one, two, three, four, 127

127

and so on and so forth. 128

128

So if I want to color every second row, 129

129

then if I do this, then every second number 130

130

will be divisible by two, 131

131

and every other second number will not. 132

132

So I can just check if its zero, and if it is, 133

133

then I take the current row, 134

134

take this style and change the background color, 135

135

and remember that we have to use camel case notation here, 136

136

and lets change it to orange red. 137

137

So just to make it a little bit fun, okey? 138

138

And actually just like before, 139

139

this here has to happen inside of a handler, 140

140

so an event handler function, 141

141

because this code here, will execute right when we start 142

142

our application, 143

143

but then as we log in, 144

144

we override that with the deposits of the current user. 145

145

And so, lets again do that as we click here on this balance, 146

146

just so that we have like any reference point. 147

147

Okey? 148

148

And now lets try this again. 149

149

Alright? 150

150

And now as I click this label, well like magic, 151

151

every second row is now painted in orange red. 152

152

So beautiful, right? 153

153

Well not really, but at least we know that our code worked. 154

154

Alright? 155

155

Lets do another one, 156

156

so now lets say that I want to paint every third row, 157

157

also in even another color. 158

158

And so I do, the remainder of three, 159

159

And each time is equal to zero, 160

160

then I do set this back ground color to blue. 161

161

Alright? 162

162

And so this here will be at zero, three, six, nine 163

163

and so on and so forth, 164

164

while this one here is gonna be, as we already saw 165

165

at zero, two, four, six, and so on. 166

166

And you see that there's gonna be some overlap here, 167

167

but that's not a problem. 168

168

Here we are missing the r, give it a save, 169

169

and just try it one more time. 170

170

So this is just for fun of course, 171

171

but there could be real applications to this. 172

172

So you see that now every third row, 173

173

is indeed blue. 174

174

So really nice looking, 175

175

a fact that we just created here. 176

176

But yeah, and just to illustrate really, 177

177

how the remainder works. 178

178

So whenever you need to do something every Nth time 179

179

so to say, so every, I mean this, 180

180

every Nth time, then it is a good idea 181

181

to use the remainder operator for that. 182

182

So here for example, every second time, every third time, 183

183

but of course this might then depend on your specific need, 184

184

maybe in you application. 185

185

So this how we use the remainder operator, 186

186

yet another one in your tool box now, 187

187

and with that lets go straight to the next video.