Original subtitles

1 1

Let's now talk about a feature 2

2

that is actually common to all objects in JavaScript, 3

3

and that's getters and setters. 4

4

So every object in JavaScript 5

5

can have setter and getter properties. 6

6

And we call these special properties assessor properties, 7

7

while the more normal properties are called data properties. 8

8

So getters and setters are basically functions 9

9

that get and set a value so just as the name says, 10

10

but on the outside they still look like regular properties. 11

11

And so let's first take a look at getters and setters 12

12

in a simple object literal, 13

13

and for that I'm gonna use the bank account example 14

14

from the Bankist application. 15

15

So very simple object literal here. 16

16

The owner is Jonas. 17

17

Then some simple movements. 18

18

So the values here don't really matter, okay? 19

19

Oh, and of course I'm writing this object all wrong. 20

20

Maybe you have already been noticing that. 21

21

Okay, but now it should be correct. 22

22

All right, but now to add a getter to this object. 23

23

We can start by basically writing a normal method. 24

24

So let's say that we want a method 25

25

to get the latest movement and so let's call it latest. 26

26

And then to transform this into a getter 27

27

we simply prepend the keyword get. 28

28

All right, and so let's simply return the last movement here 29

29

so that's this.movements.slice -1. 30

30

But this is actually gonna return an array, 31

31

so an array with the last position 32

32

and so we can simply take that out using the pop method. 33

33

And we could've used destructuring as well, 34

34

but I didn't want to save this 35

35

into an external variable first. 36

36

And so now we can use this getter like this. 37

37

So account and then we say latest, 38

38

but we simply use it as a property. 39

39

All right, so we don't call the method, 40

40

but instead we write it as if it was just a property. 41

41

So let's see, and indeed that returns 300. 42

42

So this can be very useful 43

43

when we want to read something as a property, 44

44

but still need to do some calculations before. 45

45

Okay, and now we can do the same also as a setter. 46

46

So we say set, latest again 47

47

and then here we can basically add a new movement 48

48

to the array. 49

49

And any setter method needs to have exactly one parameter. 50

50

So in this case that's simply a movement. 51

51

So let's say this.movements.push 52

52

and then that movement that we just passed into. 53

53

Now it is not mandatory to specify a setter 54

54

when we have a getter for the same property. 55

55

Okay, so just a getter or just a setter would be enough. 56

56

And so, how do we use the setter now? 57

57

So if it was a regular method then we would have to do this. 58

58

So account.latest and then call it with the movement, 59

59

let's say 50. 60

60

But now this is actually like a property and not a method. 61

61

And so we can simply set it 62

62

just like we set any other property. 63

63

So we essentially set it equal to 50. 64

64

And so now if we take a look at the movements here, 65

65

it will then give us the complete array 66

66

with the 50 there at the end. 67

67

And so in a nutshell this is how getters and setters work 68

68

for any regular object in JavaScript. 69

69

Now however, classes do also have getters and setters, 70

70

and they do indeed work in the exact same way. 71

71

And so let's try them out now here in our person class. 72

72

So here we can for example add a getter 73

73

for the age property. 74

74

So we can say get age and then we return the age. 75

75

So this is of course very similar to the calcAge method 76

76

that we already have here but that doesn't matter 77

77

because this is really just a demonstration example. 78

78

All right, and so like this we will be able 79

79

to basically read the age of any object using a property. 80

80

So let's try that here for example, jessica.age, 81

81

and this time we actually need to log it to the console. 82

82

And you see here we now get the same value. 83

83

All right, so you see that the getter is indeed 84

84

just like any other regular method 85

85

that we set on the prototype. 86

86

And in fact we can also check that out here. 87

87

So if we take a look at the prototype of Jessica, 88

88

it will be right there. 89

89

Now it has these dots here 90

90

because it's only calculated once we actually click this. 91

91

Okay? 92

92

So here too it already looks as if it would be a property 93

93

and not a method. 94

94

We still have the get method down here, 95

95

but then it's also kind of ended as a property. 96

96

All right? 97

97

So that's a very simple use case of a getter, 98

98

but setters and getters can actually be very useful 99

99

for data validation and as an example, 100

100

let's try some validation with the name. 101

101

So for that I will actually change a firstName here 102

102

to fullName. 103

103

And so now here we expect a full name. 104

104

So a name which basically contains a space. 105

105

So let's say Jessica Davis here, 106

106

and so now we can create a setter for the fullName property 107

107

which will check if this is actually a full name. 108

108

All right, so set fullName, 109

109

and then we need the name itself, 110

110

and then here we need some logic. 111

111

So to test if it contains a space, 112

112

if the name includes a space, 113

113

and I'm not sure if it is called includes actually. 114

114

Now let me just test it here very quick. 115

115

Okay, we have to comment out this part. 116

116

All right, so this method actually does exist. 117

117

So I wasn't sure if it only exists on erase, 118

118

but indeed it also exists on strings. 119

119

And so in this case then we actually want to set 120

120

this.fullName to the name that was received. 121

121

But if not, we want to give an alert. 122

122

So the given name is not a full name. 123

123

So in this case what's really important to understand 124

124

is that we are creating a setter for a property name 125

125

that does already exist. 126

126

So fullName is already a property 127

127

that are trying to set here, 128

128

but then we also have the setter. 129

129

And so now what's gonna happen is 130

130

that each time this code here is executed, 131

131

so whenever we set the fullName on the this keyword, 132

132

then actually this method here, 133

133

so this setter is gonna be executed. 134

134

And so that name that we pass in as fullName 135

135

will then become this name. 136

136

All right, let's check that out actually. 137

137

And so now as we create Jessica here, 138

138

you will see and indeed it, we saw Jessica Davis here, 139

139

but now we got this crazy error here 140

140

of maximum call stack size exceeded. 141

141

Now that's a very cryptic error message, 142

142

but what happens here is that there is a conflict. 143

143

So right now both the setter function 144

144

and this constructor function 145

145

are trying to set the exact same property name. 146

146

And so that gives origin to this weird error. 147

147

So what we need to do instead 148

148

is to here create a new property name. 149

149

And the convention for doing that, 150

150

so when we have a setter which is trying to set a property 151

151

that does already exist, 152

152

then here as a convention we add an underscore. 153

153

So again, this is just a convention, 154

154

it's not a JavaScript feature. 155

155

So it's really just a different variable name 156

156

to avoid that naming conflict. 157

157

However, now when we do this, 158

158

we are actually creating a new variable, 159

159

so a fullName variable. 160

160

So let's try this now actually. 161

161

So if we try to look at Jessica Davis you see that right now 162

162

the property that exists is underscore fullName. 163

163

And so right now we cannot do jessica.fullName 164

164

because that simply doesn't exist. 165

165

And so to fix this we now also need to create a getter 166

166

for the fullName property. 167

167

And so that will simply return the underscore fullName. 168

168

So let's see. 169

169

So return this._fullName. 170

170

And so if we try to do the same now, 171

171

then you see that we are back to having this fullName here. 172

172

All right? 173

173

And of course, the actual property that is here 174

174

is now still underscore fullName, 175

175

because well that's what we do here in the setter, right? 176

176

But then we can also compute this full name 177

177

just as we can compute the age. 178

178

So this pattern here is important to understand 179

179

whenever we try to set a property that already exists. 180

180

Now let's try another name here just to see what happens, 181

181

and actually after all this. 182

182

So let's create a Walter object here. 183

183

New PersonCl, that's right. 184

184

And now we're just using a name with one word, 185

185

let's say 1965 and so now we get this error. 186

186

So Walter is not a full name, 187

187

and so right now if we check out Walter, 188

188

age probably doesn't have any name, and yeah it doesn't. 189

189

So just the birth year now. 190

190

But if we then put it as a full name, 191

191

so Walter White then indeed, Walter like this, 192

192

then we get the underscore fullName. 193

193

But just like before we can then also access walter.fullName 194

194

because of that setter or actually of that getter 195

195

that we just defined earlier. 196

196

Now okay, great, so this is another nice feature of classes 197

197

that can be very useful sometimes. 198

198

Now we don't need to use getters or setters, 199

199

and many people actually don't, 200

200

but yeah, as I just said sometimes it's just nice 201

201

to be able to use these features 202

202

and especially when we need like a validation like this 203

203

by the time we are creating a new object. 204

204

So that's essentially what this setter here does. 205

205

Next up, 206

206

we're gonna take a look at yet another feature of classes, 207

207

which is static methods. 208

208

So let's check that out right now.