Understanding JavaScript object accessors
JavasScript is a very powerful and versatile language that plays a fundamental role in web development and is known for manipulating its objects and data in various ways. Objects are one of its core concepts, and we manipulate objects using properties. Properties are attributes of objects. They define the state and behavior of an object. Properties can be considered as variables that belong to an object. These variables can hold values including primitive datatypes like string, boolean, integer, etc., or complex datatypes like another object of functions.
In this answer, we’ll explore the world of JavaScript accessor properties and how they relate to JavaScript objects with practical examples of their usage.
What are accessor properties?
Accessor properties are special JavasScript properties created by using special functions known as getters and setters. These functions allow us to define custom behavior while retrieving or modifying the value of a JavaScript object’s properties.
Getters
Getter functions are used to retrieve the value of a property. These functions are defined by using the get keyword followed by the name of the property.
const person = {firstName: "John",lastName: "Doe",get fullName() {return this.firstName + " " + this.lastName;},};console.log(person.fullName); // John Doe
Code explanation
Line 4: We define the getter function
fullName()for thefullNameproperty using thegetkeyword.Line 5: Inside this getter function, we concatenate
firstNameandlastNamewith a white space between them and return the concatenated value.Line 9: We’re accessing the full name with
person.fullNameaccessor property of thepersonobject.
Setters
Setters are the functions used to change a property’s value. They’re defined using the set keyword followed by the name of the property.
const person = {firstName: "John",lastName: "Doe",set fullName(name) {const parts = name.split(" ");this.firstName = parts[0];this.lastName = parts[1];},};person.fullName = "Jane Smith";console.log(person.firstName); // Janeconsole.log(person.lastName); // Smith
Code explanation
Line 4: We define the setter function
fullName()usingsetkeyword for thefullNameproperty. It takes a single argument,name, which represents the value that will be assigned to thefullNameproperty.Line 5: Inside the setter function, we split the full name (
name) into an array namedpartsusing thesplit()method with white space (" ") as the base of splitting.Line 6: We update the
firstNameproperty with the first element of thepartsarray as the updated value.Line 7: We update the
lastnameproperty with the next element in thepartsarray.Line 11: We provide
Jane Smithas the value to thefullNameproperty, which is then also passed as the argument to the setter function.
Benefits of accessor properties
Accessor properties provide a lot of benefits, such as
Encryption: Getters and setters provide a way to encapsulate the internal state of an object. We can hide the complexity of accessing a property and its modification behind the custom logic.
Validation: We can validate inputs before setting them. This provides us with the opportunity to avoid invalid data.
Computed properties: Accessor properties allow us to generate computed properties when we need dynamically generated values.
Conclusion
It’s essential to comprehend properties when working with JavaScript objects, and accessor properties of JavaScript provide a powerful mechanism for controlling and customizing property access and modification in objects. We can build more manageable, strong, and efficient JavaScript code by comprehending and leveraging accessor properties, making our applications more flexible and adaptive to changing requirements.
Free Resources
