Introduction
An open-source programming language is JavaScript. It is designed to be used for creating web-based applications. It is significantly quicker than other languages since it is lightweight and interpretable. Because JavaScript and HTML are intertwined, it is simpler to use JavaScript in web applications.
JavaScript is absolutely essential for web development.
Working With Objects
Object-oriented design is the foundation of JavaScript. A property may have a function as its value in which case it is referred to as a method. You can specify your own objects in addition to those that are already predefined in the browser. This chapter describes using objects, properties, functions, and methods and creating custom objects.
Overview of Objects
Like many other programming languages, JavaScript's objects are comparable to actual physical objects. Real-world objects can be used to understand the JavaScript idea of objects.
JavaScript objects are separate entities with properties and types. Compare it to a cup, for example. A cup is an object with properties. A cup has a color, design, weight, material it's made of, etc. Likewise, JavaScript objects can have properties that define their properties.
Our Learners Also Read: Sort Array in Java: All You Need to Know
Objects and Properties
An object in JavaScript has corresponding properties. A variable that is associated with an object might be described as an object property. Except that they are attached to objects, object properties are essentially the same as conventional JavaScript variables. Object properties define the properties of an object. You access object properties using simple dot notation:
object_name.property_name
The object name (which can be a regular variable) and the property name, like other JavaScript variables, are case-sensitive. A property can be defined by having a value put on it. For illustration, let's build an object called myCar and give it the following properties: make, model, and year.
const myCar = new Object();
myCar.make = 'Ford';
myCar.model = 'Mustang';
myCar.year = 1969;
JavaScript Object Methods
Actions that can be performed on a JavaScript object are called methods.
First, we define the object and the user; and add a couple of properties to it, namely name and age.
Then we'll create a new function that throws the "Hello!" notification.
We can add this method to an object the same way we add properties.
We then use the JavaScript DOM to attach an event listener to the HTML button, which fires a notification when clicked.
Java Object Property Types
JavaScript uses internal attributes that are delimited by two sets of square brackets, such as [[Enumerable]], to specify object properties.
Both data and accessor attributes can be found in objects.
Data Properties
The date property contains one location for a data value. A data property has four attributes:
[[Configurarable]] - Specifies whether the property can be redefined or deleted using the delete operator.
[[Enumerable]] – indicates whether the property can be returned in for a loop.
[[Writable]] - Specifies that the property value can be changed.
[[Value]] – contains the actual value of the property.
By default, the [[Configurable]], [[Enumerable]], and [[Writable]] attributes are set to true for all properties defined directly on the object. The default value of the [[Value]] attribute is undefined.
The following example creates a person object with two properties firstName and lastName, with configurable, enumerable, and writable attributes set to true. And their values are set to "John" and "Doe":
let person = {
first name: 'John',
last name: 'Doe'
};
Code language: JavaScript (javascript)
To change any property attribute, use the Object.defineProperty() method.
The Object.defineProperty() method accepts three arguments:
Object.
The property name of the object.
A property descriptor object has four properties: configurable, enumerable, writable, and valuable.
If you use the Object.defineProperty() method to define an object property, the default values of [[Configurable]], [[Enumerable]], and [[Writable]] are set to false unless otherwise specified.
In the following example, a person object with age is created:
let person = {};
person.age = 25;
Code language: JavaScript (javascript)
Since the default value of the [[Configurable]] attribute is set to true, you can remove it using the delete operator:
delete person. age;
console.log(person.age);
Code language: CSS (css)
Exit:
undefined
Access Object Properties
Similar to data properties, accessor properties also have [[Configurable]] and [[Enumerable]] attributes.
But accessor properties have [[Get]] and [[Set]] attributes instead of [[Value]] and [[Writable]].
When you read data from a property of an accessor, the [[Get]] function is automatically called to return the value. The default return value of the [[Get]] function is undefined.
If you assign a value to the accessor property, the [[Set]] function is called automatically.
To define a property of an accessor object, you must use the Object.defineProperty() method. or example:
let person = {
first name: 'John',
last name: 'Doe'
}
Object.defineProperty(person, 'fullName', {
get: function () {
return this.firstName + ' ' + this.lastName;
},
set: function (value) {
let parts = value.split(' ');
if (parts.length == 2) {
this.firstName = parts[0];
this.lastname = parts[1];
} else {
throw 'Invalid name format';
}
}
});
console.log(person.fullName);
Code language: JavaScript (javascript)
Exit:
'John Doe'
Code language: JavaScript (javascript)
In this example:
- Create a person object by first specifying its firstName and lastName fields.
- Then, as a property of the accessor object, add the fullName property to the person object.
- The first name, space, and last name are concatenated to create the full name, which is returned by the [[Get]] method of the full name accessor property.
- The firstName and lastName attributes are given to the corresponding pieces of the name when the [[Set]] method divides the parameter by a space.
- It will produce an error if the whole name is not entered in the proper format, which is the first name, space, and last name.
Conclusion
Objects are a key part of any object-oriented programming language. So it is important to know the subtleties of this concept properly. Data properties and accessor properties are the two categories of attributes that JavaScript objects can have. The features of properties like [[Configurable]], [[Enumerable]], [[Writable]], and [[Value]], [[Get]] and [[Set]] are described by JavaScript using internal attributes marked [[...]]. The property descriptor of a property on an object is returned by the function Object.getOwnPropertyDescriptor().
