Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.9 Getters and Setters

As well as regular object properties, we can also create properties that have getters and setters, which are special functions that run when the property is set or accessed.

Syntax

  • get
  • set
  • this

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


5.9 Getters and Setters

Hi folks, in this lesson, we can take a look at adding getters and setters to properties that we create in object literals. Getters and setters are special functions that are invoked automatically whenever a property is accessed or assigned to. Let's start by looking at getters. We can add a getter using the get keyword in front of the property name. So, in this example, we create a regular object literal called, myObj. We give it a regular property with the key, otherProp, and the value, other, in string format. We then add a new property called prop, but we use the get keyword in front of the property name. And notice how the property actually looks like a method. In this example, we'll just log to the console and then return the value of the other prop property. So now, whenever we access prop, it will invoke the getter. And let's review the output in a browser. So we see our log message and then the getter property actually returns the value of otherProp, which in this case is the string, other. Inside our getter, we can perform whatever logic we want. Although, as I said, in this case, we just log a message to the console and then return a different property value. Again inside the getter, we've used the special object called, this. We will come back to this shortly in the next section, in this context, just understand that this refers to the object, myObj. So now let's take a look at setters. We can add a setter for the same property that we have a getter for. So a setter looks very much like a getter except that we use the set keyword instead of the get keyword. And a setter will receive a value, and that is the new value that is being set to the property. So in this basic example, we can just do another console log, and we'll just log out the value that we are setting. And on the last line inside the setter, this line here, we set the value of otherProp to the new value. We don't have to add both getters and setters to the same property, although we have done in this case. And when using getters and setters, we will very often set or get a different property than the getter or setter themselves. In the console.log statement down at the bottom, you can see that we were getting the value prop. But that was actually returning the value of otherProp. And this is most commonly how getters and setters are used. So let's just invoke our new setter. And let's just log out the objects once we've invoked the setter. Let's go back to the browser now, so we see the log message from the setter, and below that, we can see a log of the object. And we can see that the other property has had its value set to new. It's important to understand, however, that the other property that we've been working with is not hidden or protected in any way. Just because we're using a getter and a setter with it. We can still access otherProp directly if we want to. But if we are building something to be used by other developers, like a widget, or a plugin for some framework. We only need to publicize the property that has the getter and the setter attached to it. And not the property that the getter and setter operates on, we don't have to use a different property if we just want to add a getter. We only needed it in this example because we had both a getter and a setter. So in this lesson, we learned how to add getters and setters to properties within object literals. Getters and setters are properties that have methods which are invoked when the property is either accessed. Or has a new value assigned to it. We also learned that inside a getter or a setter, the this keyword points to the object that the getter or setter belongs to. In the next lesson, we're going to look at custom objects. Thanks for watching.

Back to the top